Question

Let’s say you want to use a <header> tag for the header part of your site.

But currently your header is made from 3 elements (because of design-related reasons), like:

<div id="header-wrap">
  <div id="header">
    <div id="header-content">

      ...

    </div>
  </div>
</div>

So which one of these DIVs should be replaced with <header> ? And does it matter?

Answer 1

A purpose of HTML5’s new tags is to add semantic meaning to your document. On the other hand, generic elements like <div> have been preserved precisely because they have no semantic meaning. They are ideal for adding visual structure without impacting the semantic structure.

The <header> element should envelop the semantic header. I would venture to say it’s most likely the outermost element that should be <header> since all elements involved clearly exist to support the header in some fashion, but only you know the semantic meaning of your document best, so you can best answer specifically.