Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
The Three List Types
- unordered list — used to group a set of related items in no particular order
- ordered list — used to group a set of related items in a specific order
- description list — used to display name/value pairs such as terms and definitions
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
In such condition if we do not need to write any ordered like 1,2,3.. or A,B,C while creating list then we use Unordered list. For creating unordered list in HTML we use <ul>, </ul> tag. In <ul> tag u is derived from unordered and l derived from list.
To list items within <ul> we use <lt> </li> tags and pass items within these tags, below we are listing syntax and example of unordered list:
Example Explained
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Job's</li>
<li>Interview Q </li>
<li>Tutorial </li>
<li>Test </li>
<li>Companies </li>
<li>News </li>
</ul>
<body>
</html>
Output
- Job's
- Interview Q
- Tutorial
- Test
- Compnies
- News
The type of Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, but you can use diffrent type attribute like - Square, Disc & Circle for example <ul type="square">
You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets
HTML Ordered Lists
Ordered (numbered) lists are used to display a list of items that should be in a specific order.
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers
Ordered HTML List - The Type Attribute
Letters -
- Lowercase ascii letters (a, b, c…)
- Uppercase ascii letters (A, B, C…).
- Lowercase classical Greek: (έ, ή, ί…)
Numbers -
- Decimal numbers (1, 2, 3…)
- Decimal numbers with leading zeros (01, 02, 03…)
- Lowercase Roman numerals (i, ii, iii…)
- Uppercase Roman numerals (I, II, III…)
- Traditional Georgian numbering (an, ban, gan…)
- Traditional Armenian numbering (mek, yerku, yerek…)
Example Explained
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Job's</li>
<li>Interview Q </li>
<li>Tutorial </li>
<li>Test </li>
<li>Companies </li>
<li>News </li>
</ol>
<body>
</html>
Output
- Job's
- Interview Q
- Tutorial
- Test
- Compnies
- News
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. but you can change the order type attribute for Example <ol type="A">
HTML Description Lists
HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
- HTML also supports description lists.
- 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, and the <dd> tag describes each term
- Description lists are flexible: you can associate more than one value with a single name, or vice versa.
Example Explained
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Job's</dt>
<dd>IT, Mechanical & Electrical Job's</dd>
<dt>Tutorial </dt>
<dd>HtML, CSS & JavaScript Tutorial </dd>
</dl>
<body>
</html>
Output
- Job's
- IT, Mechanical & Electrical Job's
- Tutorial
- HtML, CSS & JavaScript Tutorial
Nested HTML Lists
An individual list item can contain another entire list, called a nested list. It is useful for things like tables of contents that contain sub-sections
We have used the list-style-type - lower-alpha CSS property to sequence the nested list with lower-case letters instead of decimal numbers.
Nested List Example
<ol Type="A">
<li>Animal
<ul style="list-style-type:disc">
<li>Lion</li>
<li>Goat</li>
</ul>
</li>
<li>Food</li>
<li>Tree</li>
</ol>
Output
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. for example <ol start="10">
HTML list advantages
Flexibility- If you have to change the order of the list items in an ordered list, you simply move around the list item elements, when the browser renders the list, it will be properly ordered.
Styling - Using an HTML list allows you to style the list properly using CSS. The list item tags <li> are different from the other tags in your document, so you can specifically target CSS rules to them.
Semantics - HTML lists give the content the proper semantic structure. This has important benefits, such as allowing screen readers to tell users with visual impairments that they are reading a list, rather than just reading out a confusing jumble of text and numbers.
Note : List pays very important role in web designing, so try to do more practice on list. Website menu and side bars generally created by list with css style. we will learn to create menu latter