Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online. Show
When we want to use a list on a website, HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content. In addition to the three different types of lists available within HTML, there are multiple ways to style these lists with CSS. For example, we can choose what type of marker to use on a list. The marker could be square, round, numeric, alphabetical, or perhaps nonexistent. Also, we can decide if a list should be displayed vertically or horizontally. All of these choices play significant roles in the styling of our web pages. Unordered ListsAn unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element, <ul>. Each item within an unordered list is individually marked up using the list item element, <li>. By default, most browsers add a vertical margin and left padding to the <ul> element and precede each <li> element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.
See the Pen Unordered Lists by Shay Howe (@shayhowe) on CodePen. Ordered ListsThe ordered list element, <ol>, works very much like the unordered list element; individual list items are created in the same manner. The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important. Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.
Ordered lists also have unique attributes available to them including start and reversed.
See the Pen Ordered Lists by Shay Howe (@shayhowe) on CodePen. Start AttributeThe start attribute defines the number from which an ordered list should start. By default, ordered lists start at 1. However, there may be cases where a list should start at 30 or another number. When we use the start attribute on the <ol> element, we can identify exactly which number an ordered list should begin counting from. The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.
See the Pen Start Attribute by Shay Howe (@shayhowe) on CodePen. Reversed AttributeThe reversed attribute, when used on the <ol> element, allows a list to appear in reverse order. An ordered list of five items numbered 1 to 5 may be reversed and ordered from 5 to 1. The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. It is either true or false. False is the default value; the value becomes true when the attribute name reversed appears on the <ol> element.
See the Pen Reversed Attribute by Shay Howe (@shayhowe) on CodePen. Value AttributeThe value attribute may be used on an individual <li> element within an ordered list to change its value within the list. The number of any list item appearing below a list item with a value attribute will be recalculated accordingly. As an example, if the second list item has a value attribute value of 9, the number on that list item marker will appear as if it is the ninth item. All subsequent list items will be numbered upwards from 9.
See the Pen Value Attribute by Shay Howe (@shayhowe) on CodePen. Description ListsAnother type of list seen online (but not as often as unordered or ordered lists) is the description list. Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example. Creating a description list in HTML is accomplished using the description list block-level element, <dl>. Instead of using a <li> element to mark up list items, the description list requires two block-level elements: the description term element, <dt>, and the description element, <dd>. A description list may contain numerous terms and descriptions, one after the other. Additionally, a description list may have multiple terms per description, as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple descriptions. Conversely, a single description may be suitable for multiple terms. When adding a description list, the <dt> element must come before the <dd> element. The definition term and the description that directly follows it correspond to one another; thus, the order of these elements is important. By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements. Additionally, the <dd> element includes a left margin by default.
See the Pen Description Lists by Shay Howe (@shayhowe) on CodePen. Nesting ListsOne feature that makes lists extremely powerful is their ability to be nested. Every list may be placed within another list; they can be nested continually. But the potential to nest lists indefinitely doesn’t provide free rein to do so. Lists should still be reserved specifically for where they hold the most semantic value. One trick with nesting lists is to know where to begin and end each list and list item. Speaking specifically about unordered and ordered lists, as that is where most nesting will occur, the only element that may reside directly within the <ul> and <ol> elements is the <li> element. To repeat, the only element we can place as a direct child of the <ul> and <ol> elements is the <li> element. That said, once inside the <li> element, the standard set of elements may be added, including any <ul> or <ol> elements. To nest a list rather than closing a list item, begin a new list. Once the nested list is complete and closed, close the wrapping list item and continue on with the original list.
See the Pen Nesting Lists by Shay Howe (@shayhowe) on CodePen. Because nesting lists can be a little tricky—and unwanted styles will appear if it’s done incorrectly—let’s quickly review. The <ul> and <ol> elements may contain only <li> elements. The <li> element may contain any normal element as desired; however, the <li> element has to be a direct child of either a <ul> or <ol> element. It’s also worth noting that as lists are nested inside of other lists, their list item markers will change according to how deeply the list is nested. In the previous example, the unordered list nested within the ordered list uses hollow circles instead of solid discs as the list item marker. This change happens because the unordered list is nested one level into the ordered list. Fortunately we have control over how these list item markers appear at any level, which we’ll take a look at next. List Item StylingUnordered and ordered lists use list item markers by default. For unordered lists these are typically solid dots, while ordered lists typically use numbers. With CSS the style and position of these list item markers may be adjusted. List Style Type PropertyThe list-style-type property is used to set the content of a list item marker. The available values range from squares and decimal numbers all the way to Armenian numbering, and the style may be placed on either the <ul>, <ol>, or <li> elements within CSS. Any list-style-type property value can be added to either unordered or ordered lists. With this in mind, it is possible to use a numeric list item marker on an unordered list and a nonnumeric marker on an ordered list. HTML
CSS
See the Pen List Style Type Property by Shay Howe (@shayhowe) on CodePen. List Style Type ValuesAs previously mentioned, the list-style-type property comes with a handful of different values. The following list outlines these values as well as their corresponding content.
Using an Image as a List Item MarkerThere may come a time when the default list-style-type property values are not enough, and we want to customize our own list item marker. Doing so is most commonly accomplished by placing a background image on each <li> element within a list. The process includes removing any default list-style-type property value and adding a background image and padding to the <li> element. In detail, the list-style-type property value of none will remove existing list item markers. The background property will identify a background image, along with its position and repeat value, if necessary. And the padding property will provide space to the left of the text for the background image. HTML
CSS
See the Pen Image List Item Marker by Shay Howe (@shayhowe) on CodePen. List Style Position PropertyBy default the list item marker is to the left of the content within the <li> element. This list style positioning is described as outside, meaning all of the content will appear directly to the right, outside of the list item marker. Using the list-style-position property, we can change the default value of outside to inside or inherit. The outside property value places the list item marker to the left of the <li> element and doesn’t allow any content to wrap below the list item marker. The inside property value (which is rarely seen or used) places the list item marker in line with the first line of the <li> element and allows other content to wrap below it as needed. HTML
CSS
Shorthand List Style PropertyThe list style properties discussed thus far, list-style-type and list-style-position, can be combined into one shorthand list-style property value. When using the list-style property, we can use one or all list style property values at a time. The order of these shorthand values should be list-style-type followed by list-style-position.
Horizontally Displaying ListOccasionally we may want to display lists horizontally rather than vertically. Perhaps we want to divide a list into multiple columns, to build a navigational list, or to put a few list items in a single row. Depending on the content and desired appearance, there are a few different ways to display lists as a single line, such as by making the display property value of <li> elements inline or inline-block or by floating them. Displaying ListThe quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block. Doing so places all the <li> elements within a single line, with a single space between each list item. If the spaces between each of the <li> elements are troublesome, they may be removed using the same techniques we discussed in Lesson 5, “Positioning Content.” More often than not, we’ll use the inline-block property value rather than the inline property value. The inline-block property value allows us to easily add vertical margins and other spacing to the <li> elements, whereas the inline property value does not. When changing the display property value to inline or inline-block, the list item marker, be it a bullet, number, or other style, is removed. HTML
CSS
Floating ListChanging the display property value to inline or inline-block is quick; however, it removes the list item marker. If the list item marker is needed, floating each <li> element is a better option than changing the display property. Setting all <li> elements’ float property to left will horizontally align all <li> elements directly next to each other without any space between them. When we float each <li> element, the list item marker is displayed by default and will actually sit on top of the <li> element next to it. To prevent the list item marker from being displayed on top of other <li> elements, a horizontal margin or padding should be added. HTML
CSS
See the Pen Floating List by Shay Howe (@shayhowe) on CodePen. As when floating any element, this breaks the flow of the page. We must remember to clear our floats—most commonly with the clearfix technique—and return the page back to its normal flow. Navigational List ExampleWe’ll often develop, and find, navigation menus using unordered lists. These lists are commonly laid out as horizontal lists, using either of the two techniques previously mentioned. Here is an example of a horizontal navigation menu marked up using an unordered list with <li> elements displayed as inline-block elements. HTML
CSS
See the Pen Navigational List by Shay Howe (@shayhowe) on CodePen. In PracticeNow that we know how to build lists within HTML and CSS, let’s loop back to our Styles Conference website and see where we might be able to use lists.
Our navigation menus are now complete, and the Speakers page is taking shape. Fig 8Our Speakers page after updating our navigation menus and adding speakers Demo & Source CodeBelow you may view the Styles Conference website in its current state, as well as download the source code for the website in its current state. View the Styles Conference Website or Download the Source Code (Zip file) Lists are used quite commonly in HTML, often in places that might not be obvious or apparent. The key is to use them as semantically as possible and to leverage them where they best fit. Let’s recap. Within this lesson we covered the following:
Now that we know how to add lists to our pages, let’s add media to our pages, too. In the next chapter we’ll dive into embeddable media such as images, audio, and video. |