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
Related
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.
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.
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-->
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>
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>