HTML5: How to specify the value of a list item?

Last update on February 10 2024 11:42:55 (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 specify the value of a list item</title><!-- Sets the title of the document -->
</head>
<body>
<ol><!-- Begins an ordered list -->
<li value="50">HTML5 Tutorial</li><!-- Defines a list item for HTML5 Tutorial with a specified value of 50 -->
<li>CSS Tutorial</li><!-- Defines a list item for CSS Tutorial -->
<li>PHP Tutorial</li><!-- Defines a list item for PHP Tutorial -->
<li>JavaScript Tutorial</li><!-- Defines a list item for JavaScript Tutorial -->
<li>MySQL Tutorial</li><!-- Defines a list item for MySQL Tutorial -->
<li>SQL Tutorial</li><!-- Defines a list item for SQL Tutorial -->
</ol><!-- Ends the ordered 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 is an ordered list (<ol>).
Inside the ordered list, there are six list items (<li> elements) representing different tutorials.
The first list item for "HTML5 Tutorial" has a specified value of 50 using the value attribute.
The remaining list items do not have a value attribute specified, so they will default to incremental values starting from 1.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page