In this section, we'll explain how to create lists. In HTML, there are two types of lists – unordered lists and ordered lists. An unordered list is a list with bullets without any particular order. An ordered list is a list with numbers.
There are three key tags used in HTML to structure lists.
<ul>
or <ol>
tag.This is an example of an unordered list, which we have already shown in Chapter 3.
<h2>Salad</h2>
<ul>
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
<h2>Soup</h2>
<ul>
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
The HTML code above is displayed in the browser as shown below.
You can change the marker type of list items with this attribute. When you don't want to show the marker, you can use type="none"
. When you want to change the marker to a square shape, use type="square"
.
Here are the examples.
<ul type="none">
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
The HTML code above is displayed in the browser as shown below.
<ul type="square">
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
The HTML code above is displayed in the browser as shown below.
For ordered list, there are two frequently used attributes – start
and type
.
You can change the start number of the first list item with this attribute. For example, if you want to start from 4 instead of 1, you can use this attribute.
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<p>Count Again</p>
<ol start="4">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The HTML code above is displayed in the browser as shown below.
You can change the marker type of list items with this attribute. For example:
type="a"
: a, b, c, d, e, ...type="A"
: A, B, C, D, E,...type="i"
: i, ii, iii, iv, v, ...
<ol type="a">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="A">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="i">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The HTML code above is displayed in the browser as shown below.
Nesting a list means placing a list inside of another list like in the illustration below.
What you need to do for nesting a list is place the <ul>
or <ol>
element within another <ul>
or <ol>
element as shown below.
<ol>
<li>item</li>
<li>item</li>
<ul>
<li>item</li>
<li>item</li>
</ul>
<li>item</li>
<li>item</li>
</ol>
!
and hit the tab or enter the key to create the HTML template.<title>
section to 5. HTML: Create Lists and Tables.In the <body>
section, type (copy & paste) the following code. And save the file (⌘ + S for Mac, Ctrl + S for Windows).
<h1>Chapter 5. HTML: Create Lists and Tables</h1>
<h2>Lists</h2>
<h3>1. Unordered Lists</h3>
<ul type="none">
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
<ul type="square">
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
<h3>2. Ordered Lists: Count Again</h3>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<p>Count Again</p>
<ol start="4">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<h3>3. Ordered Lists: Various Markers</h3>
<ol type="a">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="A">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="i">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<h3>4. Nested Lists</h3>
<ol>
<li>item</li>
<li>item</li>
<ul>
<li>item</li>
<li>item</li>
</ul>
<li>item</li>
<li>item</li>
</ol>
<hr>
Open the chapter5.html file with a browser. You should be able to see various types of lists in a browser, like the ones in the main section of this lesson, with titles for each list.
You can also check the sample result here (Demo Site ).
The <hr>
tag is used to add a thematic break (changing a topic) in the HTML document. Visually, it likely shows a horizontal line in the browser. The reason why we say "likely" is that these days the role of the <hr>
tag is mainly providing semantics. The style of the <hr>
element can differ by browser. If you want to add a horizontal line for design purposes, you should use CSS.
In this section, we'll explain how to create lists. In HTML, there are two types of lists – unordered lists and ordered lists. An unordered list is a list with bullets without any particular order. An ordered list is a list with numbers.
There are three key tags used in HTML to structure lists.
<ul>
or <ol>
tag.This is an example of an unordered list, which we have already shown in Chapter 3.
<h2>Salad</h2>
<ul>
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
<h2>Soup</h2>
<ul>
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
The HTML code above is displayed in the browser as shown below.
You can change the marker type of list items with this attribute. When you don't want to show the marker, you can use type="none"
. When you want to change the marker to a square shape, use type="square"
.
Here are the examples.
<ul type="none">
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
The HTML code above is displayed in the browser as shown below.
<ul type="square">
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
The HTML code above is displayed in the browser as shown below.
For ordered list, there are two frequently used attributes – start
and type
.
You can change the start number of the first list item with this attribute. For example, if you want to start from 4 instead of 1, you can use this attribute.
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<p>Count Again</p>
<ol start="4">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The HTML code above is displayed in the browser as shown below.
You can change the marker type of list items with this attribute. For example:
type="a"
: a, b, c, d, e, ...type="A"
: A, B, C, D, E,...type="i"
: i, ii, iii, iv, v, ...
<ol type="a">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="A">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="i">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The HTML code above is displayed in the browser as shown below.
Nesting a list means placing a list inside of another list like in the illustration below.
What you need to do for nesting a list is place the <ul>
or <ol>
element within another <ul>
or <ol>
element as shown below.
<ol>
<li>item</li>
<li>item</li>
<ul>
<li>item</li>
<li>item</li>
</ul>
<li>item</li>
<li>item</li>
</ol>
!
and hit the tab or enter the key to create the HTML template.<title>
section to 5. HTML: Create Lists and Tables.In the <body>
section, type (copy & paste) the following code. And save the file (⌘ + S for Mac, Ctrl + S for Windows).
<h1>Chapter 5. HTML: Create Lists and Tables</h1>
<h2>Lists</h2>
<h3>1. Unordered Lists</h3>
<ul type="none">
<li>Greek Salad</li>
<li>Avocado Salad</li>
<li>Tomato Salad</li>
</ul>
<ul type="square">
<li>Minestrone</li>
<li>Clam Chowder</li>
<li>Corn Soup</li>
</ul>
<h3>2. Ordered Lists: Count Again</h3>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<p>Count Again</p>
<ol start="4">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<h3>3. Ordered Lists: Various Markers</h3>
<ol type="a">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="A">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol type="i">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<h3>4. Nested Lists</h3>
<ol>
<li>item</li>
<li>item</li>
<ul>
<li>item</li>
<li>item</li>
</ul>
<li>item</li>
<li>item</li>
</ol>
<hr>
Open the chapter5.html file with a browser. You should be able to see various types of lists in a browser, like the ones in the main section of this lesson, with titles for each list.
You can also check the sample result here (Demo Site ).
The <hr>
tag is used to add a thematic break (changing a topic) in the HTML document. Visually, it likely shows a horizontal line in the browser. The reason why we say "likely" is that these days the role of the <hr>
tag is mainly providing semantics. The style of the <hr>
element can differ by browser. If you want to add a horizontal line for design purposes, you should use CSS.