H1 on the article page - site name or article title?

Question

In an article-oriented article (such as a blog), the <h1> element (level 1 heading) is usually used for markup:

• a blog title (i.e. often a large website title at the top of the page rather than a <title> element) or
• article title

What is the best choice and why?

To the owner of the site, who may want to shout out to the world, the name of his site / blog using the level 1 heading around the site name may seem to make sense.

In terms of what you are trying to tell the user, the name of the site is less relevant - the content of the article is what you are trying to install, and all other materials on the site are secondary. Therefore, it is best to use <h1> for the title of the article.

I feel that the <h1> element should focus on the title of the article, not the title of the site or other content. This does not appear to be a popular convention.

Examples:

• Joel Spolsky uses <h1> for the title of the article and an anchor for the title of the site
• Jeff Atwood does not use <h1> , <h2> for the title of the article and anchors for the name of the site
• 37 SVN SVS uses <h1> for the site name and anchors for the article title

These are three different approaches on three sites where you can expect strong consideration of the correct semantic markup.

I think Joel is eligible with Jeff in second place. I am very surprised at the 37Signals people markup choice.

It seems to me that this is a fairly simple solution: what is most important for the consumer of the article? The title of the article. Therefore, wrap the article title in the <h1> element. Done.

Am I really wrong? Are there any further considerations that I am missing? I'm right? If so, why is the <h1> approach for the heading article not used more often?

Is the decision on where to use the <h1> element as immutable, as I put it? Or are there some subjective considerations?

Refresh . Thanks for all the answers. I would really appreciate how using <h1> for the title of the article instead of the site name is beneficial for ease of use and accessibility (or, depending on the circumstances, it may not be possible). Answers based on fact, and not just personal guesses, will receive many bonus points!

Answer 1

In this W3C Quality Assurance section on this topic:

<h1> is the HTML element for the title of the first level document:

• If the document is mostly autonomous, for example, things to look at and Do in Geneva, the top-level heading probably matches the heading heading.

• If this is part of the collection, for example the section on Dogs in the collection of pages about pets, then the top-level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the name should work in any context: Dogs are your guide to pets.

Answer 2

As a user to read the screen, the header level does not matter until it is consistent. Different blogs use different conventions, so there is no standard way to make it more accessible. Make sure the headers match the content level, more importantly, what level of the header is used. For example, if you display a series of blog posts with comments, all blog posts may have a level 2 heading, and you may have a heading level 3 at the beginning of the comments. For example, for the convenience of navigating headings, find any Wikipedia article with several sections and subsections. I can easily skip the main sections using on-screen title navigation programs to go to any level 2 heading, and if I want to go to subsections for individual sections, I will move on to the next section.

Answer 3

On the home page of your blog, I would use H1 to indicate the name of the site and H2 for the titles of individual blog posts that are published on the first page.

When entering a specific article, I would use H1 for the title of the article and anchors for the name of the site.

This is a good and semantic setting that Google will also appreciate when it crawls your site.

Answer 4

On Wikipedia, the h1 tag contains the title of the article and the headings at the beginning of the document with h2. The Wikipedia name is part of the title tag in the html header. I also think that way. Therefore, for blogs, I would do, for example, Joel Spolsky in the examples that you indicated.

And I would always start from the highest level, so the resolution of h1 in my opinion is a bad option.

Answer 5

The <head> HTML page has an element named <title> . As the name implies, this is the name of the site.

HTML is used to structure the page in machine syntactic form, not for layout. If we were only talking about prototyping, you could only use the <div> and <span> blocks with different classes / identifiers and apply CSS to them. Instead

 <h2>Sub Header</h2> 

I could use

 <div class="header2>Sub Header</div> 

and somewhere there is CSS code that will make this <div> look like h2 (font size, bold, etc.). The difference is that the computer cannot know that my <div> is actually a second-level header in the first example (how should it know this? I can name it differently from "header2"), however in the first case, it knows that this is a second level heading because it is an <h2> element, and if he wants to show the user a structured list of page headers, he can do it

• Top level header
  • Subtitle
    • Sub sub header
  • Sub header
  • Sub header
• Top level header
  • Subtitle
    • Sub sub header
    • Sub sub header
  • Sub header
    :
    

