Using

Question

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

    Website Name
         


        

Answer 1

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:

  


  
 

  

    
My first blog post
    
…
    

  

  


 

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 …

   

  
 

  
  
My first blog post
  
…

 

… 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)