I need to divide into groups several <li> elements in a list, is it possible?
(I know I an give each element different class names/separate into different <ul>)
Have you considered nested UL's? I believe this would validate:
<UL>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
</UL>
Your CSS trick was my first guess; too bad you can't use that.
According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul> is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule
You might tweak the appearance of the list items using CSS, by assigning different class values to the <li> elements.
<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:
<ul class="pizza-toppings">
<li class="meat">pepperoni</li>
<li class="meat">bacon</li>
<li class="vegetarian">cheese</li>
<li class="vegetarian vegan">mushrooms</li>
<li class="vegetarian vegan">onions</li>
</ul>
Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.
I believe your only options are the ones you've already identified, multiple lists or via classes, since for an li to be in the list defined by a ul or an ol, it must be the immediate child of that ul/ol (reference).
If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).
If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.html or explained also here : http://www.communitymx.com/content/article.cfm?page=2&cid=27F87
Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.
Related
I’m adding a thematic break inside a unordered list and I’m wondering what is the correct way to do that that will keep the list accessible and semantically correct.
What I would like to do would look something like this:
<ul>
<li>These</li>
<li>Items</li>
<li>Are of</li>
<li>One kind</li>
<hr />
<li>But these</li>
<li>Are of</li>
<li>Another kind</li>
</ul>
However the <hr> element is not allowed as a child of <ul> even though it is semantically correct as a thematic break in the list items.
Another option would be to include the <hr> inside an extraneous <li>:
<li><hr /></li>
However that would be lying about the number of list items. I only have 7 items in the example above, but this would announce 8.
My third option would be to change the role of the <li> to separator:
<li role="separator"></li>
This both semantically correct and allowed in the spec, but I’m wondering if this is accessible. I.e. will assistive technology announce the correct number of items in the list and convey the thematic break among the list items.
Personally I would break it into 2 lists, perhaps with a surrounding one to keep them semantical related.
<ul>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<ul>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element.
Let's say I have the following code and for example:
<ul class="nav">
<li class="nav__list"><a href="#" class="nav__link>Home</a></li>
<li class="nav__list"><a href="#" class="nav__link>Services</a></li>
</ul>
I don't want to apply CSS to the <li> elements.
So, in that case, do I need to use the element name for the <li> tag. i.e. <li class="nav__list">...</li> ?
Can I just use the element name for the anchor tag without giving element name nav__list to the <li> element?
Here is what I am thinking to do because I don't want to apply styles to the CSS to <li>:
<ul class="nav">
<li><a href="#" class="nav__link>Home</a></li>
<li><a href="#" class="nav__link>Services</a></li>
</ul>
first of all, you should have to follow BEM most of the developer followers BEM only because BEM is good at the naming convention and it's shows the standard naming convention for coding. it depends on you if you want to use BEM you can use or else it's your wish but I suggest you follow BEM it's good in standard.
you can use this
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
as well as this one
<ul class="nav">
<li></li>
<li></li>
</ul>
now you don't want to give style to li but in future client say you to give style to li that time what you will do again you will change the code so you have to use this below HTML code
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
How would I go about sanitizing nested lists away once a user submits some HTML markup.
The list is created with execCommand('insertUnorderedList',false,null)
For some reason, firefox will nest lists when this is used on a line within a li while other browsers simply remove the list (Which is what I want).
I would like to remove the nesting to prevent browser inconsistencies with the submitted html.
example:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
I would like to remove the inner ul to get
<ul>
<li>
</li>
</ul>
EDIT: This is user input I need to sanitize.
$(function(){
$('li ul').remove();
})
The HTML 4 spec treats the following as a deprecated example (search for "DEPRECATED EXAMPLE"):
<UL>
<LI> ... Level one, number one...
<OL>
<LI> ... Level two, number one...
<LI> ... Level two, number two...
<OL start="10">
<LI> ... Level three, number one...
</OL>
<LI> ... Level two, number three...
</OL>
<LI> ... Level one, number two...
</UL>
Why is this example deprecated?
The start attribute is deprecated in HTML 4 (it is un-deprecated in HTML 5). Everything else about the example is fine.
The spec details the proper way to nest ul and ol elements. They must be encased in an li element, as follows:
<ul>
<li>
<ol>
<li>Hello there</li>
</ol>
</li>
</ul>
However in your example, the lists are not wrapped in an li tag, meaning that it would fail HTML validation.
I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.
Any ideas?
I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.
I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible
eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">
<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
<li class="gameOne>
<ol class="teams">
<li class="home">Teamname1</li>
<li class="visitors">Teamname2</li>
</ol>
</li>
</ul>
</li>
<li id="roundTwo">
</li>
<li id=final">
</li>
</ol>