List Tags in HTML with Example Images
(feat. Visual Studio Code)
Today's Contents:
• Introduction
• Types and Example Images: · < ol > · < ul > · < dl >
"💬I am running it in Visual Studio Code."
Hello, Radiant Guys! How are you doing? Today, we will learn about list tags in HTML.
| Introduction
In HTML, list tags help organize content into lists on a web page. There are three main types of list tags. Each type of list tags helps organize information differently, making it easier to read and understand.
| Types
| 1. Ordered List ( < ol > ) & < li >
The < ol > tag is used when the order of the items matters and each item is numbered automatically. It is especially useful when creating a step-by-step guide or ranking list in web design. The code example is as follows.
Here is my text
HTML
<ol>
<li>Wake up</li>
<li>Brush your teeth</li>
<li>Drink water</li>
</ol>
On a web page, it looks like the image below. You can see that each item is automatically numbered.
No tags should be inserted between the <ol> tag and the <li> tag. And No tags can be inserted between <li> tags as well.
| 2. Unordered List ( < ul > ) & < li >
The < ul > tag is used when the order of the items is not important. Each item is automatically marked with a bullet (•). It is useful for displaying a grocery list or a list of features. The image below is an example of the code.
Here is my text
HTML
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Carrot</li>
</ul>
On a web page, it looks like the image below. You can see that bullets are automatically generated along with the items listed on the web.
At this time, you can also create an image list just like you did with the text list. Firstly, enter the image file name to be inserted between the <li> tags in the code editor. I input two image files. See the image4 below.
The result displayed on the web page is as follows.
| 3. Descriptive List ( < dl > ) & < dt > < dd >
The < dl >tag is used to create a list with terms and their descriptions. Each item has a term ( <dt> ) and a description ( <dd> ). It is useful for displaying a glossary or FAQ sections. The code example is below.
Here is my textHTML
<dl>
<dt>HTML</dt>
<dd>A language used to create web pages.</dd>
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
</dl>
The image below shows how the < dl > tag is applied in the code editor.
The result, on the web page, looks like the image7 below.
<dd > tags may be inserted multiple times depending on the case in the code editor.
Congratulations (╹ڡ╹ )
Today, we learned about the meaning and usage of HTML List tags. I think it will be very useful when styling web pages. I am really happy to share today's post with you. Then, I will meet you again next time with another interesting topic about HTML.
