Search code examples
htmlseosemantic-markupgraphical-logohtml-heading

HTML5 outline – page header with heading arround the logo

I've been wondering whats the best practice for using a heading tag arround my logo on my website, especially with HTML5 sectioning tags.

I've read on many website and forums that I should do the following, if I want to add a heading arround my logo:

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h1>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h1>
            </header>
            <div id="inner-wrapper">
                [...]
            </div>
        </div>
    </body>
</html>

But now, every page on my website has as its main title the text specified on the logo's alt attribute, which I could imagine, is not ideal. I mean, the H1 tag is intended to provide the «main topic of the document», but that's most of the time not the text I specified on the logo's alt tag.
However, if the logo's alt tag contains the name of a company (because it's the comapanys logo), I would like to have it somewere in a heading (to give it some relevance and importance), just not in the h1 heading.

Do you think, the following is a valid solution for this problem:

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h2>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h2>
            </header>
            <div id="inner-wrapper">
                <article>
                    <h1>Main topic</h1>
                </article>
            </div>
        </div>
    </body>
</html>
Solution

  • Both snippets are semantically the same. If using sectioning elements, the heading ranks often (but not always) don’t matter anymore.

    You can test it yourself, check these two snippets in an HTML5 outliner (e.g., in this online demo):

    <body>
  <h1>document heading</h1>
  <article>
    <h2>main content heading</h2>
  </article>
</body>

    <body>
  <h2>document heading</h2>
  <article>
    <h1>main content heading</h1>
  </article>
</body>

    They produce the same outline:

    1. document heading
   1. main content heading

    However, the HTML5 specification encourages authors to use heading elements of the correct rank, so you should stick with the first snippet.
    The HTML5 spec does not define that the (first) h1 element would be especially important or that it should be used for the "main topic" of the document. The spec defines the rank, not importance.

    I think you should use a heading for the logo if this logo represents the site (which is typically the case), and it makes sense to have this as the first heading (i.e., the heading of the sectioning root body), and the following sections should be in scope of it.