3.4 Lists - Video Tutorials & Practice Problems

<v Instructor>At this point, we've got a good start</v> on the mock book report. And in this section, we're going to add two different lists about some of our observations regarding "Moby-Dick." We'll start with the list of our top three favorite things about "Moby-Dick," which by its nature is going to be an ordered list. Let's take a look at that. I'm gonna put it here at the end after this paragraph. But it's still going to be inside this div. Let's put in the heading. Where are we now? We've done an h3. Now we're gonna say h4. My top 3 favorite things about Moby Dick. And in this section, we're gonna have an ordered list, which is ol. And then the tag for each individual list element is li for list. Like that. So our top three favorite things are a vengeful whale. Salty sailors. Which is true. And then there are some funny names in the book, and this is something that Lee Donhook came up with. He just loves the names Quequeg and Starbuck and I agree with him. Let's take a look at the result of that. There we go. So here's an h4. A smaller heading. And notice here, we have one, two, three, now that wasn't in the source. This is just li, li, li but because it's an ordered list, HTML automatically numbers them. This is especially convenient if you want to change the order, like this. If you say you know what? Salty sailors is really number three. If we refresh that, you can see that it renumbers automatically. The complement to the ordered list tag is the unordered list tag, which as you might guess is ul instead of ol. So I'll put another h4 for this one. This is going to be some other random observations. So no particular order here. That means we can use the UL tag. Herman Melville actually worked on a whaling vessel, so he includes chapter after chapter after chapter of meticulous detail about whaling. If you look at the written tutorial, it actually has new lines here just to format things, make it fit a little better. But remember, it doesn't matter, except in that one edge case we saw with the a here, the a tag. We need to keep this spaceless but otherwise, it doesn't matter if we have spaces. This time, I actually do wanna put some spaces in. We're gonna put in an anchor here and there's enough stuff in here that I wanna put in the space. So one other cool thing about "Moby-Dick" is the story pretty much happened in real life. And copy this link here. This is a harrowing story. Don't read this story unless you're ready to feel kind of bummed out. This is about the whale ship Essex. But it is one of the real-life inspirations for "Moby-Dick." Let's use target equals blank to open this in a new tab. And finally, mad sea captains are fun. You can see here we've got the same basic structure ul, li. Here we have ol, li. Let's take a look at the results. You can see here at the bottom, other things about "Moby-Dick," chapter after chapter after chapter, et cetera. And here instead of numbers, we have these bullet points. If we click on this, it should open in a new tab. Yip. By the way, lists, especially unordered lists, are used in lots of other different contexts. Sometimes, for example, menu items will be an unordered list and then there'll be styled using CSS. So it's possible to make this look really different using Cascading Style Sheets. That's the kind of thing that's covered in Learn Enough CSS and Layout to be Dangerous.