Quote:
Originally Posted by LearningCoder
Thanks for your reply. I have given my list items a style of display: inline so that they display horizontally. I have seen many examples of this when looking at CSS Menu's which you can download from sites.
|
This is invalid in terms of HTML standards. First of all, a simple list consists of two elements,
ul/
ol to denote that something is a list (unordered or ordered), and
li to mark up every distinct item in this list. Therefore it is a
requirement that list items must be direct children of the list element. There can’t be anything else as direct children of
ul/
ol.
Code:
<!-- correct -->
<ul>
<li></li>
<li></li>
</ul>
<!-- wrong -->
<ul>
<div><li></li></div>
<a></a>
</ul>
Inside the list items you can put whatever elements you like but you can’t put anything you like directly inside
ul or
ol. This is a fact defined by the Word Wide Web Consortium as HTML standards specification. If you have seen it otherwise on websites they are wrong (and I’m wondering where you have seen that).
Basic rule of thumb: Inline elements can go into block-level elements but not vice versa. And it doesn’t matter if you
style block-level elements to look and behave like inline elements, intrinsically, they are block-level elements and an HTML validator will throw an error if they are found inside an inline element.