list assignment in html

HTML Lists – Ordered, Unordered and Definition List Examples

Imagine you're creating an article with a list of recommendations or a web page with a menu of options. How do you structure this information to make it visually appealing and easy to navigate?

This is where HTML lists come to the rescue. In this article, we'll dive into the world of HTML lists and explore how they can help you organize and present your content effectively.

The Basics of HTML Lists

HTML lists come in three main categories: unordered lists , ordered lists , and definition lists . Each type serves a specific purpose and can be customized to fit your design and content needs.

How to create unordered lists

Unordered lists are perfect for presenting items that do not have a particular sequence or order. They are typically displayed with bullet points, which make them visually distinct from ordered lists. An example might be a grocery shopping list.

To create an unordered list, you can use the <ul> (unordered list) element and nest individual list items within <li> (list item) elements:

This code will generate a simple unordered list like this:

You can further customize the appearance of bullet points using CSS to match your website's style.

How to create ordered lists

Ordered lists, as the name suggests, are useful when you want to present items in a specific sequence or order. They are displayed with numbers or letters by default, but you can customize the numbering style using CSS. An example might be a ranked list of your favorite movies.

To create an ordered list, use the <ol> (ordered list) element and nest list items within <li> elements:

This code will produce an ordered list like this:

• Second item

Ordered lists are useful for creating step-by-step instructions, ranking items, or any situation where a specific order matters.

How to create definition lists

Definition lists are designed to present terms and their corresponding definitions. They consist of a list of terms enclosed in <dt> (definition term) elements and their associated definitions enclosed in <dd> (definition description) elements. Here's an example:

This code will create a definition list like this:

HTML HyperText Markup Language, used for structuring content on the web.

CSS Cascading Style Sheets, used for styling web documents.

JavaScript A programming language used for adding interactivity to web pages.

Definition lists are particularly handy for glossaries and dictionaries, where you need to pair terms with their meanings.

How to Customize Lists with CSS

HTML provides the basic structure for lists, but to make them visually appealing and fit your website's design, you can apply CSS styles. Here are some common CSS properties you can use to customize lists:

Changing the Bullet or Number Style

To change the style of bullets in unordered lists or the numbering style in ordered lists, you can use the list-style-type property. For example, to use square bullets in an unordered list, you can add the following CSS rule:

With this CSS applied, the unordered list will look like this:

Adding Margins and Padding

You can control the spacing around list items by adjusting the margin and padding properties. For instance, you can add space between list items like this:

With this CSS rule, the list items will have extra space between them, making the list more readable.

Styling List Items

You can style individual list items differently by targeting them directly using CSS. For instance, you can change the color of list items when users hover over them:

With this CSS, the list items will change their color to blue when a user hovers over them, providing visual feedback.

Creating Custom Icons

If you want to use custom icons instead of the default bullets for unordered lists, you can achieve this with CSS by using the ::before pseudo-element. This allows you to add custom content before each list item. Here's an example of how you can use a custom checkmark icon:

With this CSS applied, the unordered list will have custom checkmark icons before each item, like this:

✔ Item 1 ✔ Item 2 ✔ Item 3

How to Make Lists More Accessible

It's essential to consider accessibility when designing lists. Proper HTML semantics and CSS can make lists more accessible to screen readers and other assistive technologies.

Semantic Elements:

You'll want to make sure that you use semantic elements correctly to provide context to users who rely on screen readers. For example:

In this ordered list, <strong> elements are used within list items to emphasize important steps. This not only makes the list more visually appealing but also enhances the understanding of the content for screen readers.

ARIA Roles and Labels:

For more complex lists or when additional accessibility information is needed, you can use ARIA (Accessible Rich Internet Applications) attributes. For example:

In this unordered list, the role attribute is set to "list" to indicate that it's a list, and the aria-label attribute provides a label for the list. These attributes assist screen readers in properly interpreting and conveying the list's purpose and content.

Incorporating HTML lists into your web content is a powerful way to organize information, create engaging interfaces, and enhance user experiences.

By understanding the different types of lists – unordered, ordered, and definition lists – and knowing how to style them with CSS, you have the tools to make your content more visually appealing and user-friendly.

Incorporate lists into your HTML documents wisely, considering both design and accessibility. Use CSS to fine-tune their appearance to align with your website's style, and ensure that everyone, regardless of their abilities, can navigate your content effortlessly.

Remember, lists are more than just bullet points or numbers. They are a cornerstone of effective web design and communication.

Get Hands-On

Now that you've learned about HTML lists, why not try creating your own lists in an HTML document? Experiment with different styles and see how CSS can transform the look of your lists. Practice is key to mastering this essential web development skill.

frontend developer || technical writer

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• Password Generator
• HTML Editor
• HTML Encoder
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face
• Color Picker
• Colors CMYK
• Color mixer
• Color Converter
• Color Contrast Analyzer
• Color Gradient
• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

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

We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing </ul> tags.

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

Example of the HTML <ul> tag for creating an unordered list:

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.

Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:

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

Example of the HTML <ul> tag used with the CSS list-style-type property for creating an unordered list:

Html ordered lists.

HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing </ol> tags.

Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.

Example of the HTML <ol> tag for creating an ordered list:

The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to the <ol> tag.

Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:

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 <dl> tag. This tag comes in pairs.

In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.

Example of the HTML <dl> tag for creating a description list:

HTML Nested Lists:

A nested list contains a list inside a list.

Example of an HTML nested list:

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:

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:

Practice your knowledge, quiz time: test your skills.

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

• HTML Basics
• Javascript Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Vue.js Basics
• Python Basics
• Java Basics
• NodeJS Basics

Linux Tutorial

Bash Scripting Tutorial

HTML Tutorial

CSS Tutorial

Website Development Challenges

Binary Tutorial

Regular Expressions Tutorial

Boolean Algebra Tutorial

Solve the Cube

PyGame Tutorial

Problem Solving Skills

Basic Graphic Design

Programming Challenges

Software Design and Development

micro:bit tutorial

HTML Tutorial - 9. Lists

• Introduction
• 1. Background Information
• 2. The Basics
• 3. Basic Template
• 4. Headings and Paragraphs
• 5. Simple Formatting
• 6. More Formatting
• 11. Final Thoughts

Everything in Order.

Some content is naturally suited to being presented in a list. Most people like lists too as they are easy to quickly scan and take in the content. In this section we'll learn how to create lists in HTML.

There's a fair bit of reading in this section but you can generally get away with what you'll learn in just the first few bits. You should skim the rest of it though to get an idea of what's possible.

• Displaying a List

There are two types of lists in HTML. Ordered lists ( ol ), where each list item ( li ) is preceded by a number. Unordered lists ( ul ), where each item is preceded by a bullet. The syntax for both is quite similar

An ordered list:

<ol> <li>List item</li> </ol>

An unordered list:

<ul> <li>List item</li> </ul>

As you can see, the only real difference is the main opening and closing tags. Let's see them in practice:

simple_lists.html

• <body>
• <p>Did you know that Chuck Norris:</p>
• <li>can cut through a hot knife with butter?</li>
• <li>once counted to infinity, <b>twice</b>?</li>
• <li>slams revolving doors?</li>
• </ol>
• <p>Things I would like to do someday:</p>
• <li>visit the moon</li>
• <li>run a marathon, backwards</li>
• <li>concoct the ultimate dessert</li>
• </ul>
• </body>

Did you know that Chuck Norris:

• can cut through a hot knife with butter?
• once counted to infinity, twice ?
• slams revolving doors?

Things I would like to do someday:

• visit the moon
• run a marathon, backwards
• concoct the ultimate dessert

Indenting of code starts getting important now. In the HTML code above you can see we have indented the li items one step as opposed to the ol and ul tags. This makes it easier to see the structure.

• Changing the List Type

If we were limited to just decimal numbers and round bullets that would be kinda boring. Fortunately we can change things up a little. We do this using the attribute type .

<ol type="a" >

Here are the possible values for Ordered lists ( ol ):

Here are the possible values for Unordered lists ( ul ):

And here is an example:

fancy_lists.html

• <p>Did you know that:</p>
• <ol type="A" >
• <li>79% of statistics are made up on the spot.</li>
• <li>There is a 1% probability that the above statement is true.</li>
• <li>There is a 99% probability that one of the above two statements is false.</li>

Did you know that:

• 79% of statistics are made up on the spot.
• There is a 1% probability that the above statement is true.
• There is a 99% probability that one of the above two statements is false.
• Playing with the Order

It's also possible to change the starting number for our ordered lists. This can be useful if your lists are broken up into separate sections. To achieve this we use the start attribute.

• <ol start="4" >

list_starting_point.html

