Html5 Best Practices; Section/Header/Aside/Article Elements

Do Html5 elements Aside & Nav need a header?

In HTML5 drafts, there is no requirement or recommendation that a nav or aside element shall or should have a heading. Neither is there any prohibition against headings in them.

What is “ok practice” is really a matter of opinions, with no solid basis to judge it on. The outline algorithm is rather theoretical and has got little attention from browser vendors or search engine vendors. It may be useful as authoring and maintenance tool, or an algorithm used by such tools.

Structuring HTML5 content - listView, header, footer and menu - with semantic tags

1. It's not wrong. <article> is slightly better, but list semantics and a heading (h[1-6]) element will be more useful to everyone and probably suffices.

2. Yes.

3. Directly use <header>. You sample markup is fine, except that your <nav> section appears to contain no links.

4. Yes.

5. You can. I can't comment on SEO.

Warning. W3Schools is not a good web site and the page on the sectioning elements is typically clueless. While their pages can sometimes provide an easy to follow introduction to a subject, treat nothing you read there as gospel.

Confusion about HTML5 section, article and aside element compared to div element

The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.

You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.

There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.

In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.

---

Related Topics