Using <h1> on website name in HTML5

Asked 16/2, 2013 at 16:59 Answered 17/2, 2013 at 10:39

How to properly markup the title of a site in HTML5? Usually I markup a website's name with:

<h1>
    <a href=#>Website Name</a>
</h1>

Recently I've come across with the HTML5 Document Outlining Algorithm. I have also read that it seems like marking your site's name in h1 tag don't make sense, since every page probably will have different main heading (h1), in addition to the website name.

What if let's say on Facebook, if the markup of the Facebook's logo/title is wrapped in <h1> tag. Then if every post is wrapped in <article> tags. For example:

<article class="post">
    <h5 class="post-header">
         <a href="#">Someone has shared Blah Blah's photo</a>
    </h5>
     <div class="post-body">...</div>
</article>

I think the document outline would be

Facebook

1.1 Someone has shared Blah Blah's photo

1.2 Other Posts

1.3 Other Posts

Is that okay?

Farrish answered 16/2, 2013 at 16:59 Comment(6)

check this youtube.com/watch?v=GIn5qJKU8VM – Antisepsis 16/2, 2013 at 17:1

I would sort of agree depending on how you are using sectioning. The exact same h1 on every page could be bad. However the way sectioning works with HTML5 it might be doable. Just check your outline in an HTML5 outliner. – Prosecute 16/2, 2013 at 17:1

Our SEO Expert at the office say there should be only one h1 on each page. Plus it's better to highlight important text that describes the current page content instead of a image, which will give no value. – Anorthosite 16/2, 2013 at 17:4

This is worth reading csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1 – Eberhard 1/1, 2014 at 17:22

Possible duplicate of How to properly use h1 in HTML5 – Leyba 26/3, 2018 at 23:17

see also the HTML Living Standard -> Headings and Outlines (this is what browsers implement as they have no intention of implementing the HTML 5 heading outline algorithm.) – Kweilin 27/5 at 14:6

Especially because of the outline it makes sense to use h1.

If your webpage is part of a website, each page should have a site header h1, which contains the site title, the site logo, or both. It's important that this site header is not a child of a sectioning element (section/article/aside/nav).

So the toplevel heading for a page will always be the site heading. And the site navigation, the main content of the page, sidebars with secondary content etc. will all be "children" of that toplevel heading.

So a simple structure for a blog post page could be:

<body>
  <h1><img src="logo.png" alt="John's blog"></h1>

  <nav><!-- the site-wide navigation --></nav> 

  <article>
    <h1>My first blog post</h1>
    <p>…</p>
    <footer><!-- this footer applies to the article only--></footer>
  </article>

  <footer><!-- this footer applies to the whole page (→ the site)--></footer>

</body>

This would create an outline like:

1 John's blog (→ body>h1)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

If you wouldn't use the site title/logo in h1, the page would have an untitled toplevel outline entry:

1 untitled (→ body)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

And if you wouldn't use a h1 for the site title/logo and no sectioning element for your main content …

<body>
  <img src="logo.png" alt="John's blog"> <!-- omitted h1 -->

  <nav><!-- the site-wide navigation --></nav> 

  <!-- omitted article -->
  <h1>My first blog post</h1>
  <p>…</p>

</body>

… you’d get an outline with two top-level entries:

1 untitled (→ body)
  1.1 untitled (→ body>nav)
2 My first blog post (→ body>h1)

Smalltime answered 17/2, 2013 at 10:39 Comment(6)

Shouldn't the unique page title be the heading rather than the site name? Otherwise every page title is the site's name! – Grow 8/9, 2015 at 14:0

@jdln: You mean the heading for the main content (like "My first blog post")? In that case I’d consider the outline to be wrong, as the site navigation (and other site-wide things) should typically be not in scope of the main content heading. – Smalltime 9/9, 2015 at 10:9

I mean something like a news site. You would have 2 headings, the site name and the article name. Eg bbc.co.uk/news/uk-34112486 the page heading is "Queen Elizabeth II: Elizabeth and Victoria in numbers" but you should probably have "BBC News" somewhere as well. Visual users can see immediately its the BBC News website but visual impaired users and bots wont know this. – Grow 9/9, 2015 at 10:23

@jdln: Yeah, in my answer I argue that "BBC News" should be the heading of the document (i.e., h1), and "Queen El…" should be in scope of it (i.e., h2), next to the site-wide navigation (also h2) etc. By using sectioning content elements (nav, aside, …), header/footer, and main, user agents could, in principle, deduce which is the main content heading in the document. – Smalltime 9/9, 2015 at 10:36

I know this is an old post, but I thought I'd mention StackOverflow itself doesn't agree, and uses a header for its title and logo, and a H1 for the question. – Carbamidine 12/11, 2019 at 4:27

@Domino: Yes, and Stack Overflow’s outline is bad for other reasons, too (e.g., site-wide footer sections are in scope of the page-specific question). I would guess that most sites don’t go the way described in this answer, maybe because they don’t particularly care about the outline, or because they suppose that it would be bad for SEO (which is, in general, not the case). – Smalltime 12/11, 2019 at 10:6

I'd put that in a header element:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Like this:

<header>
  <a href="/"><img src="..." alt="Foo Company Home"></a>
</header>

Philpot answered 16/2, 2013 at 17:25 Comment(1)

Based on that section of the w3, I'd say you should use the H1 around your logo. – Archie 5/9, 2013 at 19:18

Recommended topics

Hot tags