HTML Academy
The ul tag, which is used to indicate an unordered list
Text markup3/21
Back to the list of tasks
  • 1. Let’s start the diary
  • 2. The ul tag, which is used to indicate an unordered list
  • 3. The ol tag, which is used to provide an ordered list
  • 4. The start and reversed attributes
  • 5. Nested lists
  • 6. The dl, dt and dd tags as well as description list
  • 7. The pre tag, which is used to designate preformatted text
  • 8. HTML entities
  • 9. The tag code, or code snippet
  • 10. Combining pre and code tags
  • 11. The tag q, which is used to format inline quotes
  • 12. The blockquote tag, which is used for calling out quotes
  • 13. The br tag, which is used to create a line break
  • 14. The sub and sup tags, which are used to indicate subscript and superscript
  • 15. The time tag, which is used to specify the date and time
  • 16. The em and i tags, which are used to attract the user’s attention
  • 17. The strong and b tags, which are used to strengthen or highlight text
  • 18. The del and ins tags, which are used to highlight changes
  • 19. The div and span tags, style containers
  • 20. Summary of “Text markup”
  • 21. Test: Marking up an article
The start and reversed attributes
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The ol tag, which is used to provide an ordered list

This entry is used to describe the to-do list. And the order in which the items in the list are carried out is important! After all, it is inconvenient to feed the cat in the dark or water the cactus from outside. Therefore, another list will prove more suitable for marking up this text fragment: the ordered list.

The <ol> tag (which is short for “ordered list”) is intended for marking up ordered lists. As the name implies, the order of the elements is really important here. Ordered lists are suitable for marking up algorithms, instructions, recipes, competition results, and so on.

The items in an ordered list are also marked up with the <li> tag. Code example:

<ol>
  <li>I am the first item</li>
  <li>I am not me if I am not the second item</li>
  <li>Am I just third after all of these years? Always!</li>
</ol>

The sequence number is always placed in front of <ol> elements by default.

Comments

  • 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 Three. My cat is offended at me.</h1> <p>Yesterday, while I was on the Internet, I again forgot to feed my cat. I hope Muffin does not find out about this and continues to give me assignments. I’ll try to make a to-do list.</p> <p>So. Things to do. They should be carried out only in the order in which they are specified!</p> <!-- Begin the list here --> Feed the cat Water the cactus Turn off the light Leave the house to run errands <p>Now I will definitely not forget to do anything.</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; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. After the second paragraph in <article>, add an ordered list <ol> and enclose all of the unmarked text in it..
    2. Add the element with the text Feed the cat to the list,
    3. then add the element with the text Water the cactus
    4. and finally add an element with the text Turn off the light.
    1. Add the last element with the text Leave the house to run errands to the list.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.