HTML: Lists and Attributes

Name: HTML: Lists and Attributes
Author: Jeremy Kurtz

Start with the basics of lists and attributes

Preview the first lesson free — get full access to all 3 lessons.

Course: On-Demand

Welcome to our lesson on lists. Lists are exactly what they sound like and they come in two types, ordered and unordered. An ordered list is a bulleted list where the bullets are represented by numbers. An unordered list is also a bulleted list, however the bullets are represented by bullet points. The advantages of both are that you are able to set apart content from paragraphs in a well formatted way. So to get started on this, let's take our page from the last lesson or the page called para and we're going to do a save as and we're going to call the file lists. So we go to file, save as and change the name to lists. Since we're going to list the necessary steps for putting a lawn mower together, we should probably change our heading for our instructions. So why don't we just call it, I don't know, building a lawn mower. Now we're going to remove the paragraph tags and the content that exists between them. Since we are writing a set of instructions, we will make an ordered list. The tags for an ordered list are O L. Now I'm going to put some space between them. So we're going to make our set of instructions three steps long. Now we have to add the items in our list or it'll be easier to remember if we just call in list items because the tags for the items are L I for list item. And you're going to notice that I'm doing something a little different here. And I'm going to copy and paste that two more times. So far in this course, we have used capital letters for all of our tags. Although tags are not case sensitive, I've developed a habit of using all capital letters for tags such as HTML, head, title, body, but lowercase letters for tag subsets like list items. It's very useful for me to manage the various tags that's on a given web page. So this is a habit. If it's easier for you to remember, you can make them all caps or you can make them all lowercase. This is just a preference for myself. In between the list item, tag sets, we have to write our set of instructions. So step one is going to be buy a mower. Step number two is going to be put the mower together. And step number three is going to be mow the yard. Now let's save and refresh our page to see what it looks like. Notice how each item in our list starts with a number. That is determined by the OL tags. So if we would add say a fourth item, so we can copy those and our fourth item is going to be eat a snack and I save and refresh, it'll actually just add the number four and eat a snack to our page. This is how you make an ordered list. Now let's look at an unordered list. So the first thing we're going to do is we're going to add a horizontal rule underneath our closing OL tag. And remember, these are single tags, so they only have one. And below that, let's use an H2 header. And we're going to call this our grocery list. To create an unordered list is exactly the same as creating an ordered list, except the surrounding tag set is actually UL for unordered list, as opposed to OL for ordered list. So we're going to add UL. And I'll also give that three separations between them so we can add three list items. The items for an unordered list use the exact same tag set as the items for an ordered list. So it's just going to be the LI for list item tag set. We'll copy and paste that two more times. And we have to put our content for our grocery store list. So let's say we have to get some milk, eggs, and butter. Now we can save and refresh, and notice our grocery items have bullet points preceding them. In our next lesson, we will be emphasizing text and nesting tags. So see you then.

Beginner Provider : Jeremy Kurtz 3 Lessons · 14m in English

Course Description

In this course, you will dive into the basics of lists and attributes in HTML. Applying lists and attributes will help you organize data and format your webpage. You will also learn how to implement nesting tag sets and emphasize text.

Learning Objectives

Skills

What You'll Learn

Identify the two types of lists in HTML
Create ordered and unordered lists to organize webpage data
Work with nesting tag sets to emphasize text
Apply commonly used HTML attributes
Format HTML documents with bold, italics, and underline

Key Takeaways

Lists and attributes help you organize data and format your webpage in HTML.
HTML supports two types of lists: ordered and unordered.
Nesting tag sets can be used to emphasize text in HTML.
Familiarity with commonly used attributes is part of working effectively with HTML.
HTML documents can be formatted using bold, italics, and underline.

Frequently Asked Questions

What will I learn in this course?

You will learn the basics of lists and attributes in HTML, including how to identify two types of lists, work with nesting tags to emphasize text, and gain familiarity with commonly used attributes.

What topics does this course cover?

The course covers three lessons: Lists; Nesting Tags and the Emphasis of Text; and Attributes.

What skills will I gain from this course?

You will gain skills in formatting HTML documents with bold, italics, and underline, and using ordered and unordered lists in HTML.

How do lists and attributes help in building a webpage?

Applying lists and attributes helps you organize data and format your webpage.