Is there a way in HTML 5 to have a list with ties for some of the positions? Something like this:
Rankings
-----------
1. Sam
1. Ben
3. Susan
4. Chris
number 1 had to repeat because there was a tie, then the list skips to number 3. The 1 to the left of Ben could disappear too.
You can use the value attribute for the purpose:
<ol>
<li>Sam
<li value=1>Ben
<li value=3>Susan
<li>Chris
</ol>
To make the number disappear, you would use CSS, e.g.
<li style="list-style-type: none">Ben
Or, how about an html5 list that starts with lowercase alpha lettering and moves to a nested list of lowercase roman numberals. It should go something like this:
<ol type="a">
<li>This item one</li>
<li>Item two
<ol>
<li type="i">First sub paragraph of item 2</li>
<li>Second sub paragraph of item 2</li>
<li>Third sub paragraph of item 2</li>
</ol>
</li>
<li>Item 3</li>
</ol>
Related
HTML Code:
<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Outputs:
1.Item 1
2.Item 2
3.Item 3
Question:
When we implement some internationalization techniques for language support like i18n library, Do the numbers get covered as well when say it gets translated to a language like Arabic?
Imagine I have a flat list that is too long, so I will show only a few items and "last item" is "more button".
Any hints on how to make it accessible for people with readers and also not affect SEO?
Because list is flat, there is no option with expandable nested nodes https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions#Example_2:_Collapsing_and_expanding_subtrees_of_a_tree
I don't want to split the list into two independent blocks with lists and break continuity.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li><button type="button">Show more</button></li>
<li hidden>Item 6</li>
<li hidden>Item 7</li>
<li hidden>Item 8</li>
<li hidden>Item 9</li>
...
</ul>
After clicking on Show more button, hidden items will be shown and button removed from DOM.
Any simple ideas? I have yet only complex ideas which is not ideal.
EDIT 2021-09-08
I thought about it and I think it is able to do it in a different way. Make all list items accessible for assistive technologies and visible for SEO.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li role="none" aria-hidden="true"><button type="button">Show more</button></li>
<li class="clip-hidden">Item 6</li>
<li class="clip-hidden">Item 7</li>
<li class="clip-hidden">Item 8</li>
<li class="clip-hidden">Item 9</li>
...
</ul>
Button onClick event will remove the whole <li> with role="none". Tab index will stay in the area, so if <a> is a child of <li>, then the next item will be focused on user action.
Is there any potential issues with role="none"/aria-hidden="true" for UL in assestive technologies/SEO?
Fortunately, search engines are nowadays trying to base their rating on what users will perceive. If users click on a search result promising "Item 6", and then they don't see this item, they would turn around and perceive the search result as misleading. Hence, hidden contents are generally rated lower or not at all, and you will affect SEO by hiding items.
I do not have insights into how Google currently would be able to determine expandable contents, but your chances are definitely better when you are doing it in an accessible way:
If you stick to the idea of hiding these contents, I believe the best option here would be to apply the disclosure pattern (show/hide) and to not remove the button.
If you do remove the button, you at least need to set focus either on the list, or on the first new list item, to ensure the user doesn't lose context.
<li>Item 5</li>
<li tabindex="-1" id="item6">Item 6</li>
button.onclick = () => { showMore(); item6.focus() }
One function of lists like <ul> is to tell screen reader users the total number of items in this list. Since you change this number on button click, it might be useful to add an accessible name to the list, which announces the total number like <ul aria-label="9 items"> or the like.
Generally it would be good for usability if you would tell the user how many items they can expect before clicking on the button.
<button aria-expanded="false">Show 4 more</button>
This question already has an answer here:
why <li> is kept open without a </li> html nested lists [duplicate]
(1 answer)
Closed 7 years ago.
So after all the searching I've done for answers i came across
http://www.w3.org/wiki/HTML_lists and it has an example that tells me its nessasry but..
It does not explain the reasons that you would NEED or Want to do this in your list.
If you take a look at the <--- arrows I've created it points out what I'm confused about.
The list way at the bottom is the way that i USED to think it was done.
The list below is the example i need someone to explain.
BTW why is it when i put both of these in JSFiddle that they come up the same??
<ol>
<li>Chapter One <----------
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li> <----------------
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>
<ol>
<li>Chapter One</li>
<ol>
<li>Section One</li>
<li>Section Two</li>
<li>Section Three</li>
</ol>
<li>Chapter Two</li>
<li>Chapter Three</li>
</ol>
The top option is correct HTML. The other is not. The ol and ul tags should only have li children. (a list should only have list items as children which in turn have the content).
The fact that both work is probably leniency on the part of the browsers rather than the fact that they are both correct. (See the link that you sent for reference, particularly the section on nesting lists). Also see this post on SO for more information on a similar question.
For a list of portfolio-items, which all have a year, I am assuming an ordered list is the way to go semantically since it is a list ordered by year. However, I don't want the value to be a number starting at 1, but the year in which the item was created. To reach this result I wrote the following.
<ol>
<li value="2015">Last made item</li>
<li value="2015">Item before that</li>
<li value="2014">Earliest item</li>
</ol>
However, this
reverses the natural order of <ol>'s;
Uses the same marker multiple times;
so I would think this isn't exactly the best way to accomplish this. So I would like to know:
Do you have any suggestions on how to do improve this?
Are there any more reasons why this should not be done this way?
Edit: Please note the list has already been sorted, but I want the marker to be the year in which the item was created. This happens using the method mentioned earlier (see this Fiddle, too), but I'm doubting this is the best way to go, semantically.
1. Do you have any suggestions on how to do improve this?
Alternative A
A good alternative would be a structure like this:
<article>
<time datetime="2015">2015</time>
<h1>Last made item</h1>
<p>Description</p>
</article>
<article>
<time datetime="2015">2015</time>
<h1>Item before that</h1>
<p>Description</p>
</article>
<!-- etc. -->
This assumes the items in the list could be representable as a "independent item of content" (W3C specification) and a portfolio-item, which was the type of item in my question, meets this specification.
Alternative B
<ol>
<li>
<time datetime="2015">2015</time> Last made item
</li>
<li>
<time datetime="2015">2015</time> Item before that
</li>
<!-- etc. -->
</ol>
With CSS you could remove the marker if desirable. Thanks to TotempaaltJ for this alternative.
Either way the year is now machine readable as being time, see MDN.
This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar.
Read Bruce Lawson's post on the time tag to see this datetime notation works/is allowed.
Now, “fuzzy dates” are possible:
<time datetime="1905"> means the year 1905
2. Are there any more reasons why this should not be done this way?
When using <li value="year"> you're losing the meaning of the number as being a year.
Other thoughts
#Michael_B's answer gave me more insight into the meaning of <ol> and <ul> and #tibzon gave an example with the reversed attribute of an ordered list, see his fiddle.
tag is not going to do any sorting algorithm for you. HTML is a markup language which is only used for displayed purpose. is only used for a order-list and you have to do the ordering your self.
If you content is generated using a backend language, then you can use the backend language to do the sorting algorithm and print whatever number you want in front. And since you don't want the number starting with 1, I would suggest you using instead.
For example, if you are using PHP for the backend language, you can use the following code:
echo "<li>".$year." - $content."</li>";
I am not sure your sorting algorithm so can't help with that. Hope this help.
If you want to create an ordered list in HTML and specify a starting number other than 1, you can use the start attribute in the ol tag.
<ol start="2014">
<li>Last made item</li>
<li>Item before that</li>
<li>Earliest item</li>
</ol>
Here's a DEMO.
UPDATE
Based on your revised question and new comments, I see that your focus is primarily on the semantics of the code. Specifically, is this code...
<ol>
<li value="2015">Last made item</li>
<li value="2015">Item before that</li>
<li value="2014">Earliest item</li>
</ol>
... semantically correct?
The answer is yes. Semantically, you're totally fine.
Features of the HTML Ordered List <ol>
An ordered list (ol) simply means the order of the list matters, whereas in an unordered list (ul) the order of each list item is unimportant, and each list item can be sorted randomly because the order doesn't matter.
Here's what the HTML5 spec says about ordered lists:
The ol element represents a list of items, where the items have been
intentionally ordered, such that changing the order would change the
meaning of the document.
Here's how MDN puts it:
The <ol> and <ul> both represent a list of items. They differ in the
way that, with the <ol> element, the order is meaningful. As a rule of
thumb to determine which one to use, try changing the order of the
list items; if the meaning is changed, the <ol> element should be
used, else the <ul> is adequate.
Here's what the HTML5 spec doesn't say:
It doesn't say the numbers or letters marking each line item have to be numbers or letters. They don't.
It doesn't say the numbers or letters marking each line item have to be in chronological order. They don't.
It doesn't even say that each line item must have a number, letter or other marker. It doesn't. It can be left blank (see CSS list-style-type: none).
These examples, where the order of the list has meaning, are valid and semantically correct HTML.
<ol>
<li value="2025">Portfolio 1</li>
<li value="2010">Portfolio 2</li>
<li value="1999">Portfolio 3</li>
<li value="2005">Portfolio 4</li>
<li value="2015">Portfolio 5</li>
<li value="2014">Portfolio 6</li>
</ol>
<ol type="a" reversed>
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
<li>Portfolio 6</li>
</ol>
<ol style="list-style-type: none;">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
<li>Portfolio 6</li>
</ol>
Run examples in Fiddle
The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE:, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.
So which of these ways is the correct way to write an HTML list?
Option 1: the nested <ul> is a child of the parent <ul>
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
Option 2: the nested <ul> is a child of the <li> it belongs in
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Option 2 is correct.
The nested list should be inside a <li> element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol.
The description list (HTML5 dl) is similar,
but allows both dt and dd elements.
More Notes:
dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).
Official W3C link (updated).
Option 2
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
Nesting Lists - UL
Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.
If you validate, option 1 comes up as an error in html 5 -- credit: user3272456
Correct: <ul> as child of <li>
The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
W3C Standard for Nesting Lists
A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:
Chapter One
Section One
Section Two
Section Three
Chapter Two
Chapter Three
The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:
<ol>
<li>Chapter One
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>
Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website.
Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages.
If you validate , option 1 comes up as an error in html 5, so option 2 is correct.
I prefer option two because it clearly shows the list item as the possessor of that nested list. I would always lean towards semantically sound HTML.
Have you thought about using the TAG "dt" instead of "ul" for nesting lists? It's inherit style and structure allow you to have a title per section and it automatically tabulates the content that goes inside.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
VS
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
What's not mentioned here is that option 1 allows you arbitrarily deep nesting of lists.
This shouldn't matter if you control the content/css, but if you're making a rich text editor it comes in handy.
For example, gmail, inbox, and evernote all allow creating lists like this:
With option 2 you cannot do that (you'll have an extra list item), with option 1, you can.