HTML LEARNING PATH
2.7 Add Lists to Your Content
WHY
List elements can be used to organize content on a webpage in a number of ways, such as organizing a website's navigation menu.
HOW
An unordered list <ul> tag contains nested list <li> tags inside the <ul> tag. The list items will be marked with bullets (small black circles), however a style attribute can be added to an list tag to define the style of the bullet. An ordered list starts with the <ol> tag. Each list item within the <ol> tag starts with the <li> tag. 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.
Code sample:
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
GLOSSARY
<ul> element to define an unordered list
<ol> element to define an ordered list
<li> element to define a list item
<dl> element to define a description list
<dt> element to define the description term
<dd> element to define the description data
Lists can be nested inside lists
List items can contain other HTML elements
TIPS AND RESOURCES
PRACTICE
Add an unordered list that we will style for a navigational menu in another chapter.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="Describe the content of your web page here">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Your Name">
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
<section>
<h1>This is the heading</h1>
<p><img src="url" alt="some_text"></p>
<p>This is the paragraph content. <a href="http://www.google.com">Search Google.com</a>
</p>
</section>
</body>
</html>
Save your file.