Is it semantically incorrect to place <h2> tags between <li> tags?
I was planning to do something like this:
<ul class="menu">
<li><h2>Contact</h2></li>
<li>my email</li>
<li>my phone</li>
</ul>
Is it semantically incorrect (or a bad practice?)
If the answer is yes, should I do this instead?
<ul class="menu">
<li><strong>Contact</strong>&开发者_C百科lt;/li>
<li>my email</li>
<li>my phone</li>
</ul>
(I can't place just a heading tag, since there are not divs to group them):
<div id="branding">
<h1>
<ul class="menu">
<ul class="menu">
<ul class="menu serif">
<ul id="lang">
</div>
According to the W3C Validator using an <h2>
tag inside a <li>
tag is perfectly valid. This is much preferred ver using a <strong>
tag with styling as this communicates the semantic intention of the text (and consequently helps with SEO).
Is there a particular reason to put "Contact" inside a li
? It seems like it's a header to the list rather than a part of the list, so I'd do:
<h2>Contact</h2>
<ul>
<li>my email</li>
<li>my phone</li>
</ul>
Yes, It can be used as li is a block element by default. Nesting block elements under the block elements are valid and the approach using heading tags such as h2, h3 etc. inside the li tag makes codes much more readable. Here is an example:
<ul class="list-unstyled row">
<li class="col-md-6">
<h3>BRANDING AND IDENTITY</h3>
<p>Quisque rhoncus euismod pulvinar. Nulla non arcu at lectus. Vestibulum velit.</p>
</li>
<li class="col-md-6">
<h3>UI/UX AND GRAPHIC DESIGN</h3>
<p>Quisque rhoncus euismod pulvinar. Nulla non arcu at lectus. Vestibulum velit.</p>
</li>
<li class="col-md-6">
<h3>MULTIMEDIA PRODUCTION</h3>
<p>Quisque rhoncus euismod pulvinar. Nulla non arcu at lectus. Vestibulum velit.</p>
</li>
<li class="col-md-6">
<h3>WEB AND SOFTWARE DEVELOPMENT</h3>
<p>Quisque rhoncus euismod pulvinar. Nulla non arcu at lectus. Vestibulum velit.</p>
</li>
</ul>
精彩评论