I know that here and around internet is a lot of information and I read them, but I got disappointed by html5 validation.
My webpage is like this:
<body>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
<main>
<section>
<header>
<h1>...</h1>
</header>
<section>
<header>
<h1>Section 1</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 2</h1>
</header>
<p>...</p>
<p>...</p>
</section>
<section>
<header>
<h1>Section 3</h1>
</header>
<p>...</p>
<p>...</p>
</section>
</section>
</main>
<footer>
<h2>...</h2>
<p>...</p>
</footer>
</body>
By my knowledges, html5doctor and w3c specification is right.
My page is onepage website and each sections have own meaning.
...but if I try to validate, I will get warnings to consider using h2 - h6 within section, instead of h1. My webpage past validation, but I am nervous by warnings there.
Please can you confirm me, that is OK or what is exactly wrong on that?
Thank you for each professional answer Peter
The original idea of HTML5 contained the concept of an outline algorithm. In it, the first h1 in your example would be interpreted in same way as an h1 in HTML 4.01. The h1 elements in the section elements would each be treated equivalent to an h2 element in HTML 4.01. That is, they would indicate the start of a subsection subordinate to the top level section started by the first h1 element.
However, what happened in practice is that neither browsers, nor screen readers, nor any other HTML processors of note implemented the HTML5 outline algorithm anywhere near correctly if at all.
The result is that your page will be misinterpreted. Mostly this affects Accessibility Technology which make heavy use of header levels to allow its users to navigate your pages effectively.
I don't know whether there any specific negative SEO effects, but the effective semantic misinterpretation is unlikely to be beneficial.
So the advice the validator is giving you, is that for the foreseeable future, it is best to use the same header level arrangement as you would use in HTML 4.01, that is h1 for top level section headers, h2 for the next level sub-sections, h3 for sub-sub-sections, etc.
Related
I am doing a HTML semantics exercise as part of my University course and I ended up being curious as to which way headers should be laid out. Let me give 2 examples:
Example 1:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h1>Section Header</h1>
</header>
<p>Some content</p>
</section>
</main>
Example 2:
<main>
<header>
<h1>Main Header</h1>
</header>
<section>
<header>
<h2>Section Header</h2>
</header>
<p>Content here</p>
</section>
</main>
My main wonder here is wither you use a h1 or h2 inside the sections. If I understand right example 1 is more semantically correct as (at least in chrome) the raw html will style in such a way where the section headers are smaller. However, previously I have used the way in example 2, and in my class in year 1 I was never told this was incorrect.
Because I'm being graded on semantics in this exercise, and because I need to feed my curiosity, I'd love to know which is more correct.
Source: http://w3c.github.io/html/sections.html#headings-and-sections
"Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level."
Example 2 seems to be what W3C is suggesting to use in following examples after that quote.
This is probably all opinion based so I'm closing this question with this information.
This question already has answers here:
Semantic mark-up and WAI-ARIA for Tabbed Section?
(2 answers)
Closed 6 years ago.
I've read up a lot on the usage of <article> and <section>. I think I get the <article> part. But with <section> there is still confusion. I've read this post on HTML5doctor, but I still have questions.
Consider an easy example: I have a webpage where you can play a game. You have a navigation menu at the top with "Dashboard", "Other games", "About". Each page begins with a headline and contains lower level headlines.
For instance, on Dashboard you could have "Singleplay", "Multiplayer", "Statistics", "Instructions" with a bit of text under each and a link to the respective HTML page.
On html5doctor:
The section element represents a generic document or application section
I'm guessing each "page" could be considered as such? But are the sub headlines ALSO sections in this case or not?. It feels like whenever there is a new headline with content, a <section> could be argued suitable. But that can get out of hand, no..?
The <section> element is used to represent a group of related content. This is similar to the purpose of an <article> element with the main difference being that the content within a <section> element doesn’t necessarily need to make sense out of the context of the page. A section is just how it sounds a section of a website. I think the most common use is that you can assign it an id. So it is it's own entity so to speak. You can assign it an <section id="examples"> and have it go to that section of a website from anywhere and the page you want.
It’s advisable to use a heading element (<h1> – <h6>) to define the topic for the section.
Using this blog post as an example, you could have <section> elements that represent each of the individual parts within the post.
<article>
<h1>How to use HTML5 Sectioning Elements</h1>
<p>...</p>
<section>
<h2>The <main> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <article> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <section> Element</h2>
<p>...</p>
</section>
...
</article>
Here's an example that might help:
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section id='first'>
</section>
<section id='second>
</section>
<main>
<footer>
</footer>
</body>
How do I make a document outline like this using HTML5 semantic tags, when I need the first two headings in one block?
-MySite
--Books for children
---Book1
---Book2
When I use
<body>
<header class="INeedThisInOneBox">
<h1>MySite</h1>
<h2 class="slogan">Books for children</h2>
</header>
<article>
<h1>Book1</h1>
</article>
<article>
<h1>Book2</h1>
</article>
</body>
the outline goes:
-MySite
--Books for children
--Book1
--Book2
I would like to use semantic tags, but need to have SEO importance granted for the slogan.
You can only get this outline if you stop using sectioning content elements (example A) or if you start using sectioning content elements everytime when it’s appropriate (example B).
Example A: no sectioning content elements
<body>
<header>
<h1>MySite</h1>
<h2>Books for children</h2>
</header>
<div>
<h3>Book1</h3>
</div>
<div>
<h3>Book2</h3>
</div>
</body>
Example B: sectioning content elements everywhere
<body>
<header>
<h1>MySite</h1>
</header>
<section>
<h2>Books for children</h2>
<article>
<h3>Book1</h3>
</article>
<article>
<h3>Book2</h3>
</article>
</section>
</body>
I wouldn’t advise to use example A. Example B is the correct way to mark this up (and I’d challenge your assumption that you would need to do this differently for SEO, but discussing SEO is off-topic on Stack Overflow).
I want to know if it would be ok to have a section tag contain no heading tags inside of it. I have looked at couple of examples and they all have heading tags inside of them.
The structure I implement for my section tag at the moment is:
<section>
<article>
<div>
</div>
</article>
<article>
<div>
</div>
</article>
</section>
HTML5 does not require the use of headers within an article element however it can be useful if you want to publish additional details such as date of publishing as well as you could include a nice footer to each article as well.
This would be useful:
<section>
<article>
<header>
<hgroup>
<h1>This is the Article Header</h1>
<h2>This is a tagline header</h2>
</hgroup>
<time class="dtstart" datetime="2011-10-05T09:00Z">9am Oct 5th</time>
</header>
<div>
<p>This is the content</>
</div>
<footer>
<p>Article Authored by Username<br>
Twitter Link<br>
Google Plus Author Link</p>
</footer>
</article>
By using the above code you can style the site without making hardly any addition classes due to the fact the main header and footer of your site won't be contained within a section, or least I hope you don't have it.
So styling article footers and headers and everything else in their is possible without making addtional classes which is very code freindly for example
article header h1 {font-size:20px;}
article header h2 {font-size:12px;}
article div h1 {font-size:36px;}
article div h2 {font-size:26px;}
article footer {font-size:12px;}
article time {fonts-size:9px;}
article hgroup {padding:20px;}
section article {padding:20px;}
Notice how with the above code there is no need for classes to be made, its pretty awesome and very flexible.
This would not be useful:
<section>
<article>
<header>
<h1>The Header</h1>
</header>
<div>
<p>I am the content</p>
</div>
</article>
</section>
The instructions on using HTML5 is very vague and many people agru if header should even be used at all within an Article but headers are useful if you have a lot of content to stick in their such as publish date, author, more than one H1, and H2 etc.
Footers in articles I find more useful but generally if I'm using the footers I use the headers as well, generally you should always code with as little code as possible and you should always consider Googles snippets as an alternative over some HTML5's if you want the benefit from those.
You should factor in what is easiest to style your site, using header can be easier to use without making additional classes for example.
The current spec only says that it typically has a header. There's nothing that says it requires one.
Sources:
http://www.w3.org/TR/html51/sections.html#the-section-element
http://developers.whatwg.org/sections.html#the-section-element
http://html5doctor.com/the-section-element/
If a header section contains only heading (eg. h1, h2..), and no other information. Should it still be wrapped it in the header tags? Or the header tags should be used if it has more content than just the headings?
For example, should this be used?
<section>
<h2> .... </h2>
<div>
...
</div>
</section>
or this?
<section>
<header>
<h2>...</h2>
</header>
<div>
...
</div>
</section>
Here's that HTML5 doctor article:
Avoiding common HTML5 mistakes
...as linked to by #simoncereska.
To save folks some time, here's the relevant quote:
If your <header> element only contains a single heading element, leave
out the <header>. The <article> (for example) ensures that the heading will be shown
in the document outline, and because the <header> doesn’t contain
multiple elements (as the definition describes), why write code when
you don't need to? Simply use this:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
The article is definitely worth reading, but if your looking for a quick answer, then see the bold text in the above quote. :)