Menu
Which of the following is the correct way to structure a page:
1) h1 only in header
<header> <h1>Site title</h1> <nav>...</nav> </header> <section> <h2>Page title</h2> </section> If I use h1 exclusively inside header as the site's title, every page will have the same content for the h1 tag. That doesn't seem very informative.
2) h1 in header and section, for both site and page title
<header> <h1>Site title</h1> <nav>...</nav> </header> <section> <h1>Page title</h1> </section> I've also seen examples of using h1 more than once, in both header and section tags. However, isn't it wrong to have two titles for the same page? This example shows multiple header and h1 tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3) h1 only in section, emphasizing the page title
<header> <p>Site title</p> <nav>...</nav> </header> <section> <h1>Page title</h1> </section> Lastly, W3 seems to recommend using h1 within the main section element, does that mean I shouldn't use it in the header element?
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
281
<h1> defines the most important heading. <h6> defines the least important heading. Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page.
Your h1 tag should be at the top of the page content (above any other heading tags in the page code). If your site is divided in to columns the left column may appear “higher” in the code. Be sure it does not contain any h1 tags as most likely the center column contains the main content of the page.
In other words, it's a container that can include your heading tags (amongst other things). You should also NOT confuse heading tags with the <head> element of HTML code. The <head> is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag in your webpage.
As I state in my comment and you quote in the W3C, h1 is a heading and not a title. Each sectioning element can have its own heading element(s). You cannot think of h1 as being the title of a page only but as the heading of that particular section of the page. Just like the front page of a newspaper, each article can have its own heading (or title).
Here is a good article on this.
107
I would recommend using h1 throughout. Forget about h2 through h6.
Back in HTML4, the 6 heading levels were used to implicitly define the sections. For example,
<body> <h1>This is a top-level heading</h1> <p>some content here</p> <h2>This is the heading of a subsection</h2> <p>content in the subsection</p> <h2>Another subsection begins here</h2> <p>content</p> <h1>another top-level heading</h1> Now with the section element, you can explicitly define the sections rather than having to rely on the implicit sections created by your browser reading the different heading levels. A browser equipped with HTML5 knows that everything inside a section element gets "demoted" by one level in the doc outline. So for example a section > h1 is semantically treated like an h2, a section > section > h1 is like an h3, etc.
What's confusing is that browsers STILL create implicit sections based on the h2–h6 heading levels, yet the h2–h6 elements don't change their styles. That means that an h2, no matter how many sections it is nested in, will still appear like an h2 (at least in Webkit). This would be confusing if your h2 was supposed to be, say, a level-4 heading.
Mixing h2–h6 with section leads to very unexpected results. Just stick with h1 only, and use section to create explicit sections.
<body> <!-- optional --><header> <h1>This is a top-level heading</h1> <p>you may optionally wrap this p and the h1 above it inside a header element. the header element doesn't affect the doc outline. the section element does, however.</p> <!-- optional --></header> <section> <h1>even though this is an h1, the browser "treats it" like an h2 because it's inside an explicit section. (it got demoted).</h1> <p>content in the subsection</p> </section> <section> <h1>Another subsection begins here, also treated like an h2</h1> <p>content</p> <h2>This is misleading. it is semantically treated like an h3.</h2> <p>that is because after an h1, an h2 is demoted one level. the h1 above is already a "level 2" heading, so this h2 becomes a "level 3" heading.</p> <section> <h1>just do this instead.</h1> <p>it is treated like an h3 because it's in a section within a section. (It got demoted twice.)</p> </section> </section> <h1>another top-level heading</h1> Furthermore, you may use the <main> element. This element contains only information specific to the page, and should not include content that is repeated site-wide, such as navigation links, site headers/footers, etc. There may be only one <main> element present in the <body>. So your solution may be as simple as this:
<header> <h1>Site title</h1> <nav>...</nav> </header> <main> <h1>Page title</h1> <p>page content</p> </main> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
