Theory
Theory
Comments

The start and reversed attributes

Order exists so that it can be broken. You decide to supplement the previous post with two more lists. But with one of them the numbering will go in the reverse order, and in the other one it will not begin with one. This is done using the start and reversedattributes on the ordered list tag.

By default, the numbering of items starts with one, and by using start you can change this starting number. The numbering of list items may also be negative.

Code example:

<ol start="3">
  <li>One</li>
  <li>Two</li>
</ol>

The reversed attribute reverses the numbering direction. This attribute does not need a value.

You can use another attribute, type, to assign different types of markers instead of the usual Arabic numerals: lowercase and uppercase Latin letters or Roman numerals. The possible values for this attribute are:

1: Decimal number;
a: Lowercase letters in the Latin alphabet;
A: Uppercase letters in the Latin alphabet;
i: Lowercase Roman numerals;
I: Uppercase Roman numerals.

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> <ol> <li>Feed the cat</li> <li>Water the cactus</li> <li>Turn off the light</li> <li>Leave the house to run errands</li> </ol> <p>I was looking for a ranking of games that were released in 2018 on the Internet. I’m not interested in them all. All I do is study. This is what I found:</p>  <ol> <li>Red Dead Redemption 2</li> <li>Detroit: Become Human</li> <li>Spider-Man</li> <li>God of War</li> </ol> <p>Now I can continue my to-do list.</p>  <ol> <li>Prepare to eat</li> <li>Play God of War</li> <li>Wash the dishes</li> <li>Go to sleep</li> </ol> <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; }

Goalscompleted

Add the reversed attribute to the second list.
The assign the start attribute with the value 5 to the third list.

The start and reversed attributes

Comments

Log in

Sign up

Restore access