There are a lot of different answers and after a week I am more confused than before.
The main problem is section and articles.
Let's make an example, this page describes a town:
<h1>TownName</h1>
<p>Description</p>
<h2>What to see</h2>
<h3>Sightseeing Nr1</h3>
<p>Its description</p>
<h3>Sightseeing Nr2</h3>
<p>Its description</p>
...
<h2>How to get</h2>
<h3>By car</h3>
<p>Description</p>
<h3>By train</h3>
<p>Description</p
<h2>Map</h2>
<p>Description</p>
<h2>...</h2>
...
etc.
There are h3 for some h2, for some nope. Should I use article for each h2 and a nested article for h3 too? (The context can be separated, so..)
Or should I use sections for h3?
Or should I use section for blocks of "h2" and article for each h3?
h1 with its description is an article or section too?
It's so difficult, also I have added an image of a page that I projected, I am almost sure that I don't have to use section to wrap aside and main elements..
Zhenya, This is from W3 Schools
**Nesting Semantic Elements**
In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.
The <section> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.
You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.
Related
Am trying to write valid html by following w3c standards. But getting warning on below code as Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. But I have used <h2> in my section, then why am I getting this and how can I overcome?
<section id="section1">
<article class="container">
<h2>Some heading</h2>
</article>
</section>
Your <article> contains a heading, but your <section> does not, because your <h2> is associated with your <article>, not your <section>.
If your <section> is just a generic container and not an actual distinct section of articles in your page, it should be a <div> instead, or a <main> if it's the only container in your page (but judging by the section ID it's probably safe to assume it isn't). Alternatively, your <article> should be a <div> instead as "container" is a rather oddly generic class name for such an element.
Note that sections missing headers is not an error but a warning; you are free to leave your <section> without a heading, it will just look strange in the document outline. Nevertheless, the warning is there to indicate that you may have either left out a heading, or you may be misusing sectioning elements.
Is the article (or section) element appropriate on a homepage?
I am not sure since the content of homepage is mostly a bunch of summaries referring to the content that should be included in an article element (on a separate page).
A rule of thumb I follow is to only use <article> or <section> if there is a corresponding <h#>.
So this is more appropriate:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<h2>Sub-Head</h2>
<p>
Hello.
</p>
</article>
Than this:
<h1>Home Page</h1>
<p>
Hi.
</p>
<article>
<p>
Hello.
</p>
</article>
Do not add a heading just to make it work. The value of a heading should be determined by the nature of the content, not a desire to shoehorn the elements you want.
With an example URL or image of your intended layout and content, I could offer more context.
Also, consider that if you have one contiguous piece of content (like how a sub-page generally is about one thing), you would not wrap the entire page in <article> but you would wrap it in <main> instead.
For a bit more, check out this piece on <section> from W3C HTML5, WCAG, and ARIA spec participant and accessibility advocate Léonie Watson.
What is the up to date correct usage of the H tags?
I was originally told that it was only one H1 tag per page.
Now I am being told that you can use more than one h1 tag as long as it is only one per sectioning root or content section and that it is better than the former way.
What is the correct usage!
According to mdn
In HTML5, use the <section> element to define the outline of a
document. Headings provide titles for sections and subsections. You
can also group a heading and its content using the <div> element.
So you can use multiple H1 as long as they are in different <section>
<section>
<h1>Hi</h1>
<p> ... </p>
</section>
<section>
<h1>Hello</h1>
<p> ... </p>
</section>
Despite reading pages upon pages about the <article> and <section> tags I really don't understand how to apply them to my site.
I have a product page with related products at the end of the page. First I thought about doing something like this:
<section>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</section>
<section>
<header><h1>Related products</h1></header>
<article>
<img src="image1.jpg"><br/>Product 1<br/>Price
</article>
<article>
<img src="image2.jpg"><br/>Product 2<br/>Price
</article>
<article>
<img src="image3.jpg"><br/>Product 3<br/>Price
</article>
</section>
But, then I read some other blogs and it occured to me that maybe I should replace the <section> tags with <article> tags.
Which is right and why? Thanks.
<article> is for an independent piece of content that should make sense even if all of it's surrounding content is stripped away. <section> is more of a generic container that's quite similar to div tag and mostly used for content structuring. So the right code should be like this:
<article>
<header><h1>Product title</h1><header>
<img src="image.jpg"/>
<p>Description</p>
<p>Price</p>
<p>Order</p>
</article>
<article>
<header><h1>Related products</h1></header>
<section>
<img src="image1.jpg"><br/>Product 1<br/>Price
</section>
<section>
<img src="image2.jpg"><br/>Product 2<br/>Price
</section>
<section>
<img src="image3.jpg"><br/>Product 3<br/>Price
</section>
</article>
Also HTML 5 doctor's got a great Flowchart if you get confused picking the right HTML5 semantic element for your need. You can give it a try and see if it helps.
Section
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Article
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Straight from the W3 http://www.w3.org/html/wg/drafts/html/master/sections.html
In their example, they have an article nested within a section within an article. I would say you are definitely using it correctly.
<article>
<header></header>
<section>
<h1></h1>
<article></article>
<article></article>
</section>
</article>
In the HTML5 standard, the <"article"> element defines a complete, self-contained block of related elements.
The <"section"> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <"section"> elements containing <"article"> elements, and <"article"> elements containing <"sections"> elements.
You will also find pages with <"section"> elements containing <section> elements, and <article> elements containing <"article"> elements.
Right From : http://www.w3schools.com/html/html5_semantic_elements.asp
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/