I have code :
<ul>
<li>home</li><span class="divider"> | </span>
.....
</ul>
and
<ul><li>one</li> | <li>two</li> | <li>three</li></ul>
But validator say it wrong. What should I do?
The allowed elements inside a <ul> is simply <li>:
Permitted contents
Zero or more li elements
http://www.w3.org/TR/html-markup/ul.html
If you want to add borders / piping, use CSS. Like this example (for simplicity)
<ul>
<li style="border-right:solid 1px #000;">Home</li>
<li style="border-right:solid 1px #000;">About Me</li>
</ul>
As you get more familiar with CSS, you'll find better ways to do that... and also not inline.
All tags directly beneath a <ul> tag must be <li> tags. These <li> tags can contain spans, but the <ul> itself should not.
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
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>
Can you guys please tell me that the following code is valid or invalid ? can i use div tag inside list?
<ul>
<li> Sample
<ul>
<li> Main </li>
<div>
<p> </p>
</div>
</ul>
</li>
</ul>
No, it's not valid because <div> tag is not allowed inside a <ul> element, you'll need to add it inside a <li> tag to make it valid:
<li> Main </li>
<li><div><p> </p></div></li>
I recommend you to use http://validator.w3.org/check instead of asking here in SO.
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span>
<span class="ul">
<span class="li">first</span>
<span class="li">second</span>
</span>
</a>
without <a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
I vote for option 1: Anchor + descriptive class names:
The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
Really you should have <a> tags inside each of the div, ul and li tags:
<div></div>
<ul>
<li>first</li>
<li>second</li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.
Why is the following code valid when I am using a <div> inside a <li>?
<ul>
<li class="aschild">
<div class="nav">Test</div>
</li>
</ul>
Yes you can use a div inside a li and it will validate.
<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
Inside a <li> you can have anything you could naturally put inside a <div>. They are no different in this sense.
It should be valid in HTML4, XHTML and HTML5 as well.
This is NOT valid though (so the sources you found about "no divs in lists" could refer to this situation):
<ul>
<li></li>
<div></div>
<li></li>
</ul>
So: Lists (ul, ol) can only have lis as their children. But lis can have anything as their children.
Because <li> is a block element, not an inline element like <span> or <a>.
An <li> is a block element, and will work perfectly fine with other block elements inside.
Yes, you can. As much as you want.
if you take a look with your developer tools and inspect katespade website's code you will find that you can add as many div inside a Li tag but you cannot add the tag as a child in <ul> or <ol>.
<ul>
<li> <div class="example1>
<span>lorem ipsum </span>
</div> </li>
<li> </li>
</ul>
here is an example on this katespade's web app
Katespade