user1355300 user1355300 - 1 month ago 11
HTML Question

HTML5 aside correct use

In the following HTML syntax, should the

meta
div be inside the
header
? It just contain date and author name and should appear under heading. Also is the
aside
being used correctly or should the
figure
be used instead of
aside
?

<article class="article">
<header>Heading</header>
<div class="meta"> date and author info. </div>
<div class="wrap">
<aside class="thumbnail"> <!-- left -->
<img src="abc.jpg" />
</aside>
<div class="content"> <!-- right -->
...
</div>
</div>
</article>

Answer

Instead of

<div class="meta"> date and author info. </div>

the following would be better

<footer> date and author info. </footer>

The HTML5 spec for <footer> says:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

and also

Footers don't necessarily have to appear at the end of a section...

For <aside>, the HTML5 spec says:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

This is somewhat trickier to interpret, but I would say the the thumbnail forms an integral part of the content of the article rather than being tangentially related to it.

In fact, in the absence of data to the contrary, I don't see the need for a wrapper around the <img> element at all. Just use:

<img src="abc.jpg" class="thumbnail" alt="A B C" />

If you need a wrapper for styling purposes, use a <div>