HTML5: How to define a list item?

Last update on February 10 2024 11:42:00 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to define a list item</title><!-- Sets the title of the document -->
</head>
<body>
<p>An ordered list:</p><!-- Displays a paragraph -->
<ol><!-- Begins an ordered list -->
<li>HTML5</li><!-- Defines a list item for HTML5 -->
<li>CSS</li><!-- Defines a list item for CSS -->
<li>PHP</li><!-- Defines a list item for PHP -->
</ol><!-- Ends the ordered list -->
<p>An unordered list:</p><!-- Displays a paragraph -->
<ul><!-- Begins an unordered list -->
<li>HTML5</li><!-- Defines a list item for HTML5 -->
<li>CSS</li><!-- Defines a list item for CSS -->
<li>PHP</li><!-- Defines a list item for PHP -->
</ul><!-- Ends the unordered list -->

</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Inside the <body> section, there are two paragraphs (<p> elements) that serve as headers for the lists.
Following the paragraphs, there are two lists: an ordered list (<ol>) and an unordered list (<ul>).
Inside each list, there are three list items (<li> elements) representing different programming languages: HTML5, CSS, and PHP.
The ordered list displays numbered list items, while the unordered list displays bulleted list items.
Each list item contains text representing a programming language.

Live Demo:

See the Pen exercise-of-li-tag-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page