When we say HTML list, for most developers this term can be confusing because a list can refer to various lists, even the generic list in the C# programming language, a ListBox server control, or even a ListBox HTML control. In this case, HTML lists refer to formatting text into different list formats using list style attributes. The same effect can be achieved in a different way, for example, by using a specific type of style, while some of the older attributes, such as reversed which allows you to enumerate the list in reverse order, absolutely do not work in, for example, the Microsoft Edge browser. For this reason, we will not use them in our examples.
This is the biggest complaint with HTML coding that some things change while others do not support some of the most famous and most used browsers. In the previous lesson where we started learning HTML5, check here ; you already had the opportunity to get acquainted with a few basic HTML elements that mostly make up the foundation of an HTML page. In this post, you will have the opportunity to learn how to organize information on a web page in different formats of text lists. The use of HTML lists is necessary for your text on your page to be professionally organized and readable. What distinguishes HTML lists from previous elements is that HTML lists are composed of multiple tags that work together.
HTML lists are primarily used whenever you have any enumerations in the text of a web page, but keep in mind that an HTML list can also be used for web page navigation. There will be more on this when we get to learning how to create navigation, especially one that must be acceptable for displaying the mobile version of web pages, but for now, it is necessary to master the basics of HTML5 and to know it at any time when you are awakened. For now, you should know that there are three types of HTML lists, and they are:
- Unordered lists
- Ordered lists
- Definition lists
However, you can nest all of them by putting one list inside another, even if they are different. To demonstrate how all HTML lists are used, it is best to create a web page where we will present their capabilities. Fortunately, the practical application of HTML5 is definitely simpler than the theory. Just keep in mind that in HTML5 some things are written shorter, differently, and not closing tags where required is not acceptable. In HTML, you were not required to use closed tags like </dd>, </dt>, </li>, etc. That practice is bad and it’s time to break with it.
Practical Application: Unordered HTML Lists in Modern Web
Design
Unordered HTML lists are not numbered, which means they are great when you have a list of items where numerical enumeration is not necessary. They are often used for a collection of navigation links and dropdown menus as well. Instead of numbers, items in an unordered list are distinguished by bullets such as dashes, large dots, squares, and circles. An unordered list begins with the <ul> tag and ends with a closed </ul> tag, while the same <li> and </li> tags are always used for all items, which can also contain other elements.
<ul>
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ul>
As you can see in the previous code, we have an unordered HTML list with 3 items of foreign languages. Since no style is specified for this list, the disc marker is used, which is the default for HTML unordered lists. The result is:
- English
- German
- Serbian
However, if we set the style for this ordered list to a
circle marker.
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ul>
The result is items marked with small circles:
- English
- German
- Serbian
You can also set the unordered HTML list to a square
marker to get squares instead of a circle, or to a none marker that will
display all items without any bullets.
Data Numbering: Ordered HTML Lists in Practice
An ordered list starts with the <ol> tag and ends with a closed </ol> tag, while the same <li> and </li> tags are always used for all items, as in unordered lists, which can also contain other elements. They are used for numbering items with numbers and letters. By default, they are set to decimal, and it is not necessary to adjust this if you are using the HTML ordered list by default. However, in the following code, we will also set the start attribute to 4. This means that we want our countdown to start from number 4 instead of 1.
<ol style="list-style-type:decimal" start="4">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
The result is:
4. English
5. German6. Serbian
As we have already mentioned, here you could specify the
reversed attribute to make your numbering 3, 2, 1, but Microsoft Edge web browser does not
support this and that option will not work. What you can do is display your item
numbering with Roman numerals, by setting the list property to upper-roman, or
display Roman numbering in lowercase letters by setting the list property to
lower-roman.
<ol style="list-style-type:lower-roman">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
The result is:
i. Englishii. Germaniii. Serbian
You can also list in alphabetical capital letters by
setting the list style property to upper-alpha or upper-latin; or in
lower-alpha or lower-latin lowercase letters.
Structuring Information Using HTML List Definitions
A definition list is not like other lists. It is created with 3 types of tags. The first open <dl> and closed </dl> tags indicate that the HTML list is a definition list. Then each item in the list is divided into a term with <dt> and </dt> tags and the definition of the term with <dd> and </dd> tags. It is used in cases where you need a description alongside the items.
<dl>
<dt>English</dt>
<dd>- can speak in England,
United States, Australia...</dd>
<dt>German</dt>
<dd>- can
speak in German, Austria, Switzerland...</dd>
<dt>Serbian</dt>
<dd>- can speak in Serbia, Croatia, Bosnia and Herzegovina...</dd>
</dl>
Nesting HTML lists is simple; just place the entire structure of one list into the structure of another list. But it’s best to code an entire web page dedicated to HTML lists yourself. Find the html_css_tutorial project and create a new file, name it lesson2.html document. Then enter the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Lists in HTML</title>
</head>
<body>
<h1>Lists in HTML</h1>
<!-- <p> element defines a paragraph <b> element defines a bold text -->
<p>This web page presents
all kind of lists in <b>HTML</b></p>
<h2>An Unordered List</h2>
<!-- use the HTML special chars &alt for < and > for > -->
<p>An Unordered list starts
with the <b><ul></b> tag.</p>
<!-- disc - sets the list item marker to a bullet (default) -->
<ul>
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ul>
<!-- square - sets the list item marker to a square -->
<ul style="list-style-type:
square;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ul>
<!-- none - the list item will not be marker -->
<ul style="list-style-type:
none;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ul>
<h2>An Ordered List</h2>
<!-- use the HTML special chars < for < and > for > -->
<p>An ordered list starts
with the <b><ol></b> tag.</p>
<!-- decimal - the list items will be numbered with numbers (default) -->
<ol>
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<!-- decimal with start - the list items will be numbered with numbers from
the start number -->
<ol style="list-style-type: decimal;" start="4">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<!-- upper-alpha - the
list items will be numbered with uppercase letters -->
<ol style="list-style-type:
upper-alpha;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<!-- lower-alpha - the list items will be numbered with lowercase letters -->
<ol style="list-style-type:
lower-alpha;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<!-- upper-roman - the list items will be numbered with uppercase roman numbers -->
<ol style="list-style-type:
upper-roman;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<!-- lower-roman - the list items will be numbered with lowercase roman numbers -->
<ol style="list-style-type:
lower-roman;">
<li>English</li>
<li>German</li>
<li>Serbian</li>
</ol>
<h2>A Description List</h2>
<p>The <b><dl></b> tag defines the description list, the <b><dt></b>
tag defines the name, and the <b><dd></b> tag describes each term.</p>
<dl>
<dt>English</dt>
<dd>- can speak in England,
United States, Australia...</dd>
<dt>German</dt>
<dd>-
can speak in German, Austria, Switzerland...</dd>
<dt>Serbian</dt>
<dd>- can
speak in Serbia, Croatia, Bosnia and Herzegovina...</dd>
</dl>
<h2>A Nasted List</h2>
<p>The list can be nasted.</p>
<ul>
<li>English</li>
<ul>
<li>American
English</li>
<li>British
English</li>
</ul>
<li>German</li>
<li>Serbian</li>
</ul>
<footer> <!-- can use for
information about the copyrights-->
<h5>©2023 Manuel Radovanovic</h5>
</footer>
<br/><br/><br/><br/>
</body>
</html>
Please note that in the code we used tags for the paragraph <p> and </p>, then special HTML characters < for < and > for >, the special HTML character © for copyright, and the tags <footer> and </footer> for the bottom part of the web page. When you run the mentioned HTML code in a browser, you will get the following result:
Lists in HTML
This web page presents
all kind of lists in HTML
An Unordered List
An Unordered list starts
with the <ul> tag.
- English
- German
- Serbian
- English
- German
- Serbian
- English
- German
- Serbian
An Ordered List
An ordered list starts
with the <ol> tag.
1.
English
2.
German
3.
Serbian
4.
English
5.
German
6.
Serbian
A.
English
B.
German
C.
Serbian
a.
English
b.
German
c.
Serbian
I.
English
II.
German
III.
Serbian
i.
English
ii.
German
iii.
Serbian
A Description List
The <dl> tag
defines the description list, the <dt> tag defines the
name, and the <dd> tag describes each term.
English
-
can speak in England, United States, Australia...
German
-
can speak in German, Austria, Switzerland...
Serbian
-
can speak in Serbia, Croatia, Bosnia and Herzegovina...
A Nasted List
The list can be nasted.
- English
- American English
- British English
- German
- Serbian
©2023
Manuel Radovanovic
You can see how we created all that in the
video, too.
No comments:
Post a Comment