HTML5 semantics: Where does the main content title belong?
Every time I create a HTML5 page, I struggle with where to put the main page title. Everybody seams to handle this differently...
Here is the situation:
Let's say I have a website that is called "Meo's frontend adventures". On this site there is a page called "Abracadabra Semantics" with a sub title that is not important, like "lorem ipsum delor"
There is also a navigation that is on top of the site, a footer and some contents.
In HTML 4.0 I would do it this way:
- div.header
+ div.nav
+ a.siteName: "Meo's frontend adventures"
- div.contents
+ h1.pageTitle: "Abracadabra Semantics"
+ strong.lead: "lorem ipsum delor"
- div.cn
+ h2
+ p
+ etc..
+ div.footer
+ul.footerNav
Now, in HTML5 basically every structural element gets a H1. Where should I put the title of the actual page?
I would do like so:
- header
开发者_如何学编程 + h1.siteName: "Meo's frontend adventures"
+ nav
- section.contents
- header
-hgroup
+ h1: "Abracadabra Semantics"
+ h2: "lorem ipsum delor"
- article
- header
+h1.ArcticleTitle
+ p
+ etc..
- footer
+ nav
I'm not sure if it is right to put the title of the actual page in the main section or if it should be in the header of the document. I just did it like this out of my old HTML4 thinking.
It would be more logical to me to put it in the header of the document, since this page is about this topic. But in every example I found, the page title is in the main section and the title of the website is in the header.
In HTML 4 it is easy to decide: h1 = topic title. But it's not so clear to me in HTML5.
How does Google or a screen-reader determines what the title of the contents is? What structure would you use?
Interesting question, to which I'll pose a counter-point for the answer: How do you view the title?
Let's say that the questioned title is referring to the overall document. In this case, semantically we would put that text in the header of the document. The page title however can be a different matter. If we view the page title to be related to the content (For example, if Abracadabra Semantics is heading the article itself), then it belongs not as a child of the page, but as a child of the article or section. So, in that case, our HTML might look like this:
<!-- Head stuff here -->
<body>
<header>
<h1>Meo's frontend adventures</h1>
<h2>Lorem Ipsum Dolor Sit Amet...</h2>
<nav>
<!-- ul of navigation items -->
</nav>
</header>
<section>
<header>
<h1>Abracadabra Semantics</h1>
<h2>Lorem Ipsum Dolor Sit Amet...</h2>
<!-- optional introductory text -->
</header>
<article>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</article>
<!-- Other potential related articles -->
</section>
<!-- Possible footer -->
</body>
Semantically, we are organizing the page in a hierarchy – The tag above tells us to what this header (or child tag of any sort) belongs. In this case, we can have two header elements (one which offers an introduction to the site, and another offering an introduction to the section).
However, not everyone views this set of semantics the same way. For instance, they may view the individual page as the section in question, so they may include their page title in the header. Or, their section may be their dominating element, and the heading the first child of the section. It's point of view in regard to your estimation of the content. The screen readers will organize the site based on what order you lay out the document; however, not all will do this the same way. HTML4 forced some developers of screen readers to take CSS positioning into account, but HTML5 seeks to correct this by putting more semantic elements into play to reorganize your site.
Anyhow, now that you've been shown what you can do, and how it works, you can make your own decision. Think about how you understand your content in relationship to the content around it, and organize accordingly.
Just to help you out a little further, take a look at the specification: http://www.w3.org/TR/html-markup/header.html
Interesting read on this topic: http://www.iheni.com/html-5-to-the-h1-debate-rescue/
Using HTML5, each element can have it’s own H1 and in turn, the hierarchy and nesting of each sectioning element determines the heading level of each H1. Looking at the example above, an H1 within the will rank higher than the H1 in the contained within it.
The title of the actual page should stay on top of every other title.
Then, if you have different titles for different paragraphs or section of the page, you can write them before the related content, following the text flow.
Basically, you may want to place your tags in such a way that even without any formatting, the text will still be correctly readable. So for example page title first, then paragraph title and paragraph text repeating for every paragraph.
加载中,请稍侯......
精彩评论