• <p>Let's start at the beginning:</p>
• <li>ichi</li>
• <li>ni</li>
• <li>san</li>
• <p>And now for something completely different:</p>
• <li>los</li>
• <li>vagh</li>
• <li>jav</li>

Let's start at the beginning:

And now for something completely different:

Reversing the Order

Maybe we wish to count down rather than up. We can achieve this with the reversed attribute. This is an attribute which doesn't have a value to go with it.

<ol reversed >

reversed_list.html

• <p>Ignition Sequence begin:</p>
• <ol reversed>
• <li>Release fuel pumps</li>
• <li>Induce indium phase change</li>
• <li>Blast off!!</li>

Ignition Sequence begin:

• Release fuel pumps
• Induce indium phase change
• Blast off!!

Interrupting the Order

It's possible to alter the numbering mid list if required. You do this by adding the value attribute to the required list item.

<li value="9" > </li>

interrupted_list.html

• <p>How to count to 100 quickly:</p>
• <li>One</li>
• <li>Two</li>
• <li>Miss a few</li>
• <li value="99" >Ninety Nine</li>
• <li>One Hundred</li>

How to count to 100 quickly:

• Ninety Nine
• One Hundred

As you can see, once you alter the list with a value it will continue from the new value. You may have as many list items with value attributes as you like in your list.

• Nesting Lists

It is possible to have nested lists. This is when you include another list within a list item. They don't have to be the same type so you could, for instance, have an unordered list within an ordered list.

There are many places where this is useful. Creating a table of contents is a common situation.

nested_lists.html

• <p>HTML Tutorial:</p>
• <li value="7" >Links</li>
• <li>Images</li>
• <li>Lists
• <ol type="i" >
• <li>Introduction</li>
• <li>Displaying a List</li>
• <li>And others...</li>
• </li>
• <li>Tables</li>

HTML Tutorial:

• And others...
• Definition Lists

A definition list is used to create a list of pairs of values. It was originally intended to list words and their definitions but may be used for any list of pairs of values.

<dl> <dt>Term>/dt> <dd>Definition</dd> </dl>

definition_list.html

• <p>Some definitions:</p>
• <dt>Internet</dt>
• <dd>The reason you are failing your classes.</dd>
• <dt>Tomorrow</dt>
• <dd>A mystical place where 99% of human productivity and motivation is stored.</dd>
• <dt>Octopus</dt>
• <dd>A cat with eight legs.</dd>
• </dl>

Some definitions:

Now let's add some graphical flair to our content.

• Add a list to your content. Change the opening and closing tags from ol to ul and observe the difference.
• Add a type attribute to the list. What happens if you add an ordered list type to an unordered list or vice versa?
• Create a nested list. Leave the code unindented. How easy it is to see the structure. Now indent the code and observe how it is much easier to understand.

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.

• Section Breakdown
• Next Section

Education is the kindling of a flame, not the filling of a vessel. - Socrates

Contact | Disclaimer

Regular Expressions

Problem Solving

Basic Design Tutorial

micro:bit Tutorial

Spreadsheets Tips and Hints

• Introduction to lists
• Unordered lists ( UL ), ordered lists ( OL ), and list items ( LI )
• Visual rendering of lists
• The DIR and MENU elements

10.1 Introduction to lists

• Unordered information.
• Ordered information.
• Definitions.

The previous list, for example, is an unordered list, created with the UL element:

An ordered list, created using the OL element, should contain information where order should be emphasized, as in a recipe:

• Mix dry ingredients thoroughly.
• Pour in wet ingredients.
• Mix for 10 minutes.
• Bake for one hour at 300 degrees.

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Thus, when advertising a product, one might use a definition list:

defined in HTML as:

Lists may also be nested and different list types may be used together, as in the following example, which is a definition list that contains an unordered list (the ingredients) and an ordered list (the procedure):

• 100 g. flour
• 10 g. sugar
• 1 cup water
• salt, pepper

The exact presentation of the three list types depends on the user agent. We discourage authors from using lists purely as a means of indenting text. This is a stylistic issue and is properly handled by style sheets.

10.2 Unordered lists ( UL ), ordered lists ( OL ), and list items ( LI )

Start tag: required , End tag: required

Start tag: required , End tag: optional

Attribute definitions

Attributes defined elsewhere

• id , class ( document-wide identifiers )
• lang ( language information ), dir ( text direction )
• title ( element title )
• style ( inline style information )
• onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup ( intrinsic events )

Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

This example illustrates the basic structure of a list.

Lists may also be nested:

DEPRECATED EXAMPLE:

Details about number order. In ordered lists, it is not possible to continue list numbering automatically from a previous list or to hide numbering of some list items. However, authors can reset the number of a list item by setting its value attribute. Numbering continues from the new value for subsequent list items. For example:

10.3 Definition lists : the DL , DT , and DD elements

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

Here is an example:

Here is an example with multiple terms and descriptions:

Another application of DL , for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

10.3.1 Visual rendering of lists

Note. The following is an informative description of the behavior of some current visual user agents when formatting lists. Style sheets allow better control of list formatting (e.g., for numbering, language-dependent conventions, indenting, etc.).

Visual user agents generally indent nested lists with respect to the current level of nesting.

For both OL and UL , the type attribute specifies rendering options for visual user agents.

For the UL element, possible values for the type attribute are disc , square , and circle . The default value depends on the level of nesting of the current list. These values are case-insensitive.

How each value is presented depends on the user agent. User agents should attempt to present a "disc" as a small filled-in circle, a "circle" as a small circle outline, and a "square" as a small square outline.

A graphical user agent might render this as:

For the OL element, possible values for the type attribute are summarized in the table below (they are case-sensitive):

Note that the type attribute is deprecated and list styles should be handled through style sheets.

For example, using CSS, one may specify that the style of numbers for list elements in a numbered list should be lowercase roman numerals. In the excerpt below, every OL element belonging to the class "withroman" will have roman numerals in front of its list items.

The rendering of a definition list also depends on the user agent. The example:

might be rendered as follows:

10.4 The DIR and MENU elements

DIR and MENU are deprecated .

See the Transitional DTD for the formal definition.

The DIR element was designed to be used for creating multicolumn directory lists. The MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL , just different rendering. In practice, a user agent will render a DIR or MENU list exactly as a UL list.

We strongly recommend using UL instead of these elements.

HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3...) and an unordered list with bullets instead of numbers. Lists are a good way to formalize a list of items and let the HTML styling do the work for you.

Ordered lists

Here is an example of how to create an ordered list:

Ordered lists have a "type" attribute which defines the numbering convention to use.

To count using numbers, use type="1":

To count using uppercase letters, use type="A":

To count using lowercase letters, use type="a":

To count using uppercase roman numerals, use type="I":

To count using lowercase roman numerals, use type="i":

Unordered lists

Here is an example of how to create an unordered list:

Here is a list of unordered items:

• Second item

To change the list style attributes, we can use the CSS attribute called list-style-type . The available types are:

Here is an example of the disc list style type:

Here is an example of the circle list style type:

Here is an example of the square list style type:

Here is an example of the none list style type:

Use <ul> and <ol> listing the list(bottom) below the text My favorite foods/drinks list . ( Hint : You can insert a list to a list like <ol> into <li> )

Coding for Kids is an online interactive tutorial that teaches your kids how to code while playing!

Receive a 50% discount code by using the promo code:

Start now and play the first chapter for free, without signing up.

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Lists are more common than you might think. If you've ever taken a programming class, the first project may have been to create a shopping list or a to-do list. Those are lists. Multiple-choice tests are generally numbered lists of questions: the multiple possible answers for each question are nested lists.

HTML provides us with a few different ways to mark up lists. There are ordered lists ( <ol> ), unordered lists ( <ul> ), and description lists ( <dl> ). List items ( <li> ) are nested within ordered lists and unordered lists. Inside a description list, you'll find description terms ( <dt> ) and description details <dd>. We'll cover all of these here.

In HTML forms, lists of <option> elements make up the content of <datalist> , <select> , and <optgroup> within a <select> . These are discussed in HTML forms .

In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually preceded by an ascending counter such as a number or letter. The bullets and numbering order can be controlled or reversed with HTML or CSS, or both.

By default, ordered and unordered list items are prefixed with numbers or bullets. But even when you don't want lists to look like lists, you still want a list of items, like in navigation bars, a to-do list with checkboxes instead of bullets, or true and false questions in a multiple-choice test. For all of these lists without bullets, it is appropriate to use HTML list elements.

Unordered lists

