Interactive Lists Tutorial

Ordered Lists

Inspect the HTML of the list below. The entire list is contained in an <ol> element. Each numbered item is contained in an <li> element.

Top Grossing Movies of 2015

Star Wars Ep. VII: The Force Awakens
Jurrasic World
The Avengers: Age of Ultron
Inside Out
Furious 7

Inspect the HTML of the list below. It continues the list above, so it has a start attribute to specify that it needs to begin at #6. It also shows that you can nest other tags inside <li> tags.

More Top Grossing Movies of 2015 (with release dates)

American Sniper (12/25/2014)
Minions (7/10/2015)
he Hunger Games: Mockingjay - Part 2 (11/20/2015)
The Martian (10/2/2015)
Cinderella (3/13/2015)

Use the dropdown below to change the CSS applied to the lists above. The list-style-type property affects the type of numbering used for ordered lists. These are just a few examples of the possible values. More can be explored here.


                    .sample.interactive ol{
                    
                        list-style-type: 
                        ;
                    
                    }

Unordered Lists

Inspect the HTML of the list below. The entire list is contained in an <ul> element. Each bulleted item is contained in an <li> element.

HTML Elements Related to Making Basic Lists

Use the dropdown below to change the CSS applied to the list above. The list-style-type property affects the type of bullets used for unordered lists.


                    .sample.interactive ul{
                    
                        list-style-type: 
                        ;
                    
                    }

The list below uses special styling from a third-party package called Font Awesome to display specific icons instead of all the same standard icons. Installing the Font Awesome library was as simple as downloading the files and including a <link> to the Font Awesome stylesheet in the <head> element. Using the icons was as simple as adding the class names that you see when you inspect the HTML below.

Synonyms for Yes or No

yes
no
correct
check mark
right
good
incorrect
x mark
wrong
bad

Nested Lists

Sometimes you need to outline a complex topic. For example, the navigation for an entire web site may include many levels of pages. That is a good time to use nested lists, like the example below. Inspect the HTML and pay special attention to <ul> elements nested inside <li> elements to create submenus.

The list structure gives us plenty of elements to create a drop-down navigation menu. If you , it will add class="navigation" to the <nav> tag, which surrounds the outer <ul> tag, and you can inspect all the new styles that transform it into a dropdown menu (or maybe you prefer to look directly at the CSS file). You can to remove the class and see the default styles again.

Coding Activities

Using the examples above as a guide, create your own web page with some lists. Here are ideas and guidelines for your lists.

Create a list of your classes for the day. Consider: Should it be ordered or unordered? If ordered, what kind of numbering? If unordered, what kind of bullets?
Create an unordered list of favorite things, which might include a favorite book, food, class subject, animal, musical artist, and more. Carefully consider the formatting of each list item -- try to include the type of thing with the favorite thing itself, for example "Book Series: Harry Potter"
Use Font Awesome to enhance your list of favorite things, choosing icons that represent each type of favorite thing. For example, book and music icons could be used on the list items for your favorite book and favorite musical artist.
Imagine you have been asked to write an essay about one of the things in your favorites list. Create a nested list that outlines the topics for your paper. Include at least 3 main topics and 5 sub-topics.