Theory
Theory
Comments

The ul tag, which is used to indicate an unordered list

In the new blog entry we need to mark up the list of advantages of working as a coder. Our current arsenal of text tags is small (headings and paragraphs), and they are poorly suited for marking up lists. Is there a special tag for lists?

Yes. There are several tags in HTML for marking up lists: for ordered lists, unordered lists and lists of descriptions. Our list is unordered. After all, what difference does it make to place an item in one place as opposed to another? What is the meaning of specific placement within the list?

The unordered list is marked up using the <ul> tag (which is short for “unordered list”). It is used when the element order is not important. For example, to mark up the list of links in the menu, the benefits of the product, and the ingredients that make up the product.

Only <li> (which is short for “list item”) tags can be nested directly inside the <ul> tag, which is used to indicate list elements or list items: There may be an unlimited number of items, but there shouldn’t be less than one. Let’s give an example:

<ul>
  <li>I am a list item, and I can be positioned in any place.</li>
  <li>And I also am a list item, and the order in which I am listed is also not important</li>
</ul>

By default <ul> elements are highlighted with markers of the same color as the text color.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Two. I want to become a coder</h1> <p>Today I spent the whole evening on the Internet. I read about the advantages of working as a coder. I often spent my free time watching cat videos, of course. But then I remembered something:</p>  You are helping a useful cause You can work remotely Interesting people Good salary <p>My desire to learn has dramatically increased.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

Goalscompleted

Add an unordered list <ul> to <article> after the first paragraph, and enclose all of the unmarked text in it.
Enclose the text You are helping a useful cause in the list using the element <li>,
and then you can mark up the element with the text You can work remotely.
and finally add an element with the text Interesting people.

Add the last element with the text Good salary to the list.

The ul tag, which is used to indicate an unordered list

Comments

Log in

Sign up

Restore access