HTML Lists
Lists are a key element of HTML structure, used to present a collection of information in an ordered or unordered way. Understanding how and when to use different types of lists is an important aspect of creating clear and easy-to-understand web pages.
Unordered Lists
Unordered lists, marked in HTML with the
<ul><li>Here's an example of an unordered list:
1<ul>
2 <li>List item</li>
3 <li>Second list item</li>
4</ul>In the code fragment above, we created a list with two items, each marked with a bullet point.
Ordered Lists
Ordered lists, marked with the
<ol>Here's an example of an ordered list:
1<ol>
2 <li>List item</li>
3 <li>Second list item</li>
4</ol>In this case, each item on the list is numbered, emphasizing their order.
Variety of Lists in HTML
It's worth noting that HTML allows for greater flexibility when creating lists. We can, for example, create nested lists, where one list is inside another. This is particularly useful when creating a "tree" type structure, e.g., a navigation menu on a page.
Additionally, for ordered lists, the type attribute allows you to change the numbering style - it can be a number (1), letter (A, a, I, i) or nothing, resulting in no numbering.
Using lists in HTML, we have many options to effectively and clearly present information on our page.
Lists in HTML are a useful tool for organizing and presenting information on a web page in a readable way. We can also nest lists within each other, creating more complex structures.
Nested Lists
Lists can be nested inside each other, creating a hierarchy or multi-level structure. This can be useful, e.g., when creating a navigation menu.
Example:
1<ul>
2 <li>Parent element 1</li>
3 <ul>
4 <li>Sub-element 1.1</li>
5 <li>Sub-element 1.2</li>
6 </ul>
7 <li>Parent element 2</li>
8</ul>Exercise: Creating HTML Lists with Information About Ancient Egypt
In this exercise, you'll use HTML lists to present various facts and information about ancient Egypt. Your task will be to create a web page that contains ordered and unordered lists, as well as nested lists, to present different aspects of the culture and history of ancient Egypt.
Step 1: Create the Basic HTML Document Structure
First, create a new HTML file and add the basic HTML document structure.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Ancient Egypt</title>
7</head>
8<body>
9 <main>
10 <!-- Place your sections here -->
11 </main>
12</body>
13</html>Step 2: Add an Unordered List of the Most Important Pharaohs
Now add a section inside the
<main>1<section>
2 <h2>Most Important Pharaohs</h2>
3 <ul>
4 <li>Cheops</li>
5 <li>Ramses II</li>
6 <li>Tutankhamun</li>
7 <li>Hatshepsut</li>
8 <li>Akhenaten</li>
9 </ul>
10</section>Step 3: Add an Ordered List of the Most Important Achievements of Ancient Egyptians
Next, add another section with an ordered list presenting the most important achievements of ancient Egyptians.
1<section>
2 <h2>Most Important Achievements of Ancient Egyptians</h2>
3 <ol>
4 <li>Building the pyramids of Giza</li>
5 <li>Development of hieroglyphic writing</li>
6 <li>Development of the solar calendar</li>
7 <li>Advances in medicine and anatomy</li>
8 <li>Creation of advanced irrigation systems</li>
9 </ol>
10</section>Step 4: Add a Nested List Presenting the Social Structure of Ancient Egypt
Finally, add a section with a nested list that will present the social structure of ancient Egypt.
1<section>
2 <h2>Social Structure of Ancient Egypt</h2>
3 <ul>
4 <li>Pharaoh
5 <ul>
6 <li>Supreme ruler</li>
7 <li>Considered a living god</li>
8 </ul>
9 </li>
10 <li>Priests
11 <ul>
12 <li>Responsible for religious rituals</li>
13 <li>Held power over temples</li>
14 </ul>
15 </li>
16 <li>Officials
17 <ul>
18 <li>Managed state administration</li>
19 <li>Responsible for tax collection</li>
20 </ul>
21 </li>
22 <li>Artisans
23 <ul>
24 <li>Created handicraft products</li>
25 <li>Engaged in trade</li>
26 </ul>
27 </li>
28 <li>Peasants
29 <ul>
30 <li>Cultivated the land</li>
31 <li>Were the foundation of the economy</li>
32 </ul>
33 </li>
34 </ul>
35</section>Result
After completing all steps, your HTML file should look like this:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Ancient Egypt</title>
7</head>
8<body>
9 <main>
10 <section>
11 <h2>Most Important Pharaohs</h2>
12 <ul>
13 <li>Cheops</li>
14 <li>Ramses II</li>
15 <li>Tutankhamun</li>
16 <li>Hatshepsut</li>
17 <li>Akhenaten</li>
18 </ul>
19 </section>
20 <section>
21 <h2>Most Important Achievements of Ancient Egyptians</h2>
22 <ol>
23 <li>Building the pyramids of Giza</li>
24 <li>Development of hieroglyphic writing</li>
25 <li>Development of the solar calendar</li>
26 <li>Advances in medicine and anatomy</li>
27 <li>Creation of advanced irrigation systems</li>
28 </ol>
29 </section>
30 <section>
31 <h2>Social Structure of Ancient Egypt</h2>
32 <ul>
33 <li>Pharaoh
34 <ul>
35 <li>Supreme ruler</li>
36 <li>Considered a living god</li>
37 </ul>
38 </li>
39 <li>Priests
40 <ul>
41 <li>Responsible for religious rituals</li>
42 <li>Held power over temples</li>
43 </ul>
44 </li>
45 <li>Officials
46 <ul>
47 <li>Managed state administration</li>
48 <li>Responsible for tax collection</li>
49 </ul>
50 </li>
51 <li>Artisans
52 <ul>
53 <li>Created handicraft products</li>
54 <li>Engaged in trade</li>
55 </ul>
56 </li>
57 <li>Peasants
58 <ul>
59 <li>Cultivated the land</li>
60 <li>Were the foundation of the economy</li>
61 </ul>
62 </li>
63 </ul>
64 </section>
65 </main>
66</body>
67</html>Now you have a complete web page with lists presenting information about ancient Egypt. Experiment further by adding more details or styling elements with CSS to improve the page's appearance.