You are currently viewing HTML Lists | Lesson 19 HTML Tutorial
HTML Lists Image

HTML Lists | Lesson 19 HTML Tutorial

In this lesson you will learn how to build lists and how to add html tags elements inside the lists, like adding image or adding header or any html tags.

For Visual Explain:

HTML Lists Video

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Also the list items will be marked with bullets (small black circles) by default.

Example:

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

Unordered List – List Item Marker

The CSS list-style-type property is used to define the style of the list item marker like the following:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Example:

 <ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

Note: You could change the list-style-type in previous example with the element you want.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.

Fore Example:

 <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Ordered List – List Item Marker

The type attribute of the <ol> tag, defines the type of the list item marker.

TypeDescription
type=”1″The list items will be numbered with numbers (default)
type=”A”The list items will be numbered with uppercase letters
type=”a”The list items will be numbered with lowercase letters
type=”I”The list items will be numbered with uppercase roman numbers
type=”i”The list items will be numbered with lowercase roman numbers

Example:

 <ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Note: You could use any type from the previous table instead of the 1 in type attribute in the very previous code example.

HTML Description Lists

HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Fore Example:

 <dl>
  <dt>Safhatech.com</dt>
  <dd>- Safhatech.com is a technology place for helping the developer and student</dd>
  <dt>HTML</dt>
  <dd>- Hyper Text Markup Language</dd>
</dl> 

Nested HTML Lists

List can be nested (lists inside lists).

Example:

 <ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul> 

List items can contain new list, and other HTML elements, like images and links, etc.

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute and then change the value you want like i, I or A…

Example:

 <ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Note: Here the list will start form 50 then 51 and so on.


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply