h1 and semantic HTML5

Question

I´ve read alot about semantic HTML these last days, and I´m quite confused.

The title tag should contain what the specific page is about and the web site´s name. What´s the difference between h1 and the title? I read that h1 should contain what the page is about as well. I also read that in HTML 5 the h1 tag can be used more than once on a page, and is used for headers in section (isn´t that the header tag´s work?)

If I have a logo on my page that is a picture with the name of my site, what tag should I use? I allways though h1 was for that.

@SomeshMukherjee So, you mean even having a semantic discussion about semantics isn't a good idea? hehe — Andrew Barber, Feb 14 '12 at 18:34
Its not a bad idea, but discussion about semantics when conducted semantically are only correct semantically if they are organized as a debate. Did you see what I did there ? — SoWhat, Feb 14 '12 at 18:40
@SomeshMukherjee Yes; you hit my brain with a big stick! hehe... I agree completely, btw. — Andrew Barber, Feb 14 '12 at 21:19

unor · Answer 1 · 2014-01-28T19:55:13.787

What´s the difference between h1 and the title?

The HTML5 (CR) spec contains the difference between title and h1 (containing the site title):

Authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.

I also read that in HTML 5 the h1 tag can be used more than once on a page, and is used for headers in section […]

Yes, in HTML5, you could use h1 everywhere, and you would never need to use h2-h6, if (and only if!) you use sectioning content elements correctly, which are: section, article, aside and nav. Why? Because:

The first element of heading content in an element of sectioning content represents the heading for that section.

So it’s the first heading, no matter which level it has.

[…] (isn´t that the header tag´s work?)

No, the header element is for "introductory content" of a section, which may (not must) include the section’s heading, but it may contain more than that.

If I have a logo on my page that is a picture with the name of my site, what tag should I use? I allways though h1 was for that.

Yes, it should be a h1 that is a child of body and of no other sectioning content element. This represents the site heading. Everyting else on this page (the navigation, the main content, etc.) is in the scope of this site heading.

Example:

<body>
  <h1><img src="…" alt="ACME Inc." /></h1> <!-- ← the site heading -->
  <nav></nav> <!-- the site’s navigation -->
  <article> <!-- the main content of this page -->
    <h1>My favorite book</h1>
  </article>
</body>

This document would create the following outline:

1. ACME Inc.
  1.1 (implicit; navigation)
  1.2 My favorite book

calebds · Answer 2 · 2012-02-14T18:19:27.610

1

Only use title for what you want to be displayed in the browser tab. From MDN:

The HTML Title Element () defines the title of the document, usually shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags is not interpreted.

Additionally the title may only be used within the head element, so don't use it for your logo. Use h1 if you feel the logo text is the most important heading on the page.

edited Feb 14 '12 at 18:19

answered Feb 14 '12 at 18:08

calebds

25,670
9
46
74

So what should I use for logo? – Feb 14 '12 at 18:18
@piers Use `h1` if the logo text is the most important heading on the page. – calebds Feb 14 '12 at 18:20
How should I determine if it´s important? I though it was important for SEO to have the site´s name in a h1, but maybe I was wrong? – Feb 14 '12 at 18:24
@piers - You are correct but that has changed. See my answer. – Rob Feb 14 '12 at 18:25

score 1 · Answer 3 · answered Feb 14 '12 at 18:09

1

h1 is used to emphasize section headings. If a section has sub parts, you would use an h2 tag and if those have subparts you'd use an h3 tag and so on.

Havin said that, there is no restriction on where you can or not use h1 tags and h2 tags and so on. Use it as it sounds convinient to you

<title> tag is used to show the page title in the browser tab heading or the window titlebar

answered Feb 14 '12 at 18:09

SoWhat

5,564
2
28
59

Some use h1 to store the pages name and then use text-indent: -9999px; to hide it... Would u say this is wrong use of h1? – Feb 14 '12 at 18:17
Why store it if you want to hide it? Plus i've never heard this one before – SoWhat Feb 14 '12 at 18:20
Because they think it is important for SEO to have their site name in a h1 – Feb 14 '12 at 18:23
@piers text-indenting is considered black-hat SEO and may be penalized by search-engines. Better not use it. Try `
Slogan
` or `
` – Christoph Feb 14 '12 at 18:25
Search engines have smartened up to these tricks. Frankly, SEO is overrated these days since pretty much anything extra you do for SEO will get you penalized by most search engine. Build content, not popularity – SoWhat Feb 14 '12 at 18:30

score 1 · Accepted Answer · answered Feb 14 '12 at 18:21

1

You can think of the title as the title of a book and h1 is the chapter heading but this does not always work for all sites. If your site was a book, then "My Book" would make a great title tag along with the h1 on each page being "Chapter X". That won't always work. Google says if you have CompanyX then each subsequent page title should reflect what's on the page like "Our Products" instead of "CompanyX - Our Products". But that's for layout on their search results.

With HTML5, as said by others, there can be many sections on a page, each with its own h1 heading. However, you may have a page with only one necessary h1 heading. So thinking of an appropriate title/h1 combination requires some thought.

answered Feb 14 '12 at 18:21

Rob

14,746
28
47
65

So should I use "CompanyX - Our Products" or just "Our Products"? Is it a good idea to use h1 to display a logo image? And then use h2 for headers in sections? Because I will only be needing one section for each page I think. – Feb 14 '12 at 18:36
@piers - It's not necessary to do so. Headings should be descriptions and not images. Google will look at your title and the wording in your h1 elements. Images will be disregarded so you are losing an opportunity to post something with that. Your homepage should be "CompanyX" but subsequent pages should be "Our Products", "Menu" and so on because 1) Google will list them that way and 2) users already know where they are but it might be a good idea to list the company name near the top but not necessarily in a h1. – Rob Feb 14 '12 at 18:54
It's also good to keep in mind that apart from Google, HTML semantics apply to accessibility (screen readers) also. Of course, it's mostly the law only for government sites, but large e-commerce sites are starting to take note of legislation and adding web accessibility into their planning. – Michel Hébert Oct 30 '12 at 19:28

Christoph · Answer 5 · 2012-02-14T18:30:14.730

0

the titletag is placed in the head section of your html-document. It is displayed as the title of your tab and the window title bar of your browser... Very important for SEO.

The h1 is the first and most important Heading of your site. Should only be used once per page for best SEO-Result. Also very important for SEO, but not quite as much as the <title>.

<html>
    <head>
        <title> Your Title here -</title>
    </head>
    <body>
        <h1>VIH - very important heading</h1>
    </body>
<html>

edited Feb 14 '12 at 18:30

answered Feb 14 '12 at 18:11

Christoph

50,121
21
99
128

According to some sources h1 is allowed to be used several times on one page. – Feb 14 '12 at 18:18
"should" be used... sure you are theoretically allowed to use it more often, but the semantic sense of a `h1` is to be pretty important and unique. Can you provide the URL to those sources? I'm always willing to revise my answers. – Christoph Feb 14 '12 at 18:22
I tried to find where I read it, without success. But others have said in their posts here that h1 is used for headers in sections. – Feb 14 '12 at 18:40

h1 and semantic HTML5

5 Answers5

Slogan

Linked