W3 says:
An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
But this:
<ol>
<li>one
<li>two
<li>three
<ol>
<li>three.one
<li>three.two
</ol>
<li>four
</ol>
Appears to render fine.
I don't know if four's li is considered to "immediately follow" three's li or not because there's an ol inbetween. The spec isn't really clear -- technically the text "one" represents a TextNode so two's li doesn't really immediately follow either.
Is there actually any scenario where a closing </li> is necessary?
I've only got Chrome and Firefox installed, but they both render the above how I would expect.
As far as I'm aware, the only legal direct children of ul and ol are li so there can't be any ambiguity, right?
So, what W3C is saying is
An li element’s end tag is mandatory if the li element is immediately followed by something else than another li element or if there is more content in the parent element.
How is this possible? li Elements can only occur within ols, uls and menus.
But ols und uls allow only lis as their children.
What about menu? It allows flow content too. So there you have it:
<menu>
<li>foo</li> <!-- mandatory -->
bar
</menu>
<menu>
<li>foo</li> <!-- mandatory -->
Hello, I am text content!
</menu>
When you see the examples it is pretty obvious that omitting the end tag would give the parser no chance to determine where the li ends.
Edit: as #BoltClock points out below, script and template elements are now allowed too:
<ul> <!-- or ol or menu -->
<li>foo</li> <!-- mandatory -->
<script></script>
</ul>
Closing </li> is not optional when the LI it closes is followed by any element other than LI.
Related
How do I indent to the right an li in Bootstrap 4? I have this code but the circle bullet of the li is one character to the left of the <h6>. I got position static.
<h6>Test1</h6>
<li>Test2</li>
put your li elements inside a ul tag.
<h6>Test1</h6>
<ul>
<li>Test2</li>
</ul>
It does not make any sense to locate an <li> element right after an <h> tag. <li> elements are supposed to only be located in a list element such as <ol> or <ul>.
If you want to have a bold text just left to a <ul> list, you need to locate it in another block element (<div> for example), which with proper CSS you can locate just left to the <ul> list.
I am trying to debug my footer but I keep getting bugs like
(Element h4 not allowed as child of element ul in this context)
Can anyone explain.
I cant place the HTML because for some reason it does not work.
Probably because there are some mistakes in the code.
Link to my website is
http://www.timberlife.nl
And then inspect element at the footer of the page.
<ul>
<h4 class="footerr">SUPPORT</h4>
<br>
CONTACT
<br>
FAQ
<br>
DISCLAIMER
<br>
</ul>
It starts with this.
<h6 class="text-white copy-text">
Many thanks!
Daan
According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.
Reference: w3.org ul element
The error is thrown because your list structure is invalid. All content must be wrapped in li tags.
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, you should use a CSS file (or at least an embedded style tag) rather than inline styles:
<style>
ul li a {color: white;}
</style>
If you want to use any heading tag within ul then you should place it within li tag because any list inside ul or ol tags can be made only by li tag.
so please try this
<li><h4 class="footerr">SUPPORT</h4> </li>
This Should work
I want to have wrapped contents automatically indent according to the first line. In order to do this I have used the following HTML and CSS code:
li {
padding-left: 10px;
text-indent: 10px;
}
.Slides {
width: 20em; //Showing wrap-around
}
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<li>First line</li>
</div>
<div>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</div>
</div>
This gives me a nice indentation in case of multiple lines but only in webkit browsers. In Firefox and IE the contents are overlapping with the bullet point.
In order to check for this I have also tried wrapping the contents inside li elements. But this again gives me very different layout across browser. How can I achieve a consistent behaviour in all browsers?
Please try this. I wrapped li tags in ul. sometimes it creates issue if li's are not wrapped properly in ul's
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<ul>
<li>First line</li>
</ul>
</div>
<div>
<ul>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
</div>
</div>
Dont use the <li> element at all. Just use plain old <p> elements and style the indent purely with css. You can even use a glyphcon or css to add the bullet point back if youd like. Also in css if something works in one browser and not others, try adding vendor prefixes. Sometimes a browser dev adds features in beta, so you have to ad the vendor prefix to use them.
This really freaky thing has been happening. I have a code:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" />
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
</p>
And when I do inspect element it appears like this:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" /></p>
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
<p></p>
Because of this my ul is not at the right position (beside the pic). Please help.
<p> expects inline content, but you specified a <ul> tag which is a block element. It is not allowed there, so the browser closes the <p> element automatically before the start of <ul>.
Think about the semantics for a second: <p> is called a paragraph. A paragraph can not contain lists. Instead of a paragraph, you should use a <diV> which expects flow content, so the <ul> tag is allowed.
According to http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, P element "cannot contain block-level elements (including P itself)."
<!ELEMENT P - O (%inline;)* -- paragraph -->
It means P element can only have the inline elements inside it.
As per your html, you are using:
<p> --block element
<img..../> -- inline element which is allowed
**<ul>...</ul>** -- block element which is not allowed
</p>
Instead of P you can use the div element.
Remove p tag, you can use div tag.
Use CSS property (float: left) to img tag and ul so they will come beside each other.
I am using HTML Tidy to output pretty HTML source and as a final encoding check.
However it is taking a very simple list such as:
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
and converting it to this monstrosity:
<ul id="navigation">
<li style="list-style: none">
</li>
<li id="active">Summary
</li>
<li style="list-style: none">
</li>
<li>Upload
</li>
<li style="list-style: none">
</li>
<li>Accounts
</li>
</ul>
How do I gracefully tell it to leave my list alone?
I have searched these configuration options, however I often find they are not named intuitively or explained properly.
It's actually trying to correct your markup to make it conform to standards, your <li> tags should be around the <a> tags, not the other way around, maybe if you fix up that then it won't try to add extra items to the list.
You can remove the style part though, just modify your css to have:
ul.navigation li
{
list-style: none;
}
The only answer: give it valid markup to start with. The only legal child element of a ul is an li. An a element cannot be a child of a ul.
<ul id="navigation">
<li>Summary</li>
<li>Upload</li>
<li>Accounts</li>
</ul>
If you want the whole li to be clickable, style the a element as display: block:
#navigation li a {
display: block;
}
Your list is invalid markup; an ul element may only contain li elements. Tidy is actually applying the most sensible general approach to fixing such broken markup: it turns any non-li content to an li element for which the list bullter is suppressed.
So manually change markup like
<li>Summary</li>
to
<li>Summary</li>
which is probably what you want. This may require changes to CSS or JavaScript code, if they expect the current markup.
Move your <a> tags into <li>-s:
<li>Summary</li>