The <ul> element is the parent element for unordered lists of items. The only children of a <ul> are one or more <li> list item elements. Let's create a list of machines. We use an unordered list because the order doesn't matter (don't tell them that):

By default, each unordered list item is prefixed with a bullet. The unordered list has no element-specific attributes. You need to close out your lists with a </ul> .

Ordered lists

The <ol> element is the parent element for ordered lists of items. The only children of an <ol> are one or more <li> elements, or list items. The "bullets" in this case, though, are numbers of a multitude of types. The type can be defined in CSS with the list-style-type property or via the type attribute.

The <ol> has three element-specific attributes: type , reversed , and start .

The enumerated type attribute sets the numbering type. There are five valid values for type , the default being 1 for numbers, but you can also use a, A, i, or I, for lower and upper case letters or roman numerals. The list-style-type property provides many more values.

While, as noted in the codepen, the list-style-type property overrides the value of the type attribute, when writing documentation where the numeric type is important, as with legal documents, for example, you need to include the type .

The boolean reversed attribute, if included, will reverse the order of the numbers, going from largest number to the lowest. The start attribute sets the starting value. The default is 1 .

Similar to </ul> , the closing </ol> is required.

We can nest lists, but they have to be nested within a list item. Remember, the only element that can be a child of a <ul> or <ol> is one or more <li> elements.

We've used the <li> element, but we have yet to introduce it formally. The <li> element can be a direct child of an unordered list ( <ul> ), an ordered list ( <ol> ), or a menu ( <menu> ). The <li> has to be nested as a child of one of these elements, and isn't valid anywhere else.

Closing a list item isn't required by the specification as it will be implicitly closed when the browser encounters the next <li> opening tag or the required list closing tag: </ul> , </ol> , </menu> . While the spec doesn't require it, and some internal company best practices suggest you shouldn't close list items to save some bytes, do close your <li> tags. It makes your code easier to read and your future self will thank you. It's easier to close all elements than to remember which tags need to be closed and which have an optional closing tag.

There is only one element-specific <li> attribute: value , an integer. The value is only useful on an <li> when the <li> is nested within an ordered list and has no meaning for unordered lists or menus. It overrides the value of the <ol> 's start if there is a conflict.

The value is the number of the list item within an ordered list. With subsequent list items, continue the numbering from the value set, unless that item also has a value attribute set. The value doesn't have to be in order; though if it isn't in order, there should be a good reason.

When you combine reversed on the <ol> with value attributes on list items, the browser will set that <li> to the value supplied, then count up for the <li> s preceding it, and count down for those coming after. If a second list item has a value attribute, the counter will be reset at that second list item, and the subsequent value will decrease by one.

All of this can also be controlled with CSS counters providing generated content for the ::marker pseudo-element . If the number is purely presentational, use CSS. If the numbering is important semantically, or otherwise has meaning, use these attributes.

Thus far, we have looked at list items containing only text nodes. List items can contain all flow content, meaning any element found in the body that can be nested as a direct child of the <body> , including headings, thereby sectioning content.

We have a few unordered lists in MLW. The teachers within the instructors section are a list, as are the student machines in the reviews section. The instructor <ul> has two <li> s: one for each teacher. Within each <li> , we have an image and a paragraph:

The reviews section has three reviews, so three <li> s. Each contains an image, a block quote, and a three-line paragraph with two line breaks.

Nesting lists within lists is also very common. While MLW doesn't have any nested lists, this site does. In the first chapter of this series, Overview of HTML, the main elements section has two subsections. In the table of contents, which is an unordered list, there is a nested unordered list with links to these two sections:

As the only child of a <ul> is an <li> , a nested list is found nested in an <li> , never directly in an <ol> or <ul> .

In this last example, you may have noticed that role="list" is included on the <ul> . While the implicit role of both the <ul> and <ol> is list , removing the list appearance with CSS, including setting display: grid or list-style-type: none can lead VoiceOver (the iOS and MacOS screen reader) to remove the implicit semantics in Safari. This is a feature not a bug . Generally, you should not add the role attribute when using semantic elements as it isn't necessary. And you generally don't need to add one to a list either, unless the user really needs to know it is a list, such as when the user would benefit from knowing how many items are in the list.

Description lists

A description list is a description list ( <dl> ) element containing a series of (zero or more) description terms ( <dt> ) and their description details ( <dd> ). The original names for these three elements were "definition list," "definition term," and "definition definition." The name changed in the living standard.

Similar to ordered and unordered lists, they can be nested. Unlike ordered and unordered lists, they are made up of key/value pairs. Similar to the <ul> and <ol> , the <dl> is the parent container. The <dt> and <dd> elements are the children of the <dl> .

We can create a list of machines with their career history and aspirations. A description list of students, denoted by the <dl> , encloses a group of terms—in this case, the "terms" are student names—specified using the <dt> element, along with a description for each term— in this case, the career goals of each student—specified by the <dd> elements.

This description list is not actually part of the MLW page. Description lists are not just for terms and definitions, which is why the names of the elements were made more general.

When creating a list of terms and their definitions or descriptions, or similar lists of key-value pairs, the description lists elements provide the appropriate semantics. The implicit role of a <dt> is term with listitem being another allowed role. The implicit role of a <dd> is definition with no other roles permitted. Unlike the <ul> and <ol> , the <dl> does not have an implicit ARIA role. That makes sense because the <dl> is not always a list. But when it is, it does accept the list and group roles.

Most often you will encounter description lists with equal numbers of <dt> and <dd> elements. But description lists aren't always and aren't required to be matching term-to-description pairs; you can have multiple to one, or one to multiple, such as a dictionary term that has more than one definition.

Each <dt> has at least one associated <dd> , and each <dd> has at least one associated <dt> . While it is possible to use the adjacent sibling combinator or the :has() relational selector to target variable numbers of these elements with CSS, if required, you can include a <div> as the child of a <dl> , and the parent of one or more <dt> or <dd> elements (or both) are permitted. The <dl> can actually have a few other children: nesting a <div> , <template> , or <script> is allowed. None of the description list elements has any element-specific attributes.

Now that you have an understanding of links and lists, let's put the two together to create navigation .

Check your understanding

Test your knowledge of lists.

Is it valid to include a <h2> inside a list item?

Select the three elements that define types of list.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-12-08 UTC.

Popular Tutorials

Learn python interactively, popular examples.

• Introduction
• What is HTML?

HTML Basics

• HTML Web Design Basics
• HTML Paragraphs
• HTML Headings
• HTML Comments

HTML Unordered List

HTML Ordered List

HTML Description List

• HTML Line Break
• HTML Pre Tag
• HTML Horizontal Line

HTML Inline

• HTML Block and Inline
• HTML Images
• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon
• HTML Form Elements
• HTML Form Action

Semantic HTML

• HTML Semantic HTML
• HTML div Tag
• HTML aside Tag
• HTML section Tag
• HTML footer Tag
• HTML main Tag
• HTML figure and figcaption
• HTML Accessibility

HTML, CSS & JavaScript

• HTML Layout
• HTML Responsive Web Design
• HTML and JavaScript

Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols

Web Tutorials

CSS Lists Styling

We use the HTML ordered list to define a list where the sequence or order of the list items is important. We can use the HTML ordered list for recipes, algorithms, top ten lists, and so on.

We use the <ol> tag to create an unordered list. For example,

Browser Output

Each item of the list is enclosed inside the <li> tag and they are numbered by decimal numbers.

By default, ordered lists are ordered by numbers, however, we can change them as per our choice.

• Ordered Lists Type

We use the type attribute to change the marker for the list. There are five types of numbering in the ordered list. They are

Below, we can see examples for all the number types.

• start Attribute

We use the start attribute to change the starting point for the numbering of the list. For example,

Here, we change the starting value of the list to 5.

This attribute also works with other types. For example,

Similarly, we can use the start attribute along with all other types.

• reversed Attribute

We can use the reversed attribute on the ordered list to reverse the numbering on the list. For example,

Here, we can see the order of the list is reversed, the first list item is numbered 4 and the last is numbered 1.

Similarly, the reversed attribute can also be used with other types and in conjunction with the start attribute. For example,

In the above example, we use the upper-case roman numeral type and start at 10 and reverse the order of the numbers.

• Nesting Lists

In HTML, we can create a nested list by adding one list inside another. For example,

In the above example, you can see we have added an ordered list inside another ordered list.

In this case, the list item of the outer ordered list also includes an ordered list.

Similarly, we can also mix list types while nesting and add an unordered list inside the ordered list. For example,

Note: In our examples, we are nesting the list up to a single level, however, we can also nest lists up to multiple levels.

Table of Contents

Related tutorials.

Programming

Learn HTML Code, Tags & CSS

Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them

Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can’t tell that a list is being used just by looking at the web page.

There are three types of lists you can use, and this quick guide will show you how to use each.

• 1 Unordered Lists
• 2.1.1 Creating a Countdown List
• 2.1.2 Starting a List on a Specific Number
• 2.1.3 Changing the Numbering Style
• 3 Description Lists
• 4 Nested Lists
• 5 Using Lists for Menus
• 6 Styling Lists
• 7 Closing Thoughts
• 8 Related Elements

Unordered Lists

An unordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.

The ul element opens and closes an unordered list. The items on the list are contained between list item, li , tags. A simple unordered list containing three items could be created with the following HTML.

Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.

Here’s how our short unordered list renders in a browser:

Ordered Lists

Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the ol tag is used rather than the ul tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.

We’re also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.

As you can see below, rather than a bulleted list, we now have a numbered list.

Changing Numbering

There are times when you want to control the numbering of ordered lists. For example, your list may be broken up by a paragraph that appears mid-list to expand on a certain concept, or you may create a countdown list that begins at a high number and counts down. Lastly, maybe you’d rather use roman numerals. HTML and CSS make it easy to control the numbering of ordered lists.

Creating a Countdown List

To reverse the number of a list, simply add the reversed attributed to the opening ol tag.

When rendered in most browsers the numbering of this list will appear reversed.

Note that Microsoft browsers do not support the reversed attribute. If you use this attribute, bear in mind that visitors using Internet Explorer or Edge will see standard numbering.

Starting a List on a Specific Number

The start attribute is used to specify the number on which an ordered list starts. For example, imagine you have a list of 5 items, and after the second and fourth items you want to add a sentence or two with additional details. You could use the following HTML to do this without restarting the list numbering after each paragraph.

Here’s how that list renders in the browser:

A few short sentences about Item 2 that we don’t want to appear appended to the list item. A second sentence of additional details

Notice that we used the start attribute on the ol tag to restart the numbering at “3” following the break in the list above. We’ll use the same technique to properly number Step 5 below.

Changing the Numbering Style

You can use CSS to change the marker style of an ordered list. In addition to standard numbering (referred to as decimal in CSS), you can also use:

• upper-roman for uppercaseroman numerals
• lower-roman for lowercase roman numerals
• decimal-leading-zero to add a “0” placeholder before single-digit list items

We cover the list-style-type CSS property used to implement these numbering styles below .

Description Lists

Description lists are created with the dl tag. Used far less frequently than their ordered and unordered peers, description lists are used to contain name-value groups. Each name-value group consists of one name, or term, placed between dt tags, followed by one or more values with each value, or description, placed between dd tags.

For example, if we wanted to use a description list to explain the relationship between members of a family, we might use the following code:

When that list is rendered, it will be displayed in such a way that the relationships between the terms ( dt ) and values ( dd ) are clear.

Nested Lists

A nested list is a list within a list. If you’ve ever created a bulleted outline in a word processing document you probably used a variety of indentations and bullet point types to denote items that were subpoints of another item in the outline. This is the effect we’re going for when we create nested lists.

To create a nested list, simply add a new list within a parent list like this:

When that list is loaded in the browser, the nested list will be indented further than the parent list, and a different type of item marker will be displayed.

• Subitem B.1
• Subitem B.2

Nested lists aren’t just used to organize the visual representation of information. Screen readers and other assistive technologies rely on the nested structure of complex lists to make sense of the hierarchy and logic of data within the list.

You could use assign classes to list items and use CSS to create the same visual effect as a nested list. However, if you did that, the hierarchical and logical structure of the list would be lost to website visitors using assistive technologies. In other words, don’t use CSS to create nested lists visually, use HTML to create them.

Using Lists for Menus

One of the most common uses of lists is to create website navigation menus. Unordered lists are usually the list-of-choice for this purpose. With just a few lines of CSS we can convert an unordered list into an attractive horizontal navigation menu.

If we load that code in the browser, you’ll notice that each menu item changes when you hover over it.

A lot more can be done with lists, CSS, and JavaScript to create interactive drop-down menus, and our menu tutorial will teach you how to create beautiful, modern, interactive, and well-organized menus.

Styling Lists

List typography is usually best styled to match the typography of the website’s paragraph text. List-specific styling can be accomplished with CSS.

There are three list properties that can be styled with CSS:

• list-style-type : Defines the marker type that preceeds each list item. Common values include disc (the default unordered list style type), decimal (the default ordered list style type), circle, square, lower- or upper-roman, and lower- or upper-latin, although several additional styles may also be used.
• list-style-position : Determines whether the list item marker should be placed inside the content box, or outside of the content box in the item’s left-hand padding area.
• list-style-image : An image can also be used as the item marker. This property is used to specify the image file to be used.

Each of these three properties can be applied seperately by using the individual property names or simultaneously with the list-style shorthand property. The list-style property syntax includes the list style type, position, and image values in that order. For example, if we wanted to select the square marker, position it inside the content box, and also specify an image file, our CSS would look something like this:

Since we’ve specified both a list marker and an image, the image will be used unless it is unavailable, in which case the square marker will be displayed.

Closing Thoughts

Lists are one of the most diverse and effective tools in a web designers toolbox. They provide logical, hierarchical structure to data, and can be used in a variety of ways. Understanding the full breadth of what is possible with lists in HTML makes this powerful HTML element even more useful.

Related Elements

Welcome to the lecture on HTML Lists. Lists play a crucial role in organizing and structuring information on webpages. In this session, we'll explore different types of HTML lists and learn how to create well-formatted and visually appealing lists.

In this lecture on HTML Lists, you'll learn how to organize and present information in a structured format using lists. You'll explore both ordered and unordered lists, learn how to nest list items, and apply styles to enhance the visual appearance of lists.

Desired Outcomes:

By the end of this lecture, you should be able to:

• Understand the purpose and usage of HTML lists
• Create ordered and unordered lists
• Nest list items for hierarchical organization
• Apply styles to customize the appearance of lists

Unordered Lists

Unordered lists ( <ul> ) are used to present items without a specific order or sequence. Each item in the list is defined using the <li> (list item) tag. By default, unordered lists display bullet points for each item.

In this example, we have an unordered list with three list items. When rendered, each item will be displayed with a bullet point.

Ordered Lists

Ordered lists ( <ol> ) are used for items that have a specific order or sequence. Like unordered lists, each item is defined using the <li> tag. However, ordered lists display items with numbers or other symbols, indicating their order.

In this example, we have an ordered list with three items. When rendered, each item will be displayed with a number indicating its order.

Nested Lists

HTML allows you to nest lists within lists to create hierarchical structures. This is achieved by placing a complete list structure inside an individual list item (<li>). This technique is useful for creating subcategories or multi-level lists.

In this example, we have an unordered list with three top-level items. The second item contains a nested unordered list with two subitems. When rendered, the nested list will be indented, visually indicating the hierarchical relationship.

Definition Lists

Definition lists are used to display a list of terms along with their definitions. They are not as common as unordered ( <ul> ) and ordered ( <ol> ) lists but serve a specific purpose.

Understanding the Tags:

• <dl> : The Definition List element. This is the container that holds the list of terms and descriptions.
• <dt> : The Definition Term element. This is used to indicate the term being defined.
• <dd> : The Definition Description element. This is used to provide the definition or description for the term.

In this example, we have a definition list with three definition terms and three definition descriptions.

Definition lists in HTML are a specialized tool for a specific type of content. Knowing how to use them enhances your web pages' readability and structure. Practice creating and styling your own definition lists to understand their functionality and application better.

Styling Lists

HTML lists can be customized and styled using CSS. By applying CSS styles, you can change the appearance of list markers, adjust spacing, and create unique visual representations.

Example CSS:

In this CSS example, we've set the list-style-type property to " square " for unordered lists ( <ul> ) and " upper-roman " for ordered lists ( <ol> ). We've also adjusted the left margin to create indentation.

By understanding the usage and structure of HTML lists, you can organize and present information in a structured manner on your webpages. Experiment with different list types and nesting techniques to create well-structured content.

Congratulations on learning about HTML lists! In the next lecture, we'll explore HTML tables, which allow you to display tabular data on your webpages.

Keep practicing and applying these techniques to enhance the organization and readability of your content.

Learn to code HTML & CSS

From zero to hero.

Check out this course on Udemy,  now at 75% off! Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

Web development explained for normal people! 🖥 🚀

Lists and navigation in html.

Lists are very useful in HTML, and are also used to build navigation menus. Learn how in this article…

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:

Ordered lists

Unordered lists, definition lists.

(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 are lists with numbers, and look like so:

Item Another item A third item

Here is the syntax for an ordered list:

Let’s go through what that means: The <ol> tag stands for ordered list , and is the actual list element. Each item in the list is made using a <li> element, which stands for list item .

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:

You still use <li> s for the list items, and the only difference is that <ol> is replaced with <ul> (unordered list).

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 <dl> 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 <dt> , and the element for the definition description (definition of the term) is <dd> . Here is a simple term/definition pair in a list:

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

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

What is 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:

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

nav > ul > li > a > your-text

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

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

• Home (link to https://codetheweb.blog/)
• Newsletter (link to https://codetheweb.blog/newsletter)

See if you got it right below:

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 .

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! 🎁

Get it when you sign up for the weekly newsletter :.

Share the knowledge :)

• Stack Overflow Public questions & answers
• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Talent Build your employer brand
• Advertising Reach developers & technologists worldwide
• Labs The future of collective knowledge sharing
• About the company

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Proper way to make HTML nested list?

The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE: , but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

So which of these ways is the correct way to write an HTML list?

Option 1 : The nested <ul> is a child of the parent <ul> :

Option 2 : The nested <ul> is a child of the <li> it belongs in:

• nested-lists

7 Answers 7

Option 2 is correct.

The nested list should be inside a <li> element of the list in which it is nested.

Link to the MDN article on lists (taken from comment below): HTML lists .

Link to the HTML5 W3C ul spec: HTML5 ul .

Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol .

The description list ( HTML5 dl ) is similar, but allows both dt and dd elements.

More notes:

• dl = definition list.
• ol = ordered list (numbers).
• ul = unordered list (bullets).

MDN link on nesting lists.

• 1 I ran into a case that seems to be impossible to create with valid HTML5: a nested list item without a parent list item (imagine pressing TAB to indent at the beginning of a list item in a word processor). See my question here: stackoverflow.com/questions/61094384/… –  Mark Commented Apr 8, 2020 at 6:19
• 1 I'm really happy to get this answer, but can't find how to convert the invalid HTML5 in Option 1 (which for instance BlueGriffon creates, and requires to display nested lists correctly) into the valid HTML5 of Option 2. HTML Tidy doesn't appear to do it, and all the WYSIWYG editors that I've tried will accept copy & paste of the invalid markup and just leave it that way. :( –  rphair Commented Dec 24, 2022 at 13:55

Nesting Lists - UL

Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.

If you validate , option 1 comes up as an error in html 5 -- credit: user3272456

Correct: <ul> as child of <li>

The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.

W3C Standard for Nesting Lists

A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:

Chapter One Section One Section Two Section Three Chapter Two Chapter Three

The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:

Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.

Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.

If you validate , option 1 comes up as an error in html 5, so option 2 is correct.

I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.

Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.

• 2 Your examples are not the same. The second example with "Choice A", "Choice B", "Sub 1", "Sub 2" does not work for the dt / dd tags which are paired. Also the inherent style (and the tabulation, I suspect) merely comes from the default browser stylesheet, so that's not saying much. I would treat it like a semantic element; if you have a list of definitions, or perhaps if you just have pairs of title/description data, a dl could be a good choice. –  Ricket Commented May 14, 2014 at 14:48
• Can you edit your comment to give equivalent examples - e.g. both to contain choice A and choice B with two sub-entries Sub 1 and Sub 2 for Choice B? –  Zlatin Zlatev Commented Sep 26, 2016 at 17:42

What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.

This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.

For example, gmail, inbox, and evernote all allow creating lists like this:

With option 2 you cannot do that (you'll have an extra list item), with option 1, you can.

• 2 Option 1 produces invalid HTML. Five years ago when this question was asked that may not have been the case but it is now. –  j08691 Commented Jun 30, 2016 at 2:56
• 1 Yes, it's definitely invalid HTML. However it's still used and is still useful for compatibility. The alternative is to fiddle with margins and bullet styles which may not be what you want when composing an email. –  ibash Commented Jun 30, 2016 at 16:23
• 1 I am not sure I understand why I would want something misaligned as this. Can you edit your comment to give more meaningful usage for this? –  Zlatin Zlatev Commented Sep 26, 2016 at 17:41
• Importantly this allows free form editing for a group of bullets, giving it a more intuitive feel. As a user, if I have a list of bullets I might want to indent them and nest them under a new bullet. Without the ability to indent to arbitrarily the user would first need to insert the header bullet and then indent every bullet after. With the ability to arbitrarily indent, the user can indent the group of bullets and then insert a new header bullet. –  ibash Commented Sep 27, 2016 at 19:00
• 1 I can confirm as of May 2023 this is how Google Docs structures indented <ol>'s and <ul>'s both in their markup and in their clipboard data. OP has a valid point. –  d2vid Commented May 16, 2023 at 11:43

Not the answer you're looking for? Browse other questions tagged html html-lists nested-lists or ask your own question .

• Featured on Meta
• Upcoming sign-up experiments related to tags
• The 2024 Developer Survey Is Live
• The return of Staging Ground to Stack Overflow
• Policy: Generative AI (e.g., ChatGPT) is banned

Hot Network Questions

• What is the meaning of this black/white (likely non-traffic) sign seen on German highways?
• Find 10 float64s that give the least accurate sum
• Starship IFT-4: whatever happened to the fin tip camera feed?
• Horror movie that has a demon hand coming through a mirror
• Properties of Hamilton cycles in hypercubes
• UTF-8 characters in POSIX shell script *comments* - anything against it?
• I'm a web developer but I am being asked to automate testing in Selenium
• does the 401k 12 month loan limit reset with a new plan
• Was Croatia the first country to recognize the sovereignity of the USA? Was Croatia expecting military help from USA that didn't come?
• Protocol Used by the \oldstylenums Command to Display Digits
• What is the history and meaning of letters “v” and “e” in expressions +ve and -ve?
• Is this crumbling concrete step salvageable?
• Can my grant pay for a conference marginally related to award?
• How do I make an access hole in a chain link fence for chickens?
• Infinitary logics and the axiom of choice
• Statement of Contribution in Dissertation
• Potential difference when two emf sources are connected in a simple loop circuit
• Should I replace my three-prong dryer outlet with a four-prong outlet since I have a ground wire?
• Finding a mystery number from a sum and product, with a twist
• Transactional Replication - how to set up alerts/notification to send alerts before transaction log space is full on publisher?
• How to filter WFS by intersecting polygon
• Should I practise a piece at a metronome tempo that is faster than required?
• Tool Storage Corrosion Risk
• Why is the Newcomb problem confusing?

HyperionDev Blog

Software Development and Coding

HTML beginner tutorial 2: lists, links & images

Welcome to part 2 of a 4-part series by HyperionDev showcasing an HTML tutorial for beginners. We hope you enjoy this upcoming tutorial, focusing on lists, links and images. By the end of our first HTML tutorial, your document in Notepad++ should be displaying as follows:

In this next tutorial, you’ll be adding to the code to create lists, links and images in HTML.

Lists are very common in web pages. They’re used in online articles, navigation menus, and product features on e-commerce websites.

There are a few different types of lists you can use, depending on the content you want to display.

Unordered list:

An unordered list is a simple HTML list that you can use when the order of the items you’re listing isn’t important, and rearranging the order wouldn’t cause confusion or change the hierarchy of the list.

The <ul> and </ul> tags define the beginning and end of an unordered list. The <li> and </li> tags are list item tags, which contain the items or points you are listing.

Add an unordered list to your document, by inserting the following code underneath the “My first paragraph” code.

When you save and refresh, the list will appear as follows:

Ordered list:

Ordered lists are used when the order of the items is important, for example, a list of instructions that must be followed in order. The syntax is the same as for unordered lists, except that the <ol> and </ol> tags are used to define the beginning and end of the list, instead of the <ul> and </ul> tags which are used for unordered lists.

Add an ordered list to your document, by inserting the following code underneath the “Heading 2” code.

When you save your document and refresh your browser, you’ll see the list appear as follows:

Nested list:

A nested list is a little more complex, because it’s essentially a “list within a list” with a variety of different indentations and bullet point types used to denote points and sub-points.

Add a nested list by typing this code into your document, under Heading 3.

Your updated web page will appear as follows:

A real-world example of this would be something like a gym or exercise studio listing their daily schedule. The points would be the days of the week, and the sub-points would be the classes taking place each day.

If you want to see this real-world example on your web page, you can edit the text as follows:

When building a real website, you would be able to add as many points and sub-points as you need, depending on the site content.

Remember that HTML isn’t presentational, and in order to add styling to your lists (e.g. defining the font used for the list), you will need to use Cascading Style Sheets (CSS).

HTML links are hyperlinks which allow the user to click and navigate to another page or document. When a piece of text is hyperlinked, a mouse cursor will turn into a hand icon to show the user that it is clickable.

In our first HTML beginner tutorial, we covered how to insert a simple HTML link using the <a> and </a> tags and the href attribute, as follows:

HTML also allows you to define the behaviour of your links in a bit more detail, such as creating targets and linking images.

You can use a target attribute to specify where to open the link. You can do this by adding a target attribute to your link code and applying one of the following values:

• _self opens the link in the same window or tab as it was clicked
• _blank opens the link in a new window or tab.
• _parent opens the link in the parent frame
• _top opens the link in the body of the window
• f ramename opens the link in a named frame

Go back to the link in your document, and edit it as follows:

This example will open your link in a new browser window or tab. This is useful, because it allows the user to open the link without clicking away from the original web page or site.

When you refresh your page and click the link, the content will open in a new tab.

By default, an unvisited link will be underlined and appear as blue text. A visited link will be underlined in purple text, and an active link will be underlined in red text. To change these default colours, you would need to use CSS to style them further.

Linking images:

Images can be hyperlinked as well as text.

Go back to your image in your document, and add your <a> </a> tags and href attribute, as you would for a text link.

When you refresh your page, the image will look the same, but your mouse cursor will change to a hand when you hover over it – showing that the image is now clickable.

Clicking the image will open your link in the same browser tab. You can change this to open in a new tab, by using a target attribute as you would for a text link.

HTML images

In the first tutorial, you learned how to add an image to your HTML page, using the <img> tag.  

The <img> tag contains attributes only, and does not have a closing tag. The src attribute, which you’ve already learned how to use, specifies the location (web address or URL) of the image.

The alt attribute provides alternate text for an image, in case the user isn’t able to view the image itself. This could be caused by a slow Internet connection or an error in the src attribute.

Let’s say for example the url you were using was incorrect. Go back to the image in your document, and change it to a purposely incorrect url, as follows:

When you refresh the page, you’ll see a broken image with no description of what ought to be displaying there.

Putting alt attributes in place for your images ensures that your users (and search engines) can see what’s meant to be there, even if there is a problem with loading the image.

Add an alt attribute to your image using the following text:

When you reload the page, the alt attribute value will display where the image should be:

Note: Be sure to fix your image url before continuing. Ideally, the images should display, and alt attributes should be in place as a back-up.

Part 3 of our HTML tutorial will show you how to set up tables and forms.

This tutorial will give you a simple introduction to the popular web language, but if you want to learn more about HTML code in-depth, why not sign up for a mentor-led full stack web development course ?

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter
• HTML Introduction
• HTML Editors
• HTML Basics
• HTML Comments
• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Text Formatting
• HTML Quotations
• HTML Colors
• HTML Links Hyperlinks
• HTML Images
• HTML Favicon
• HTML Tables
• HTML Ordered Lists
• HTML Unordered Lists
• HTML Description Lists
• HTML Block and Inline Elements
• HTML Iframes
• HTML File Paths
• HTML Layout
• HTML Computer Code Elements
• HTML5 Semantics
• HTML Entities
• HTML Symbols
• HTML Emojis
• HTML Charsets
• HTML URL Encoding
• HTML Responsive Web Design

HTML Graphics

• SVG Tutorial

HTML Tutorial References

• HTML Tags - A to Z List
• HTML Attributes Complete Reference
• HTML Global Attributes
• HTML5 Complete Reference
• HTML5 MathML Complete Reference
• HTML DOM Complete Reference
• HTML DOM Audio/Video Complete Reference
• SVG Element Complete Reference
• SVG Attribute Complete Reference
• SVG Property Complete Reference
• HTML Canvas Complete Reference

HTML Exercises, Practice Questions and Solutions

Are you eager to learn HTML or looking to brush up on your skills? Dive into our HTML Exercises , designed to cater to both beginners and experienced developers. With our interactive portal, you can engage in hands-on coding challenges, track your progress, and elevate your web development expertise. Whether you’re starting from scratch or aiming to refine your HTML knowledge, our practice questions and solutions offer a step-by-step guide to success.

A step-by-step HTML practice guide for beginner to advanced level.

Benefits of HTML Exercises

• Interactive Quizzes: Engage in hands-on HTML quizzes.
• Progress Tracking: Monitor your learning journey.
• Skill Enhancement: Sharpen coding skills effectively.
• Flexible Learning: Practice at your own pace.
• Immediate Feedback: Receive instant results and feedback.
• Convenient Accessibility: Accessible online, anytime.
• Real-world Application: Apply HTML concepts practically.
• Comprehensive Learning: Cover a range of HTML topics.

How to Start Practice ?:

Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively.

HTML Best Practice Guide:

Dive into HTML excellence with our comprehensive Best Practice Guide. Uncover essential coding standards, optimization tips, and industry-recommended approaches to HTML development. Elevate your skills with insightful advice, practical examples, and interactive challenges. Ensure your web projects stand out for their clarity and performance by following these proven best practices.

Why Practice HTML Online?

• Hands-On Learning : Immerse yourself in interactive HTML exercises to gain practical experience.
• Progress Tracking : Monitor your learning journey and see how your skills improve over time.
• Flexible Practice : Learn at your own pace, anytime and anywhere with convenient online accessibility.
• Real-World Application : Apply HTML concepts to real projects, enhancing your ability to create websites.
• Comprehensive Coverage : Explore a variety of HTML topics, from basic syntax to advanced techniques.

HTML Online Practice Rules:

• Be Honest : Complete exercises independently, avoiding plagiarism or unauthorized help.
• Time Management : Adhere to time limits to simulate real-world scenarios effectively.
• Code Quality : Prioritize clean, efficient, and well-structured HTML code.
• Follow Guidelines : Adhere to platform instructions for input/output formats and code submission.
• No Cheating : Refrain from using external resources during assessments, unless explicitly permitted.
• Utilize Feedback : Learn from automated feedback and engage with the community for support.
• Active Participation : Join forums, discussions, and share insights with fellow learners to enhance your understanding.
• Continuous Improvement : Identify and address areas of weakness for ongoing growth and development.

Features of Practice Portal:

• Immediate Feedback : Receive instant feedback on mistakes to facilitate quick learning.
• Unlimited Attempts : Practice exercises multiple times to master HTML concepts.
• Time Management Tools : Display elapsed time for each set of exercises to help manage time effectively.
• Performance Analytics : Track your progress with detailed analytics, highlighting strengths and areas for improvement.
• Interactive Code Editor : Experience an immersive coding environment for hands-on practice.
• Hints and Solutions : Access hints and solutions to guide your learning process.
• Community Integration : Engage with peers through forums and discussions for collaborative learning.
• Adaptive Difficulty : Adjust exercise difficulty based on user performance for personalized challenges.
• Gamification Elements : Earn scores, achievements, or badges to make learning HTML engaging and fun.

Please Login to comment...

Similar reads.

• WebTech - Exercises
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Tutorial

Html attributes, html tags list, html5 advance, html color names.

Interview Questions

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag. Output: In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag. Output: HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: defines the start of the list. defines a term. defines the term definition (description). Output: A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list. Element <ol><ul><dl> Yes Yes Yes Yes Yes Send your Feedback to [email protected] Help Others, Please Share Learn Latest Tutorials Transact-SQL Reinforcement Learning R Programming React Native Python Design Patterns Python Pillow Python Turtle Preparation Verbal Ability Company Questions Trending Technologies Artificial Intelligence Cloud Computing Data Science Machine Learning B.Tech / MCA Data Structures Operating System Computer Network Compiler Design Computer Organization Discrete Mathematics Ethical Hacking Computer Graphics Software Engineering Web Technology Cyber Security C Programming Control System Data Mining Data Warehouse HTML All Exercises & Assignments Write an HTML program to display hello world. Description: You need to write an HTML program to display hello world on screen. Hint : You need to type Hello World inside the body tag. Write a program to create a webpage to print values 1 to 5 Description: Write a program to create a webpage to print values 1 to 5 on the screen. Hint: Put values inside the body tag. Write a program to create a webpage to print your city name in red color. Description: Write a program to create a webpage to print your city name in red color. Hint: You need to put the city name inside the body tag and use color attribute to provide the color. Write a program to print a paragraph with different font and color. Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different font and color. Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag. HTML Exercises Categories HTML Basics HTML Top Exercises HTML Paragraphs Getting started with HTML Upscaling your web development business What Kind of Hosting Should a Student Choose? Awesome Book Awesome Community Awesome Course Awesome Tutorial Awesome YouTube Anchors and Hyperlinks Character Entities Classes and IDs Content Languages Data Attributes Div Element Global Attributes HTML 5 Cache HTML Event Attributes Include JavaScript Code in HTML Input Control Elements Label Element Linking Resources Description List Nested lists Ordered List Unordered List Marking up computer code Marking-up Quotes Media Elements Meta Information Navigation Bars Output Element Progress Element Sectioning Elements Selection Menu Controls Text Formatting Using HTML with CSS Void Elements HTML Lists Nested lists Fastest entity framework extensions. You can nest lists to represent sub-items of a list item. item 1 item 2 sub-item 2.1 sub-item 2.2 item 3 The nested list has to be a child of the li element. You can nest different types of list, too: Got any HTML Question? Advertise with us Cookie Policy Privacy Policy Get monthly updates about new articles, cheatsheets, and tricks. HTML Lab Assignments HTML Assignment and HTML Examples for Practice Text formatting, working with image, working with link. High School SportsbookWire Sportsbook Wire 'I'm feeling really good': Wilyer Abreu nears return to Red Sox after making rehab start in Worcester WORCESTER — Wilyer Abreu is happy to be back in the Canal District.  He just doesn’t want to be here for too long.   The Red Sox outfielder, who is on a rehab stint with Triple-A Worcester after an unfortunate slip in the Fenway Park dugout landed him on the injured list, served as the designated hitter and batted second in the WooSox lineup Tuesday night.   Abreu went 0 for 4 with a walk and two strikeouts in the WooSox’ 16-4 loss to the Columbus Clippers at Polar Park. More importantly, the 24-year-old left-handed-hitter was excited to be back on the field as he aims to return to the Red Sox later this week from a right ankle sprain.  “I’m feeling really good. I’m just trying to feel 100 percent and not think too much about the injury,” Abreu said before the game. “Just want to be healthy and see how things go after this injury.”  Acquired from the Houston Astros along with Enmanuel Valdez in a trade for Christian Vázquez in 2022, Abreu spent most of 2023 in Worcester before being called up to Boston last August.  'I was shocked': After promotion to Triple-A WooSox, Yorke is one call away from big leagues Wilyer Abreu taking hacks during batting practice here at Polar Park. The right ankle of the Red Sox rehabber looks pretty good. pic.twitter.com/8FpzDquj2g — Tommy Cassell (@tommycassell44) June 18, 2024 Abreu hit 22 home runs in 86 games for the WooSox last season and became the first player in WooSox history to hit three homers in the same game (Aug. 13 vs. Buffalo). He then made his major league debut with the Red Sox Aug. 22 and quickly had a four-hit game and a five-hit contest to become only the 14th MLB player to have four-plus hits in two of his first 12 career games.  Before landing on the 10-day injured list June 3, Abreu was batting .272 with 14 doubles, 6 homers, 22 RBIs and 7 stolen bases in 53 games for Boston.  “(I’m) happy to have a successful season,” Abreu said. “I know there are a lot of games left, so I’m just trying to be healthy for the rest of the season, and we’ll see what happens.”  'That's the Sogie we know': Nick Sogard catches fire with WooSox, adds another tool to resume Red Sox outfielder Wilyer Abreu talks with reporters about how his right ankle is feeling, his plan for rehabbing in Worcester, favorite part of playing in Boston and how he prefers people to say his first name. Case solved 🕵️‍♂️. pic.twitter.com/ncU5fP258H — Tommy Cassell (@tommycassell44) June 18, 2024 Abreu made the rounds with some of his former teammates prior to the WooSox loss Tuesday. He also shared hugs with WooSox manager Chad Tracy and bench coach José David Flores .  It was a homecoming of sorts for the Venezuelan native, who hosted a gender reveal with his wife, Kelly, at Polar Park after a WooSox game last June — and became a popular player among coaches, fans and teammates last season.     “We love him here, he’s a great human being, an incredibly hard worker, and obviously (we’re) very proud of him for what he’s accomplished up there to this point,” Tracy said. “I think all of us kind of knew that he had the ability to do that because he’s a really special player. So great to see him, he looks great, and hopefully we have a short stint here and get him right and ready to go and get him back up there to help out.”  The plan for Abreu on Wednesday is to play seven innings in the outfield and record at least three at-bats. Then, the Red Sox rehabber will re-evaluate how he feels before a hopeful return to the big leagues.  But for two days, it’s nice to have Abreu back in Worcester.  “Obviously, I don’t want Wilyer here. It means he’s hurt,” Tracy said. “But when they do get banged up, and get to come back, and we get to see him, and say hi because we don’t get to see him much, it’s really really nice to give him a hug and tell him how much we appreciate him. It’s been fun watching (him).”  “It's really good to see (them),” Abreu said.   —Contact Tommy Cassell at [email protected]. Follow him on X, formerly known as Twitter, @tommycassell44.  Preparing for the tidal wave of Canadian tax changes 2024 Canadian ESG Reporting Insights Findings from the 2024 Global Digital Trust Insights NextGen Survey 2024 — Canadian insights 27th Annual Global CEO Survey—Canadian insights PwC Canada's Federal budget analysis 2024 Voice of the Consumer—Canadian insights A new era for insurance risk modelling and pricing How governments can lead in the AI age Managed Services Nicolas Marcoux, CEO of PwC Canada, recognized for his commitment to the advancement of women in business PwC Canada drives adoption of Generative AI with firmwide implementation of Copilot for Microsoft 365 Our purpose, vision and values Talyah on the collaborative, tech-powered culture at PwC Canada We’re empowering women to thrive in tech Why join our assurance practice? Loading Results No Match Found Service List This page is for information purposes only and you should consult your professional adviser if you have any questions or are uncertain as to your rights or obligations. 2024-06-17 2024-06-17 To download a PDF to your computer click and hold the 'right' mouse button on the link above and select 'save link as' or 'save target as'. To view in your browser, click the link with your 'left' mouse button. Related Content What is a receivership. This page is for information purposes only and you should consult your professional adviser. What is CCAA? What is bankruptcy, ccaa frequently asked questions. Tammy Muradova Consulting & Deals, PwC Canada © 2018 - 2024 PwC. All rights reserved. PwC refers to the PwC network and/or one or more of its member firms, each of which is a separate legal entity. Please see www.pwc.com/structure for further details. Cookies info Terms & Conditions Site Provider Accessibility Mariners reinstate Ty France from injured list; Seby Zavala designated for assignment CLEVELAND — Turns out, Ty France needed only the minimal 10 days on the injured list to recover from a hairline fracture in his right heel. France was reinstated to the roster Tuesday ahead of the Mariners’ opening game of a key series against the Cleveland Guardians . The first baseman was injured when he was hit by a pitch on his heel in Kansas City on June 8. “Good to have Ty France back,” manager Scott Servais said Tuesday afternoon. “We need more offense throughout the lineup, and Ty was going really well before we got hurt, so hopefully he picks up and doesn’t miss a beat.” To make room for France, the Mariners opted to designate backup catcher Seby Zavala for assignment. That means the Mariners’ two rookie infielders — first baseman Tyler Locklear and second baseman Ryan Bliss — remain on the roster for now. Servais said the Mariners are expecting to see quite a few left-handed starting pitchers on this nine-day trip, which did play a factor in the roster decision. Locklear and Bliss, both right-handed hitters, will likely get a chance to play vs. those lefties. Locklear, 23, filled in capably for France in his first week in the majors, hitting two homers in his first eight games and showing strong improvement with his defense at first base. Locklear, 6-feet-3 and 235 pounds, certainly looks the part of the big-league players, and he’s played like one too. He’s one of just three players in M’s history to hit two homers (or more) with at least 12 total bases and a stolen base in his first eight games, joining Alvin Davis (1984) and Justin Leone (2004). (Like clockwork, every 20 years.) “What’s not to like about him?” Servais said. Locklear isn’t expected to play every day, but Servais still is hoping to get him some regular at-bats. “It’s going to take some maneuvering of the lineup on certain days and whatnot,” Servais said. “We’ll find a spot. You can’t have too many good players. You just try to keep all those guys going. And it can be more challenging for a younger player who’s used to playing every day, but that’s just where we’re at right now.” Veteran second baseman Jorge Polanco (hamstring) is scheduled to resume a rehab assignment Tuesday night in Tacoma. The Mariners are hopeful Polanco can return from the IL sometime in the next week. Garver ready for more Tuesday’s roster moves also means the Mariners will turn over the backup catcher’s role to veteran Mitch Garver, who has primarily served as the designated hitter in his first season in Seattle. Garver, 33, has made four appearances at catcher over the past few weeks, working exclusively with George Kirby for his last four starts. Kirby and Servais have offered positive reviews of Garver’s work behind the plate. “He’ll be back there a little bit more,” Servais said. “I know he’s been locked in on just catching George, but it won’t be that way going forward. The plan right now is he’ll probably [start at catcher for] one game in this series and we’ll see where it goes from there.” Garver will still get most of his at-bats as the DH, and Cal Raleigh will, of course, continue to get the bulk of the time at catcher. Garver said he is open and available to catching more. “I’ve already been catching [warmups in the bullpen] multiple times a week and staying ready in case there was an emergency or an injury,” Garver said. “But now it’s just moved to that role where I’m going to be catching probably a little bit more.” In his four starts with Garver, Kirby is 2-0 with a 1.50 ERA, with 27 strikeouts and three walks in 24 innings. “Very talented,” Garver said of Kirby. “The stuff is so unbelievable. I think just a little bit of a tweak with his usage could pull a lot more out of it. I think there’s more in the tank, and that’s what I was brought in to do — just pull up the most out of him that I possibly could.” Garver said he’s enjoyed getting to know Mariners pitchers more and more. “It’s funny,” he said, “throughout my whole career, I’d never put as much emphasis on my catching as I do now. I always used to be a bat-first catcher. And now when I’m catching, hitting is so secondary to me. My at-bats are what they are; I just kind of go out there and try to do something. But, really, my priority is taking care of the pitchers. For the first time in my career, I feel like that’s kind of flipped.” Most Read Sports Stories What will Pete Carroll’s ‘advisor’ role with Seahawks look like? | Mailbag J.P. Crawford, Scott Servais ejected as frustrated Mariners fall 8-0 in Cleveland VIEW Mariners club 3 homers, 9 extra-base hits in win over Guardians VIEW Luke Raley’s ‘football mentality’ catching on in Mariners’ clubhouse UW’s budget forecast provides clues to Big Ten revenue distributions With two catchers on the roster now, instead of three, Servais will have fewer options late in games — to bring in a sub in as a pinch hitter or pinch runner or defensive replacement behind the plate. On days when Raleigh is catching and Garver is DHing, the Mariners would lose the DH spot if Garver needed to take over at catcher for whatever reason. Zavala, 30, hit .154 with one homer, two doubles and a .496 OPS in 18 games with the Mariners. The Mariners acquired Zavala in an offseason trade with Arizona, along with reliever Carlos Vargas, for third baseman Eugenio Suarez. Suarez lost his starting job with the Diamondbacks last week. Woo good to go Bryan Woo said he’s ready to go for his scheduled start Wednesday night against the Guardians, a week after having his start skipped because of forearm soreness. Woo threw a normal 25-pitch bullpen session in Seattle over the weekend and felt fine afterward. “We’ll keep a close eye on him during the game, but all systems go,” Servais said. The opinions expressed in reader comments are those of the author only and do not reflect the opinions of The Seattle Times. HTML Tutorial Html graphics, html examples, html references, html exercises. You can test your HTML skills with W3Schools' Exercises. We have gathered a variety of HTML exercises (with answers) for each HTML Chapter. Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong. Count Your Score You will get 1 point for each correct answer. Your score and total score will always be displayed. Start HTML Exercises Start HTML Exercises ❯ If you don't know HTML, we suggest that you read our HTML Tutorial from scratch. Kickstart your career Get certified by completing the course COLOR PICKER Contact Sales If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected] Report Error If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected] Top Tutorials Top references, top examples, get certified. 258 IMAGES HTML Lists, CSS Boxes, JS Control Flow Introduction to HTML Lists Learn to use Lists in HTML HTML Lists Basic HTML: Lists in HTML HTML Lists VIDEO Software Architecture Contact List assignment Beginner Perl Maven tutorial 4.2 List Assignment Linked List Assignment Javascript Masterclass Solution Academic Registration Form Assignment || HTML Tutorial COMMENTS HTML Lists HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: HTML Lists Incorporating HTML lists into your web content is a powerful way to organize information, create engaging interfaces, and enhance user experiences. By understanding the different types of lists - unordered, ordered, and definition lists - and knowing how to style them with CSS, you have the tools to make your content more visually appealing ... HTML Lists- Ordered, Unordered, and Description Lists Tutorial 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 <dl> tag. This tag comes in pairs. In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a ... HTML Lists Displaying a List. There are two types of lists in HTML. Ordered lists ( ol ), where each list item ( li ) is preceded by a number. Unordered lists ( ul ), where each item is preceded by a bullet. The syntax for both is quite similar. An ordered list: An unordered list: HTML Lists An HTML description list is a list of terms, with a description of each term. The HTML description list is represented as <dl>. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and description Lists. Description Lists are used for: To gi HTML Lists (With Examples) To learn more about ordered lists, visit HTML Ordered Lists. Description List . The HTML description list is used to represent data in the name-value form. We use the <dl> tag to create a definition list and each item of the description list has two elements: Lists in HTML documents Learn how to use lists in HTML documents to organize and present information in different ways. This document explains the syntax and semantics of the ul element, which creates an unordered list of items. You can also find examples and links to other resources on lists and HTML from the World Wide Web Consortium (W3C). Lists Lists. HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3...) and an unordered list with bullets instead of numbers. Lists are a good way to formalize a list of items and let the HTML styling do the work for you. Ordered lists. Here is an example of how to create an ordered list: Lists Lists and other ways of grouping your content. While, as noted in the codepen, the list-style-type property overrides the value of the type attribute, when writing documentation where the numeric type is important, as with legal documents, for example, you need to include the type.. The boolean reversed attribute, if included, will reverse the order of the numbers, going from largest number to ... HTML Ordered List (With Examples) Here, we can see the order of the list is reversed, the first list item is numbered 4 and the last is numbered 1. Similarly, the reversed attribute can also be used with other types and in conjunction with the start attribute. Lists Bring Order To Web Pages: Here's The HTML Code To Create Them An unordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list. The ul element opens and closes an unordered list. The items on the list are contained between list item ... HTML Lists HTML lists can be customized and styled using CSS. By applying CSS styles, you can change the appearance of list markers, adjust spacing, and create unique visual representations. Example CSS: ul { list-style-type: square; margin-left: 20px; } ol { list-style-type: upper-roman; margin-left: 30px; } Styling lists. Lists and navigation in HTML • Code The Web Basically, a navigation item should be created with the following structure: nav > ul > li > a > your-text. Note that the ordered list is put in a <nav> 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: Unordered, Ordered, and Description Lists in HTML An HTML description list is a list of terms, with a description of each term. The HTML description list is represented as <dl>. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and description Lists. Description Lists are used for: To gi HTML Ordered Lists W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. Proper way to make HTML nested list? Link to the MDN article on lists (taken from comment below): HTML lists. Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol. The description list (HTML5 dl) is similar, but allows both dt and dd elements. HTML Lists (2024 Tutorial & Examples) Directions: Mix flour and sugar together. In a separate bowl, mix together milk and egg. Combine wet and dry ingredients together. Mix in blueberries. Bake at 350 degrees Fahrenheit for 17 minutes. Notes: For Lemon Blueberry Muffins, add 1 tbsp lemon zest. Example Nested Lists. HTML Tutorial HTML beginner tutorial 2: lists, links & images. Welcome to part 2 of a 4-part series by HyperionDev showcasing an HTML tutorial for beginners. We hope you enjoy this upcoming tutorial, focusing on lists, links and images. By the end of our first HTML tutorial, your document in Notepad++ should be displaying as follows: In this next tutorial ... HTML Exercises, Practice Questions and Solutions Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively. HTML Lists HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: Ordered List or Numbered List (ol) Unordered List or Bulleted List (ul) Description List or Definition List (dl) Note: We can create a list inside another list, which will be termed as nested List. HTML All Exercises & Assignments Write a program to print a paragraph with different font and color. Description: Create a webpage to print a paragraph with 4 - 5 sentences. Each sentence should be in a different font and color. HTML Tutorial => Nested lists PDF - Download HTML for free Previous Next This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0 HTML Assignment| HTML Exercise and Examples Assignment 1. Assignment 2. Assignment 3. Assignment 4 (Web Infomax Invoice) Assignment 5 (Web Layout) Assignment 6 (Periodic Table) UNIT - 6. Red Sox outfielder Wilyer Abreu begins rehab assignment with Worcester Before landing on the 10-day injured list June 3, Abreu was batting .272 with 14 doubles, 6 homers, 22 RBIs and 7 stolen bases in 53 games for Boston. "(I'm) happy to have a successful season ... HTML Unordered Lists W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. Service List Service List. Copy link. This page is for information purposes only and you should consult your professional adviser if you have any questions or are uncertain as to your rights or obligations. ... Services Accounting Advisory Services Alliances Audit and Assurance Consulting Crisis and resilience Current Insolvency Assignments Data and ... Mariners reinstate Ty France from Injured List; Seby Zavala designated Veteran second baseman Jorge Polanco (hamstring) is scheduled to resume a rehab assignment Tuesday night in Tacoma. The Mariners are hopeful Polanco can return from the IL sometime in the next ... HTML Exercises W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. essay homework paper phd project resume review speech thesis