3 types of html lists

All HTML Tutorials

Before we begin, you may be wondering why navigation is included in an article about lists. As I said above, lists are used to build navigation menus — but why? The reason is because it is the globally accepted way to create navigation. This is means that it will help screen readers, web scanners and Google identify it as the navigation for your site. This is part of a thing called Search Engine Optimization (SEO), which I will go into in a later article.

In this article, I will start with what lists are and how to make them, then go into how they can be used to create navigation. Let’s get going!

Types of lists

There are three types of lists in HTML:

(see what I did there? I used a list 😜) Let’s go into what each one is for and how to code them…

Ordered lists

Ordered lists are lists with numbers, and look like so:

Here is the syntax for an ordered list:

ol> li>Itemli> li>Another itemli> li>A third itemli> ol> 

tag stands for ordered list, and is the actual list element. Each item in the list is made using a
element, which stands for list item.

Unordered lists

Unordered lists are very similar to ordered lists, except that they have bullet points instead of numbers:

The syntax for an unordered list is very similar to the syntax for an ordered list:

ul> li>Itemli> li>Another itemli> li>A third itemli> ul> 

is replaced with
(unordered list).

Definition lists

Definition lists are probably the least common list used in HTML, and also the most complicated. Definition lists are used sort of like you would find in a dictionary, with terms and definitions of those terms. Here is an example:

Ordered lists Lists with numbers Unordered lists Lists with bullet points Definition lists Lists used to define things

The syntax for definition lists is a bit more complicated, so I will explain first. First of all, a definition list is made using the tag, similar to ordered and unordered lists:

But what goes inside? Basically, a definition list is made up of term/definition pairs. The term and the definition each have their own element. The element for the definition term is , and the element for the definition description (definition of the term) is . Here is a simple term/definition pair in a list:

dl> dt>Termdt> dd>Definitiondd> dl> 

Using the information I’ve given you, try and work out what the code for the example list from above would be:

dl> dt>Ordered listsdt> dd>Lists with numbersdd> dt>Unordered listsdt> dd>Lists with bullet pointsdd> dt>Definition listsdt> dd>Lists used to define thingsdd> dl> 

There we go! Now you know all three types of lists in HTML!

What is navigation?

Navigation is the set of links that you click on to get to other parts of a site. For example, here is the navigation on my site:

And here is an example from another site:

Navigation

As I said earlier, navigation should be created with lists, for the purpose of Search Engine Optimization and general accessibility. Because the whole point of creating navigation with lists is for a global standard, there is a specific syntax that should be used to create them:

nav> ul> li>a href="/">Homea>li> li>a href="/about">Abouta>li> li>a href="/contact">Contacta>li> ul> nav> 

Basically, a navigation item should be created with the following structure:

Note that the ordered list is put in a element. This is the semantic tag for navigation on a page.

Try and create your own navigation with the following two items:

See if you got it right below:

nav> ul> li>a href="https://codetheweb.blog/">Homea>li> li>a href="https://codetheweb.blog/newsletter">Newslettera>li> ul> nav> 

Note that the default styling for the navigation code above looks really bad — in a later article, I will show you how to make a navigation bar that actually looks good, all while keeping the exact same HTML.

Conclusion

Woo! Now you know all three types of lists in HTML, as well as all about how to create navigation on a page.

If you enjoyed this article, don’t forget to share it so that more people will get to read it. As always, if you have any questions, feedback or just want to say hi then do so in the comments below. And if you want to stay up to date and have more awesome articles delivered to your inbox (once a week-ish), then don’t forget to subscribe to the newsletter.

Have fun, and I’ll see you all next week where I’ll be writing my first CSS tutorial.

P.S. — today is exactly one month since I wrote my first ever blog post!

Your FREE guide to learning HTML! 🎁

Источник

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

Unordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with bullets (small black circles) by default:

Example

Ordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with numbers by default:

Example

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The tag defines the description list, the tag defines the term (name), and the tag describes each term:

Example

HTML List Tags

Tag	Description
	Defines an unordered list
	Defines an ordered list
	Defines a list item
	Defines a description list
	Defines a term in a description list
	Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Lists

In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.

HTML Unordered Lists

Each element of an unordered list is declared inside the tag.

html> html> head> title>Title of the document title> head> body> h1>An unordered list: h1> ul> li>This is a list item li> li>This is another list item li> li>This is one more list item li> ul> body> html>

The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.

The type attribute is used to change the default bullet style for the list items.

html> html> head> title>Title of the document title> head> body> ul type="circle"> li>List item li> li>List item li> li>List item li> ul> ul type="square"> li>List item li> li>List item li> li>List item li> ul> body> html>

Result

You can also use the CSS list-style-type or list-style-image property to specify the type of a list item element.

html> html> head> title>Title of the document title> head> body> h2>Examples of unordered lists: h2> ul style="list-style-type: square;"> li>Cold Drinks li> li>Hot Drinks li> li>Ice-Creams li> ul> ul style="list-style-type: disc;"> li>Coca-Cola li> li>Fanta li> li>Ice Tea li> ul> ul style="list-style-type: circle;"> li>Coca-Cola li> li>Fanta li> li>Ice Tea li> ul> body> html>

HTML Ordered Lists

html> html> head> title>Title of the document title> head> body> h1>An ordered list: h1> ol> li>This is List item number 1 li> li>This is List item number 2 li> li>This is List item number 3 li> ol> body> html>

html> html> head> title>Title of the document title> head> body> h3>A numbered list: h3> ol> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>An alphabetized list: h3> ol type="A"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>An alphabetized list (lowercase letters): h3> ol type="a"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>A numbered list (Roman numerals): h3> ol type="I"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> h3>A numbered list (lowercase Roman numerals): h3> ol type="i"> li>Peach li> li>Apricot li> li>Banana li> li>Strawberry li> ol> body> html>

HTML Description Lists

HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.

To create a description list, we use the tag. This tag comes in pairs.

Example of the HTML tag for creating a description list:

html> html> head> title>Title of the document title> head> body> h1>Description Lists: h1> dl> dt>Tea dt> dd>- hot drink dd> dt>Juice dt> dd>- cold drink dd> dl> body> html>

Result

HTML Nested Lists:

A nested list contains a list inside a list.

Example of an HTML nested list:

html> html> head> title>Title of the document title> head> body> h2>A nested HTML list h2> p>A nested list contains a list inside a list. p> ul> li>Copybooks li> li> Books ul> li>Detective books li> li>Roman books li> li>Fairy tale books li> ul> li> ul> body> html>

List Counting Control

By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.

Example of an HTML list for counting from a specified number:

html> html> head> title>Title of the document title> head> body> h2>List counting control h2> p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number. p> ol start="40"> li>Pen li> li>Pencil li> li>Copybook li> ol> ol type="I" start="40"> li>Pen li> li>Pencil li> li>Copybook li> ol> body> html>

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.

Example of a horizontal list with CSS:

html> html> head> title>Title of the document title> style> ul < list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; > li < float: left; > li a < display: block; color: white; text-align: center; padding: 16px; text-decoration: none; > li a:hover < background-color: #981816; > style> head> body> h2>Navigation Menu Example h2> p> You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally. p> ul> li> a href="#home">Home a> li> li> a href="https://www.w3docs.com/tool/">Tools a> li> li> a href="https://www.w3docs.com/snippets">Snippets a> li> li> a href="https://www.w3docs.com/quiz/">Quizzes a> li> li> a href="https://www.w3docs.com/string-functions/">String Functions a> li> ul> body> html>

Источник