HTML5 tag order

Question

Does it matter which order you write HTML5 tags in?

For example could nav be written before header or section before nav?

I would say yes because the tag itself indicates what it is not the order.

Interested to hear what other people think, especially in terms of SEO.

Answer 1

could nav be written before header or section before nav?

Yes. That’s one of the improvements of HTML5: thanks to sectioning elements and the outlining algorithm, we don’t have to rely on headings alone anymore (see examples below).

However, if you don’t always (if appropriate) use sectioning elements and header/footer, the order can be important in some cases (like it’s the case in HTML 4.01).

The SEO aspect is a totally different question, and can’t be answered in general, as there are countless search engines and they might change their interpretation daily. A better place might be Webmasters SE.

---

The following examples create the same document outlines:

<article id="example-1">
  <nav>…</nav> <!-- before the article heading -->
  <h1>My article</h1>
  <h2>Foo is great</h2>
  <p>…</p>
  <h2>Bar, too</h2>
  <p>…</p>
</article>

<article id="example-2">
  <h1>My article</h1>
  <nav>…</nav> <!-- after the article heading -->
  <h2>Foo is great</h2>
  <p>…</p>
  <h2>Bar, too</h2>
  <p>…</p>
</article>

The corresponding outline is:

1. "My article" (article, h1)
  1.1 untitled (nav, no heading)
  1.2 "Foo is great" (implicit section; h2)
  1.3 "Bar, too" (implicit section; h2)

This example creates a different document outline, but the document meaning (or maybe better, essence) is the same:

<article id="example-3">
  <h1>My article</h1>
  <h2>Foo is great</h2>
  <p>…</p>
  <h2>Bar, too</h2>
  <p>…</p>
  <!-- article’s end --> <nav>…</nav>
</article>

The outline would be:

1. "My article" (article, h1)
  1.1 "Foo is great" (implicit section; h2)
  1.2 "Bar, too" (implicit section; h2)
  1.3 untitled (nav, no heading)

As long as you don’t nest the nav in another sectioning element, it can appear anywhere in this article.

---

Apart from header/footer and sectioning elements, the order (well, the content order) is meaningful, of course.

Obvious examples:

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

<p>Then I danced.</p>
<p>Then I woke up.</p>

<h4>Noodle soup</h4>
<h3>Dreams</h3>

etc.