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, its easy to understand why they are also popular online.
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 useor whether to use a list at allcomes 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 Lists
An 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,
- . Each item within an unordered list is individually marked up using the list item element,
- .
By default, most browsers add a vertical margin and left padding to the
- element and precede each
- element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.1
2
3
4
5
6
- Orange
- Green
- Blue
Ordered Lists
The ordered list element,
- , 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.
- Head north on N Halsted St
- Turn right on W Diversey Pkwy
- Turn left on N Orchard St
- Head north on N Halsted St
- Turn right on W Diversey Pkwy
- Turn left on N Orchard St
- Head north on N Halsted St
- Turn right on W Diversey Pkwy
- Turn left on N Orchard St
- 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.
1 2 3 4 5 6- Head north on N Halsted St
- Turn right on W Diversey Pkwy
- Turn left on N Orchard St
Description Lists
Another 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,
. Instead of using a - element to mark up list items, the description list requires two block-level elements: the description term element,, and the description element,.
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
element must come before theelement. 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
element will include vertical margins, just like the- and
- element. To repeat, the only element we can place as a direct child of the
- and
- element.
That said, once inside the
- element, the standard set of elements may be added, including any
- or
- Walk the dog
- Fold laundry
-
Go to the grocery and buy:
- Milk
- Bread
- Cheese
- Mow the lawn
- Make dinner
- elements. The
- element may contain any normal element as desired; however, the
- element has to be a direct child of either a
- or
- 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.
1 2 3 4 5 6- Orange
- Green
- Blue
List Style Type Values
As 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.
List Style Type ValueContentnoneNo list itemdiscA filled circlecircleA hollow circlesquareA filled squaredecimalDecimal numbersdecimal-leading-zeroDecimal numbers padded by initial zeroslower-romanLowercase roman numeralsupper-romanUppercase roman numeralslower-greekLowercase classical Greeklower-alpha / lower-latinLowercase ASCII lettersupper-alpha / upper-latinUppercase ASCII lettersarmenianTraditional Armenian numberinggeorgianTraditional Georgian numberingUsing an Image as a List Item Marker
There 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
- element within a list.
The process includes removing any default list-style-type property value and adding a background image and padding to the
- 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.
1 2 3 4 5 6- Orange
- Green
- Blue
List Style Position Property
By default the list item marker is to the left of the content within the
- 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
- element and doesnt 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
- element and allows other content to wrap below it as needed.1
2
3
4
5
- Cupcakes...
- Sprinkles...
Shorthand List Style Property
The 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.
1 2 3 4 5 6 7ul { list-style: circle inside; } ol { list-style: lower-roman; }Horizontally Displaying List
Occasionally 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
- elements inline or inline-block or by floating them.
Displaying List
The quickest way to display a list on a single line is to give the
- elements a display property value of inline or inline-block. Doing so places all the
- elements within a single line, with a single space between each list item.
If the spaces between each of the
- elements are troublesome, they may be removed using the same techniques we discussed in Lesson 5, Positioning Content.
More often than not, well 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
- 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.
1 2 3 4 5 6- Orange
- Green
- Blue
Floating List
Changing 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
- element is a better option than changing the display property.
Setting all
- elements float property to left will horizontally align all
- elements directly next to each other without any space between them. When we float each
- element, the list item marker is displayed by default and will actually sit on top of the
- element next to it. To prevent the list item marker from being displayed on top of other
- elements, a horizontal margin or padding should be added.1
2
3
4
5
6
- Orange
- Green
- Blue
As when floating any element, this breaks the flow of the page. We must remember to clear our floatsmost commonly with the clearfix techniqueand return the page back to its normal flow.
Navigational List Example
Well 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
- elements displayed as inline-block elements.1
2
3
4
5
6
7
8
9
- Profile
- Settings
- Notifications
- Logout
In Practice
Now that we know how to build lists within HTML and CSS, lets loop back to our Styles Conference website and see where we might be able to use lists.
Currently the navigation menus within the
and elements on our pages consist of a handful of anchor elements. These anchor elements could be better organized in an unordered list.Using an unordered list (via the
- element) and list items (via the
- element) will give structure to our navigation menus. These new elements, however, will display our navigation menus vertically.
Were going to want to change the display value of our
- elements to inline-block to get all of them to align in a horizontal row. When we do that, though, well also need to account for the blank space left between each
- element. Thinking back to Lesson 5, Positioning Content, we know that opening an HTML comment at the end of a
- element and closing an HTML comment at the beginning of a
- element will remove this space.
Keeping this in mind, the markup for the navigation menu within our
element will now look like this:1 2 3 4 5 6 7 8 9 10- Home
- Speakers
- Schedule
- Venue
- Register
Along these same lines, the markup for the navigation menu within our
element will now look like this:1 2 3 4 5 6 7 8 9 10- Home
- Speakers
- Schedule
- Venue
- Register
Lets not forget to make these changes in all of our HTML files.
With the unordered list in place, lets make sure the list items align horizontally, and lets clean up their styles a bit. Well use the existing nav class to help target our new styles.
Well begin by setting all of the
- elements within any element with the class attribute value of nav to be displayed inline-block, to include some horizontal margins, and to be vertically aligned to the top of the element.
Additionally, well use the :last-child pseudo-class selector to identify the last
- element and reset its right margin to 0. Doing so ensures that any horizontal space between the
- element and the edge of its parent element is removed.
Within our main.css file, below our existing navigation styles, lets add the following CSS:
1 2 3 4 5 6 7 8 9.nav li { display: inline-block; margin: 0 10px; vertical-align: top; } .nav li:last-child { margin-right: 0; }You may be wondering why our unordered list didnt include any list item markers or default styles. These styles were removed by the reset at the top of our style sheet. If we look at the reset, well see our
- ,
- elements all include a margin and padding of 0, and our
- and
Our navigation menus arent the only places well be using lists. Well also use them on some of our internal pages, including the Speakers page. Lets add some speakers to our conference.
Within our speakers.html file just below our lead section, lets create a new section where well present all of our speakers. Reusing some existing styles, well use a
element with a class attribute value of row to wrap all of our speakers and apply a white background and padding behind them. Inside the element, well add a element with a class attribute value of grid to center our speakers on the page and allow us to use multiple columns in doing so.So far our HTML below the lead section looks like this:
1 2 3 4 5 6Inside the grid every speaker will be marked up with his or her own
element, which will include two columns. The first column will span two-thirds of the element and will be marked up using a element. The second column will span the remaining one-third of theelement and will be marked up using an element, as its content is secondary to the speaker and his or her specific talk. Using our existing col-2-3 and col-1-3 classes, the outline for a speaker section will look like this:
1 2 3 4 5 6 7 8 9 10 11 12......There are a few items to notice here. First, each
element for each speaker includes an ID attribute with the speakers name as the attribute value. Later, when we create the schedule for our conference, these ID attributes will serve as anchors, allowing us to link from the schedule to a speakers profile. Additionally, the closing tag of the
element is followed by the opening of an HTML comment, and the opening tag of the element is preceded by the closing of an HTML comment. Because the column-based classes will display these elements as inline-block elements, we are removing the blank space that will appear between them.Inside the two-thirds column, marked up with the
element, well use a few headings and paragraphs to show the speakers name, the title and abstract of the talk, and a short biography.Including this content, a speaker section will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19Shay Howe
Less Is More: How Constraints Cultivate Growth
By setting constraints, we force ourselves...
About Shay
As a designer and front-end developer, Shay...
Within the one-third column, marked up with an
element, were going to add aelement with a class attribute value of speaker-info. Well use aelement because well be adding styles to this element soon.Before getting into any styles, though, lets add an unordered list within the
element that includes as list items some relevant links for the speaker.Now our HTML for a speaker will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26Shay Howe
Less Is More: How Constraints Cultivate Growth
By setting constraints, we force ourselves...
About Shay
As a designer and front-end developer, Shay...
- @shayhowe
- learn.shayhowe.com
With the
element with a class attribute value of speaker-info ready, we can add some styles to it.Well begin by adding a new section within our main.css file for the Speaker page styles. From there, lets add a 1-pixel solid gray border with a 5-pixel radius around any element that includes the class attribute value of speaker-info.
Next, lets add a top margin of 88 pixels to position the element on the same vertical line as the first paragraph of the talk description, and lets also add 22 pixels of vertical padding inside the element to provide room for the nested unordered list.
Lastly, lets center all of the text within the element.
In all, our CSS for the speaker-info class rule set looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14/* ======================================== Speakers ======================================== */ .speaker-info { border: 1px solid #dfe2e5; border-radius: 5px; margin-top: 88px; padding: 22px 0; text-align: center; }Lets take a minute to review why were using a
element here and the corresponding styles.Were placing a
element inside the element with the class attribute value of col-1-3 because well want the padding inherited from the col-1-3 class to be outside of the border on theelement. Before long well be including an image within theelement, alongside the unordered list; therefore we created aelement as opposed to applying these styles directly to the- element.
As we add more and more speakers to the page, well want to ensure that they remain an equal distance apart vertically. To do so, well create a speaker class rule set which includes a bottom margin of 44 pixels, like this:
1 2 3 4.speaker { margin-bottom: 44px; }We can then apply this class to the
element for each speaker, provided it isnt the last speaker. Well omit this class on the last speaker, as we dont want to create any unnecessary margins before our element. With more than one speaker, our layout will look like this:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ............Notice how the first speaker
element, for Chris Mills, includes the class attribute value of speaker, which vertically separates it from the speaker element for myself, Shay Howe. The last speaker element, again for myself, doesnt include a class attribute value of speaker in order to keep it a proper distance from the element.
- elements have a list-style value of none.
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 Code
Below 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)
Summary
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.
Lets recap. Within this lesson we covered the following:
- How to create unordered, ordered, and description lists
- How to properly nest lists inside of other lists
- How to change the list item marker style and position
- How to use a background image instead of a list item marker
- How to horizontally display or float lists
Now that we know how to add lists to our pages, lets add media to our pages, too. In the next chapter well dive into embeddable media such as images, audio, and video.
Resources & Links
- , and
- elements all include a margin and padding of 0, and our
- element) will give structure to our navigation menus. These new elements, however, will display our navigation menus vertically.
- element.
Its 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 well take a look at next.
List Item Styling
Unordered 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 Property
The 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
- ,
- , or
- elements within CSS.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15Because nesting lists can be a little trickyand unwanted styles will appear if its done incorrectlylets quickly review. The
- and
- elements may contain only
- elements is the
- element.
- elements. Additionally, the element includes a left margin by default.1
2
3
4
5
6
7
8
9
10
11
study
The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books
design
A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made
Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
business
work
A person's regular occupation, profession, or trade
Nesting Lists
One 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 doesnt 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
- and
- elements is the
- element. To repeat, the only element we can place as a direct child of the
Because the order matters, instead of using a dot as the default list item marker, an ordered list uses numbers.
1 2 3 4 5 6Ordered lists also have unique attributes available to them including start and reversed.
Start Attribute
The 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
- 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.
1 2 3 4 5 6Reversed Attribute
The reversed attribute, when used on the
- 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 doesnt 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
- element.1
2
3
4
5
6
Value Attribute
The value attribute may be used on an individual
- element with a solid dot. This solid dot is called the list item marker, and it can be changed using CSS.1
2
3
4
5
6