looking for the elements H1 / H2 / H3 / ... and structuring them as indicated above. So, if the computer is trying to find out the name of the page, where will it look for it? In an element named <title> or in an element named <h1> ? Think about it for a moment, and you have your answer.

Of course, you can say: "But the name is not visible on the page." Well, this is usually visible somewhere in the browser window (the window title or at least the bookmark title), however you may want it to be visible on the page as well - I can understand that. However, what does this say? Who says you can't repeat it? But I wonder if you should use the h1 element for this.

 <html> <head> <title>SOME TITLE</title> </head> : <body> <div id="title">SOME TITLE</div> : </body> </html> 

Use CSS to style #title as you like. Make it super big and super bold, and if you like it says nothing against it. Automated page analyzers usually ignore div and span to some extent, because they do not report anything (these are the elements used to layout the page for the reader, but they do not say anything about the structure of the page. LAYOUT is NOT STRUCTURE , you can only apply style to certain structural elements to create a layout, but should not be confused with another). Nevertheless, the computer will know what the title of the page is; it knows this thanks to the title element.

Answer 6

For a typical website, for example. blog, h1 must contain the name of the site. Yes, on every page of the site.

Why? There are various parts on a website that are accessible to all of their web pages. Let's take navigation as an example:

 <ul id="site-navigation"> <li><a href="/">Home</a></li> <li><a href="/about">About me</a></li> <li><a href="/contact">Contact</a></li> </ul> 

This #site-navigation repeated on every page of the site. It is a site navigation, not a page navigation. The difference is important! {Page navigation can be a table of contents (for example, in a Wikipedia article) or pagination for a long article.}

If youd uses the article title as h1 , site navigation will be within that title.

 <body> <div>John's blog</div> <!-- the site title --> <h1>My first blog post</h1> <!-- the article title --> <p>…</p> <h2>Navigation</h2> <ul id="site-navigation">…</ul> <!-- the site-wide navigation --> </body> 

Thus, this markup conveys: Navigation (→ starting with h2 ) is part of the article (→ h1 running). But this is not true, this navigation is not navigation for the article. Links are indeed part of the entire site, and the site is represented by the site title.

The problem becomes clearer when the article contains subheadings:

 <body> <div>John's blog</div> <!-- the site title --> <h1>My first blog post</h1> <!-- the article title --> <p>…</p> <h2>Why I'm blogging</h2> <p>…</p> <h2>Why you should read my blog</h2> <p>…</p> <h2>Navigation</h2> <ul id="site-navigation">…</ul> <!-- the site-wide navigation --> </body> 

As you can see, there is no way to distinguish between article headings and navigation. There are three subheadings in the article: “Why am I a blog,” “Why should you read my blog,” and “Navigation.”

So, if instead of using the h2 site header, use h1 and h2 to navigate the site, it could be in the site header area, also using h2 :

 <body> <h1>John's blog</h1> <!-- the site title --> <h2>My first blog post</h2> <!-- the article title --> <p>…</p> <h2>Navigation</h2> <ul id="site-navigation">…</ul> <!-- the site-wide navigation --> </body> 

Now this markup conveys: There is a site called “Jones's Blog” (→ h1 launched), and it contains an article (→ started by the first h2 ) and site navigation (→ the second h2 launched). The article headings would be h3 now, of course.

---

Another problem when using h1 for the title of an article is that then usually there is content before the first title, for example. The title of the site, including the name of the site and other materials. For users who navigate through the headers, this first content will be "invisible." Therefore, it is good practice to give each individual block its own title.

HTML5 formalizes this using a partitioning / allocation algorithm . It solves many problems that may arise with HTML 4.01, because ordering content can be (mostly) free now, and you don’t need to “invent” the actual headers if you don’t want to, thanks to section / article / nav / aside . But also in HTML5, the site header should be h1 , which is a child of the body , but not a child of any element of the / root section. All other sections are included in the title of this site.

Answer 7

H1 on the article page - site name or article title?

I. This article is informative: The truth about several H1 tags in the HTML5 era .

Answer 8

There must be only one, and there must be only one

  h1 

; this is usually the name of the page. Then it should follow h2, h3, etc.

This way your page might look like this (without all other html tags)

 h1
   h2
   h2
     h3
 ..etc