HTML5 Semantics Confusion
Finally decided to have a look at HTML5 & see what all the fuss is about but have run into confusion with conflicting accounts from all over of what semantic tags to use when and where.
Can anyone tell me if this is semantically correct for HTML5 and whether there should be < figure > tags wrapped around the "Item Images").
Thanks in advance
<div>
<!-- Header/Logo -->
<header>
<div>
<h1 class="hidden">Website name</h1>
<a href="/">
<img id="Logo" src="#" alt="Website name" />
</a>
</div>
<!-- Main site nav -->
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
</header>
<!-- Item menu -->
<aside>
<ul>
<li>
<h2>ItemMenu1</h2>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</li>
<li>
<h2>ItemMenu2</h2>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</li>
</ul>
</aside>
<!-- Items -->
<section>
<ul>
<li>
<article>
<h2><a href="#">Item 1</a></h2>
<a href="#"><img src="#" alt="image of item" /></a>
<p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
<p>Price: $$$$</p>
<p>[Brief descrition..]</p>
</article>
<article>
<h2><a href="#">Item 2</a></h2>开发者_运维知识库
<a href="#"><img src="#" alt="image of item" /></a>
<p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
<p>Price: $$$$</p>
<p>[Brief descrition..]</p>
</article>
</li>
</ul>
<!-- Paging -->
<nav>
<ul>
<li><a>Prev</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>Next</a></li>
</ul>
</nav>
</section>
<footer>
<div>
<p>Copyright...</p>
<!-- Site links etc -->
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>
</footer>
</div>
You're using section
incorrectly as you haven't given it a heading. You're using it as a wrapper which is incorrect. A div
would do.
<figure>
and <figurecaption>
are used to represent content who dont fit the context, such as code-cxamples.
They can also be used to provide additional information to a topic or something.
Did you read the definition at whatwg.org?
精彩评论