I do not understand why the WC3 validator is flagging this HTML as invalid, the error it reports back is...
''Element ul not allowed as child of element span in this context. (Suppressing further errors from this subtree.)''
I'm using HTML5, and this code is for breadcrumbs.
<span class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</span>
<span> by definition is an inline element (so you use it inside a paragraph, for example), while <ul> is a block element (which is its own little chunk of space, usually with space before/after it unlike <span>).
Other people have had the same issue, and end up using <div> tags instead. See Is it possible to put a list inside a span tag?
According to the html5 recommendations the <span> element can only contain phrasing-content. The <ul> element is not in the list of phrasing content tags. The html validation engine is enforcing those rules.
You can use a <div> as the container instead.
if you style the div as 'display:inline' it should nominally conform to the rule, whilst behaving exactly like a span :)
If you're using it as a breadcrumb, it's a navigational element, so <nav> makes the most sense as the container of your <ul>. Otherwise, give the UL a class of "breadcrumb" <ul class="breadcrumb"> and style it based on its class.
USE <div>
<div class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</div>
instead of <span>
<span class="bread">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</span>
Related
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.
The W3C HTML5 spec provides a near-identical example:
Code Example:
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p>News -
Blog -
Forums</p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li>Index of all articles</li>
<li>Things sheeple need to wake up for today</li>
<li>Sheeple we have managed to wake</li>
</ul>
</nav>
</header>
...
</body>
If you're wondering about accessibility take a look here.
It is best to use a header inside the nav as it is describing the section.
Having the heading inside the <nav> container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav> for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.
You will be able to style it using:
nav h1 {
style: something funky;
}
Instead of styling all h1 elements or giving it an ID.
The first one is better because the heading should describe what to come, and is not a part of the nav. Just like h1 should not be inside p. It will probably work just fine either way though.
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
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 have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->
Having a brain freeze...
I want to do this :
<li>
<a>
<p>text</p>
<p class="x">text</p>
</a>
</li>
I know I can't. So how do I ? (No JS/jQuery etc)
Change <p> to some inline element (e.g. <span>) and give li a span a style of display: block;, I guess.
<li>
<a>
<span>text</span>
<span class="x">text</span>
</a>
</li>
You could do that in HTML(5). But support in some browsers (Firefox) is flakey. See: http://html5doctor.com/block-level-links-in-html-5/
The best way is to use naturally inline elements such as <span>s instead of block level elements inside the anchor.
This validates as XHTML 1.1:
<li>
<p>text</p>
<p class="x">text</p>
</li>
I'm assuming what you're getting at is you want the entire block of text in the list item, and maybe the entire list item, to be clickable?
First, a paragraph tag is a block level item, but an anchor tag is inherently an inline element. You can't place that inside an anchor tag, it's not semantically correct and it won't validate. Do something like this instead:
<ul class="myList">
<li>
<a href="#">
<strong>This is the title</strong>
<span>This is the link text</span>
</a>
</li>
</ul>
Assuming you want the entire area of the list item to be clickable, you can apply display:block; to the anchor tag using css. Note that if you've assigned a different height to the list item and want everything to be clickable, you'll need to set the height on the tag as well.
.myList a { display:block; }
And if you want the strong tag to break a line (your "main text" in the link)...
.myList a strong { display:block;}
Hope that helps!