How specify the starting number of an ordered HTML list (#tilPost)

I discovered an HTML attribute that I hadn’t seen before. Let me introduce you to the value attribute. 👇

Stefan Judis
@stefanjud…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

I discovered an HTML attribute that I hadn't seen before. Let me introduce you to the value attribute. 👇

Stefan Judis avatar
Stefan Judis @stefanjudis
Quick HTML tip: I just discovered that `li` elements support a `value` attribute to configure the start of an ordered list. Example showing an ordered list including a list item that defines a `value` property.
369 retweets 2714 likes Tweeted  Open Tweet

Trending Tweets often come with priceless comments. And it turned out that there are multiple ways to control the numbers of an ordered list.

Let's have a quick look!

Specify the list start using start

Manuel pointed out that the start attribute also allows you to specify the beginning of the unordered list. Ordered lists usually start at 1.

[Interactive component: visit the article to see it...]

This functionality is valuable if your listings are divided by paragraphs and additional information.

Define the list item position using value

As already mentioned; if you want to control the position of a single list item, you can also use the value attribute on a specific list item.

[Interactive component: visit the article to see it...]

This functionality is valuable if you're dealing with rankings and two entries are in the same position.

Bonus: Control list styles via CSS

And for completeness, there are also ways to control the list styles via list-style in CSS.

[Interactive component: visit the article to see it...]

Read more about list-style on MDN.

If you're going for custom list styles, don't visually change the meaning of your listing to keep your HTML accessible in RSS feeds or assistive technology.

It's so fascinating that HTML still holds surprises for me after writing it for over ten years!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2022-05-28T22:00:00+00:00) How specify the starting number of an ordered HTML list (#tilPost). Retrieved from https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/

MLA
" » How specify the starting number of an ordered HTML list (#tilPost)." Stefan Judis | Sciencx - Saturday May 28, 2022, https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday May 28, 2022 » How specify the starting number of an ordered HTML list (#tilPost)., viewed ,<https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » How specify the starting number of an ordered HTML list (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/
CHICAGO
" » How specify the starting number of an ordered HTML list (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/
IEEE
" » How specify the starting number of an ordered HTML list (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/. [Accessed: ]
rf:citation
» How specify the starting number of an ordered HTML list (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2022/05/28/how-specify-the-starting-number-of-an-ordered-html-list-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.