Lists in HTML - ProgrammerTech
Language:

Search

Lists in HTML

  • Share this:
Lists in HTML

Lists

Lists are a set of data that we create in the form of numbers, dots, or letters.

Lists are used in order to present the data list in a good way and allow building beautiful and attractive text.

List types in HTML

  1. Unordered lists are used to create an unordered list of data.
  2. Ordered lists are used to create a list of data in a specific order.
  3. Description list is used to create a list of terms and their details.

 

Ordered Lists

An ordered list is intended to display a group of items with the number of each item entered in it.

Ordered lists use the <ol> </ol> tag to tell the web browser that we want to display an ordered list.

And when we want to add items to the ordered list, we put it under the <li> </li> tag for each item, which is an abbreviation of the term (Item) and is considered an item within a list.

example 1

<h1>Site administrators from: </h1>
<ol>
	<li>Egypt</li>
	<li>Syrian</li>
	<li>Sudan</li>
</ol>

We created a URL from the <h1> tag and wrote the phrase that the webmasters are from.

We create an ordered list using the <ol> tag, and place three elements in the list with <li>.

And when you run the previous code in the browser, the output will be arranged in the form.

1-22.webp

 

The List item is used at the beginning of the line for each li item and to assign each item in the list numerically.

 

Types of numbering used with ordered lists

The type attribute is the only attribute that is used with this tag and its function is to specify the type of the symbol shown with the list items and is usually used with the start of the list <ol> tag.

You can also use it with the item tag to give it control over each item within the list and specify a different icon for each item, which are:

  1. The value A is used to show an uppercase numbering before each item.
  2. The value a is used to show a lowercase numbering before each element.
  3. The value I is used to display Roman numerals in all capital letters.
  4. The value i is used to display Roman numerals in lowercase.

Example 2

<h1> administrators: </h1>
<ul type="A">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We used the value type="A" in the example to show the English alphabet in uppercase.

2-22.webp

 

example 3

<h1> administrators: </h1>
<ul type="a">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We used the value type="a" in the example to show the English alphabet in lowercase.

3-22.webp

 

Example 4

<h1> administrators: </h1>
<ul type="I">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We used the value type="I" in the example to show Roman numerals in all uppercase letters.

4-23.webp

 

Example 5

<h1> administrators: </h1>
<ul type="i">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We used the value type="i" in the example to show Roman numerals in lowercase.

5-13.webp

 

Unordered lists

The Unordered list is created with <ul> </ul> and each item of the Unordered list is with the <li> element.

List items are marked with a black circle.

Example 6

<h1> administrators: </h1>
<ul>
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We created a URL from the <h1> tag and wrote the names of the webmasters from.

We create an unordered list with the <ul> tag, and put three items in this list with <li>.

6-11.webp

 

We note that he has concatenated the elements for us with points, unlike the previous example, it was ordered numbers.

 

Icons that can be displayed with items in unordered lists

In order to specify the type of characters that will appear before the elements, use the type attribute in the <ul> tag and pass one of the words as a value.

  • The value square is to show a square at the beginning of each item in the list.
  • The value circle for showing a circle at the beginning of each item in the list.
  • The disc value is to show a big dot at the beginning of each element and is the default value.
  • The value none for not showing an icon at the beginning of each item in the list.

Example 7

<ul type="square">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We create an unordered list with the type property and square in order to display a box at the beginning of the elements.

7-3.webp

 

Example 8

<ul type="circle">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We created an unordered list with a type property and a circle in order to display an empty circle at the beginning of the items.

8-2.webp

 

Example 9

<ul type="disc">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We create an unordered list with the type property and disc in order to display a full circle at the beginning of the elements.

9-2.webp

Example 10

<ul type="none">
	<li>Ahmed Kaissar</li>
	<li>Muhammad Alush</li>
	<li>Saja Alsadig</li>
</ul>

We created an unordered list with a type property and none in order to show nothing before the elements.

10-1.webp

 

Lists Description

Description lists are intended to display a set of terms and each term has a description, and in this type any term or description that is written is considered as an item in the list.

In order to display a list of description on a web page we use the following tags:

  • <dl> </dl> tag This is the primary tag we put in order to tell the browser that you want to display data within a description list.
  • The <dt> </dt> tag is used to add a title to what will be placed under the list.
  • The <dd> </dd> tag is used to add an explanation of the term.

Example 11

<dl>
	<dt>Admin: </dt>
	<dd>- Ahmed Kaissar</dd>
	<dd>- Muhammad Alush</dd>
	<dd>- Saja Alsadig</dd>
	<dt>From and Age: </dt>
	<dd>- Egypt 23</dd>
	<dd>- Syria 28</dd>
	<dd>- Sudan 27</dd>
</dl>

We created a description list with the <dl> tag, and then created the <dt> tag to give the list a title.

And by using the <dd> tag, we have created three elements which are the names of the owners of this site.

Then we created a second list at the bottom and the description is country and age.

11-1.webp

 


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com