HTML5 Lists
HTML5 Lists
Web developers use HTML5 Lists to display a list of related items in an organized way. In this way, you make your content easily readable and prevent your viewer from getting exhausted with your content.
Unordered HTML5 List
Unordered HTML5 lists are represented with <ul> tag. Each item in the <ul> element begins with a <li> element.
The browser will place small black circles around every list item.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Lists </title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>ES6</li>
<li>C</li>
<li>C++</li>
</ul>
</body>
</html>
The output of this code will be
Ordered HTML5 Lists
Ordered lists are defined with a <ol> tag. Each list item in an ordered list is represented with <li> element. The browser will, by default, add numbers to the list item.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Lists </title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>ES6</li>
<li>C</li>
<li>C++</li>
</ol>
</body>
</html>
The output of this code will be
HTML Description Lists
Apart from ordered and unordered lists, HTML5 also supports a description list. A description list element represents a list of terms along with the definition of each term.
The <dl> tag represents description list and it contains <dt> tag that specifies the term name and <dd> tag that describes each term separately.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Lists </title>
</head>
<body>
<h1> A Description List</h1>
<dl>
<dt>HTML</dt>
<dd> - Hpertext Markup Language that was developed by Tim Berner Leed</dd>
<dt>CSS</dt>
<dd> - CSS decorates HTML elements</dd>
</dl>
</body>
</html>
The output of this code will be
Key Takeaways
<ul>tag specifies unordered lists<ol>element displays ordered list<li>displays a list item<dl>specifies description list<dt>specifies description term<dl>explains each term in the description list
To learn more about lists, read its documentation.
