Reputation: 611
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>
Upvotes: 0
Views: 289
Reputation: 18870
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.
Upvotes: 2
Reputation: 17002
<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?
Upvotes: 1