Menu
How to properly markup the title of a site in HTML5? Usually I markup a website's name with:
<h1>
<a href=#>Website Name</a>
</h1>
Recently I've come across with the HTML5 Document Outlining Algorithm. I have also read that it seems like marking your site's name in h1 tag don't make sense, since every page probably will have different main heading (h1), in addition to the website name.
What if let's say on Facebook, if the markup of the Facebook's logo/title is wrapped in <h1> tag. Then if every post is wrapped in <article> tags. For example:
<article class="post">
<h5 class="post-header">
<a href="#">Someone has shared Blah Blah's photo</a>
</h5>
<div class="post-body">...</div>
</article>
I think the document outline would be
1.1 Someone has shared Blah Blah's photo
1.2 Other Posts
1.3 Other Posts
Is that okay?
427
Heading Tag Best PracticesUse Single H1: Your webpage should have one main heading as an H1 tag which should be able to describe the webpage. This should be easy to understand by users and search engines. Structured Content: Heading tags on your webpage should be able to show the clear structure of your content.
HTML5 <header> TagThe <header> element is intended to usually contain the section's heading (an h1-h6 element or an <hgroup> element), but this is not required. It can also be used to wrap a section's table of contents, a search form, or any relevant logos.
The title on a web page is usually tagged as an H1 tag. While this isn't always the case, it makes sense in most cases. By making the title of your page an H1 heading, it shows that it's one of the most important pieces of content on the page.
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:
<body>
<h1><img src="logo.png" alt="John's blog"></h1>
<nav><!-- the site-wide navigation --></nav>
<article>
<h1>My first blog post</h1>
<p>…</p>
<footer><!-- this footer applies to the article only--></footer>
</article>
<footer><!-- this footer applies to the whole page (→ the site)--></footer>
</body>
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 …
<body>
<img src="logo.png" alt="John's blog"> <!-- omitted h1 -->
<nav><!-- the site-wide navigation --></nav>
<!-- omitted article -->
<h1>My first blog post</h1>
<p>…</p>
</body>
… 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)
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
