List Item Element Tutorial

<li>

The li element represents a single line in a list which may be Ordered Lists, Unordered Lists, Directory Lists and Menu Lists.

The remarkable aspect of this element is that it is classified as having an text-level content model and a block-level content model. Therefore, the content may be one single line of text, i.e., text-level content, or, it may act as a block-level container populated with other elements, e.g., h3 and p.

Start tag:
<li>
End tag:
</li>
Example [Basic (Unordered List/Text-Level)]:

Three tutorials previously seen,

Code [HTML]:

<p class="lacksLeddingBottom">Three tutorials previously seen,</p>
<ul class="lacksLeddingTop leddingBottom">
<li><a href="/tutorials/css-tutorials/css-background-color-for-layout-corrections"> »
How to use CSS Background-Color for Layout Corrections</a></li>
<li><a href="/tutorials/css-tutorials/a-1957-typographic-composition-with-css"> »
A 1957 Typographic Composition with <abbr>CSS</abbr></a></li>
<li><a href="/tutorials/css-tutorials/css-typography-for-an-1855-broadside"> »
How to use <abbr>CSS</abbr> Typography for a Broadside from 1855</a></li>
</ul>
Example [Semantic (Ordered List/Block-Level)]:

Three tutorials previously seen,

  1. How to use CSS Background-Color for Layout Corrections

    How to use CSS background-color for the correction of faulty layouts when source code reading fails.
    Read this ►

  2. A 1957 Typographic Composition with CSS

    A 1957 typography style rendered with CSS styles including the forgotten and spotty-supported attribute, "display:run-in".
    Read this ►

  3. How to use CSS Typography for a Broadside from 1855

    A tutorial on how to use broadsides as inspiration when practicing CSS usage for typographical elements including the proper use of images for typography.
    Read this ►

Code [HTML]:

<p>Three tutorials previously seen,</p>
<ol>
<li>
<h3 class="lacksLeddingBottom"><a href="/tutorials/css-tutorials/css-background-color-for-layout-corrections" »
rel="bookmark">How to use <abbr>CSS</abbr> Background-Color for Layout Corrections</a></h3>
<p class="lacksLeddingTop marginLeftTwenty">How to use CSS background-color for the correction of faulty »
layouts when source code reading fails.<br>
<a href="/tutorials/css-tutorials/css-background-color-for-layout-corrections">Read this</a> ►</p>
</li>
<li>
<h3 class="lacksLeddingBottom"><a href="/tutorials/css-tutorials/a-1957-typographic-composition-with-css" »
rel="bookmark">A 1957 Typographic Composition with <abbr>CSS</abbr></a></h3>
<p class="lacksLeddingTop marginLeftTwenty">A 1957 typography style rendered with CSS styles including » 
the forgotten and spotty-supported attribute, "display:run-in".<br>
<a href="/tutorials/css-tutorials/a-1957-typographic-composition-with-css">Read this</a> ►</p>
</li>
<li>
<h3 class="lacksLeddingBottom"><a href="/tutorials/css-tutorials/css-typography-for-an-1855-broadside" »
rel="bookmark">How to use <abbr>CSS</abbr> Typography for a Broadside from 1855</a></h3>
<p class="lacksLeddingTop marginLeftTwenty">A tutorial on how to use broadsides as inspiration when »
practicing <abbr>CSS</abbr> usage for typographical elements including the proper use of images for »
typography.<br>
<a href="/tutorials/css-tutorials/css-typography-for-an-1855-broadside">Read this</a> ►</p>
</li>
</ol>

[Note: HTML 5 allows the use of the value attribute only when used in the Ordered List (OL).]

Element-Type:
Flow
Attributes:

</li>