Top Three Stylish Lists for Your HTML

Discover the secret to writing amazing listicle headlines while learning how to create nested lists in HTML. We’ll make numbered and bulleted lists with the ol and ul tags and learn how to nest lists inside of other list items.

  • Click here for the full video transcript

    [intro music]

    >>DAISY: Hello foxy friends! It’s me, Daisy, and this is my top 10 best list of most superlative listicle headlines. One of the toughest parts of writing an amazing listicle is coming up with an awesome headline. So I’ve compiled my top ten list of listicle headlines. Because the order of these headlines is important, we’ll use an ordered list to organize them. Each headline will then be contained in a list item tag. Lets begin! Number one: Top 10 Stylish plural noun for your noun. Now we can pretty much stick any words we want into the blanks. Lets nest another ordered list inside of this list item for all of the blanks in the title. Because this list is nested inside of our top ten list, it uses letters of the alphabet to indicate their order instead of numbers. Now I’ll take suggestions from my viewers to fill in the blanks!

    [new message chime]

    Top 10 stylysh rocks for your pastry. Top 10 stylish hats for your beard. Top 10 stylish whales for your car. Those were awesome headlines! See how I nested all of the suggestions in another list. Because the order of these words doesn’t matter, I used an unordered list. This makes the list bulleted instead of numbered. Lets do another one! The World’s Top 10 adjective Images of plural noun Wearing Noun.

    [new message chime]

    The world’s top 10 tasty images of lunches wearing butter. The world’s top 10 sophisticated images of plants wearing spoons. The world’s top 10 puzzling images of jellyfish wearing gloves. You guys are so funny! Lets try this one. The possessive noun’s superlative adjective noun that pronoun didn’t know past tense verb.

    [new message chime]

    Oh! It’s a link.

    [intro music]

    >>NARRATOR: The Description list consist of a series of terms and their definitions. To make a description list, you must first start with the dl tag. This stands for description list. Nested inside of the dl tag are dt and dd tags. The dt tag stands for description term, and contains the word being defined. The dd tag stands for description definition, and is used to describe the word in the preceding dt tag.

    >>JOE: But what if my term has multiple definitions?

    >>NARRATOR: Don’t get down, Joe. All of the dd tags beneath a dt tag apply to that term, so a term can have any number of definitions.

    >>JOE: Golly!

    We made numbered and bulleted lists with the ol and ul tags today, and we learned how to nest lists inside of other list items.

    Next time we’ll discover the many uses of the most important HTML tag, the anchor tag, and we’ll surf the internet by making links to other pages and websites.

    [outro music]

Top Three Stylish Lists for Your HTML was produced by Dototot on . Dototot is a creative media company and think tank specializing in educational material.

Discuss this video in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid