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:
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.
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Unordered List – List Item Marker
list-style-type property is used to define the style of the list item marker like the following:
|disc||Sets the list item marker to a bullet (default)|
|circle||Sets the list item marker to a circle|
|square||Sets the list item marker to a square|
|none||The list items will not be marked|
<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.
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered List – List Item Marker
type attribute of the
<ol> tag, defines the type of the list item marker.
|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|
<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.
<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).
<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…
<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/