In HTML you can create various types of lists: unordered (UL), ordered (OL).
These HTML lists are block-level elements.


Unordered Lists - UL

An unordered list (also called 'bulleted list') starts with a <ul> tag and ends with </ul>.
Within the list, each item is added between <li> and </li> tag.
The list items are marked with bullets.

- Example:
<h4>Example UL</h4>

<ul>
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul>

You can set three different types of bullets: disc, circle, and square. They are defined with the list-style-type CSS property, in style.
• 'disc' is the default bullet type, so you don't need to specify it.

- Example:
<h4>Example UL - circle, square</h4>

With 'circle' type:
<ul style='list-style-type:circle'>
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul><br>

With 'square' type:
<ul style='list-style-type:square'>
 <li>HTML course</li>
 <li>CSS Course</li>
 <li>PHP - MySQL</li>
</ul>

Ordered Lists - OL

An ordered list (also called 'numbered list') is a block element that begins with an <ol> tag and ends with </ol>, it displays the lists with numeric order.
The content for lists is added between <li> and </li>.
The default type of numbered list uses standard numbers.

- Example:
<h4>Example OL</h4>

<ol>
 <li>HTML lessons</li>
 <li>Ajax tutorials</li>
 <li>JavaScript course</li>
</ol>

Types of OL lists

You can specify different types of numbering by adding the type attribute to the <ol> tag, as described in the following list:

- Example:
<h4>Example OL with type</h4>

<ol type='a'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Another list, type='I':
<ol type='I'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>

Also, see this CSS tutorial, Define Custom List-item Markers, Bullets for UL, OL Lists:
coursesweb.net/css/define-custom-list-item-markers-bullets-ul-ol


The start and reversed attributes

By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used (i, I , a , A).
To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number.
The numerotation of the lists can be reversed with the reversed attribute.


In the next example there are two ordered lists, with different types, start and reversed:
<h4>Example OL with start and reversed</h4>

OL with start='3'
<ol start='3'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Another list: type='i', start='3' and reversed:
<ol type='i' start='3' reversed>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
• The <li> tag is a block-level element, you can add within it any type of content, <p>, <div>, <ul>, or other block-level elements.
Example: <li> with paragraph, and nested list:
<h4>Example nested list</h4>

<ol>
 <li><p>Here is a paragraph<br />
 A new line in the paragraph.</p></li>
 <li>HTML lessons:
 <ul type='square'>
 <li>Adding images</li>
 <li>DIV and SPAN</li>
 </ul>
 </li>
 <li>Another list item</li>
</ol>

Note, all he content of the nested <ul> ... </ul> is added within a <li> </li>.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
HTML Lists - UL, OL

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (92096)
  2. Register event handlers, Detect and Remove events (2211)
  3. Get Mouse coordinates inside a Div or an Image (10162)
  4. Add and Remove HTML elements and Content with jQuery (26258)
  5. PHP PDO - prepare and execute (7225)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (9823)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2052)
  3. Contact page - CoursesWeb (1999)
  4. Tabs effect with CSS (1996)
  5. Insert, Select and Update NULL value in MySQL (915)