I wonder why the following two (pretty similar) examples generate radically different HTML5 outlines.
Example #1
Codepen: http://codepen.io/jmuheim/pen/ZYVEoJ
Fullscreen: http://codepen.io/jmuheim/debug/ZYVEoJ
This generates the following outline:
This outline looks ok to me.
Example #2
Codepen: http://codepen.io/jmuheim/pen/ZYVERX
Fullscreen: http://codepen.io/jmuheim/debug/ZYVERX
This generates the following outline:
This outline doesn't look ok to me: the main content is now part of the header!
The difference is one single section container around the "This is the main content" h1 tag.
Can anyone explain me the logic behind this?
Update: Example #3
As pointed out in the answer below, it is important to know that header, footer and main do not start a new section, while having an h-element of the same size than a preceding h-element does start a new section.
So the simple rule of thumb to remember is the following: **When having a header on top of the page, a main in the middle, and a header at the bottom, then each of them have to start with an h1 (which starts the implicit section). Under those h1 elements, you then can add as many other sections (introduced explicitly by sectioning elements [nav, aside, section, and article] or implicitly by lower h-elements [h2 to h6]).
I created another example which (in my opinion) resembles a perfect HTML5 outline - which is also a 100% understandable to pre-HTML5 devices.
Codepen: http://codepen.io/jmuheim/pen/Kwbdyg
Fullscreen: http://s.codepen.io/jmuheim/debug/Kwbdyg
This generates the following outlines:
This is the whole point of <article>, <section>, <nav>, and <aside> tags ("sectioning content" in terms of the spec): they define sub-sections of the larger document.
You say "the main content is now part of the header", but that's not what the outline shows - it shows that the <section> is a subsection of the main document (<body>), titled <h1>Header</h1>.
In your first example:
<body>
<header><h1>Header</h1></header>
<main><h1>This is the main content</h1></main>
<footer><h1>Footer</h1></footer>
</body>
..the <header>, <main>, and <footer> elements don't affect the outline. (There's even a note to that effect in the spec - look for "The header element is not sectioning content; it doesn't introduce a new section."), so for the purposes of the outlining algorithm it's equivalent to:
<body>
<h1>Header</h1>
<h1>This is the main content</h1>
<h1>Footer</h1>
</body>
In your second example,
<body>
<header><h1>Header</h1></header>
<main>
<section>
<h1>This is the main content</h1>
</section>
</main>
<footer><h1>Footer</h1></footer>
</body>
..the <section> element introduces a subsection of the first section of the <body> element, so it's equivalent to:
<body>
<div>
<h1>Header</h1>
<section>
<h2>This is main content</h2>
</section>
</div>
<div>
<h1>Footer</h1>
</div>
</body>
(I added <div>s to mark up the logical sections of the document implied by the outlining algorithm.)
So the outline for this is:
1. Header
1.1. This is the main content
2. Footer
This might make more sense with an example from the spec:
<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
<h1>Earning money</h1>
...
</section>
<section>
<h1>Spending money</h1>
...
produces the following outline:
1. The Tax Book
1.1 Earning money
1.2 Spending money
Notice that "The Tax Book" is the heading of the document, and "earning" and "spending" are subheadings.
See also the article on HTML5 outlines on MDN, it provides some background for the feature, which will hopefully make this all clearer.
Related
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I was just reading the HTML5 spec again to find out if I can nest a nav element inside a header. The paragraph for the header element is a bit strange if you ask me, but probably only because I don't understand it.
In this example, the page has a page heading given by the h1 element,
and two subsections whose headings are given by h2 elements. The
content after the header element is still part of the last subsection
started in the header element, because the header element doesn't take
part in the outline algorithm.
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li>Games
<li>Forum
<li>Download
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
Source: http://www.w3.org/TR/html5/sections.html#the-header-element
So, according to the comment, <p>You have three active games:</p> is still part of the subsection that started inside the header because the header by itself does not introduce a new section.
But doesn't this break with the nesting structure that HTML is build on? For example, this is invalid markup because the nesting is wrong:
<div>
<p>
</div>
</p>
But If I would define - theoretically - that the div does not do anything, then it would be fine?
Please don't get me wrong, this is not a rant or anything, I just try to understand whats the sense behind this? Also, why is the header element listed under sections, if its not a sectioning element?
By the way, is HTML5 outlining still as broken as it was about a year ago? Or is there a tool or something that handles it correct by now?
So, according to the comment, You have three active games: is
still part of the subsection.
Keyword here is according to the comment, which is not the code. Technically the paragraph is a child of the body. I'ld agree the coding and comments do not match, but the code is technically not incorrect. And there are no restrictions that comments or content can only exist in one block.
This
<div>
<p>
</div>
</p>
is technically incorrect which you can see more clearly if I add some CSS.
div { height:100px; width:auto; }
p {display:block; height:50px; width:300px}
Given that CSS what is the above code suppose to look like?
What compatible browsers may do is rewrite the above code into
<div>
<p></p>
</div>
<p></p>
After the browser engine rewrite the HTML and CSS can be rendered.
I know there are tons of questions about this topic but I can't find an authoritative source for the answer.
This is the official definition and the wiki page, and there there is more documentation, but there they don't explain the correct usage if not in a very simple examples or in different ways.
What I've "understood" so far:
<section> defines a part(section) of the page, like blogrolls, headlines news, blog entries list, comments list, and everything which can be with a common topic.
<article> defines a content which has sense estranged from the rest of the page (?) and which has a single topic (blog entry, comment, article, etc).
But, inside an <article>, we can split parts of it in sections using <section>, and in this case it has the function of container to mark chapters of a bigger text.
The doubt
If these sentences are correct (or partially correct) that means that <section> has two completly different usage cases.
We could have a page written in this way:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Fruits</title>
</head>
<body>
<h1>Fruits war blog</h1>
<section id="headlineNews"> <!-- USED AS CONTAINER -->
<h1>What's new about fruits?</h1>
<article><h1>Apples are the best</h1>Apples are better than bananas</article>
<article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>
</section>
<section id="blogEntries"> <!-- USED AS CONTAINER -->
<h1>Articles about fruits</h1>
<article>
<h1>Apples vs Bananas</h1>
<section> <!-- USED AS CHAPTER -->
<h2>Introduction:</h2>
Bananas have always leaded the world but...
</section>
<section> <!-- USED AS CHAPTER -->
<h2>The question:</h2>
Who is the best? We don't know so much about apples...
</section>
</article>
</section>
</body>
</html>
And this is how looks the Outline:
1. Fruits war blog
1. What's new about fruits?
1. Apples are the best
2. Apple's cakes
2. Articles about fruits
1. Apples vs Bananas
1. Introduction:
2. The question:
So the <section> is thought with two completly different and not related semantic meanings?
Is it correct use:
<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
<article>
<section></section> <!-- USED AS CHAPTER -->
</article>
</section>
in this neasted way?
I've found that is possible to use in the inversed way:
<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
<section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
<article></article> <!-- COMMENT -->
</section>
</article>
But I can't find an answer to the way I've written below.
I guess read the discussion where the W3C group has wrote the basis of the <section> tag could be useful but I can't find it.
N.B. I'm looking for replies documented with authorative sources
http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).
In the CR, section is defined as:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.
The following three examples are semantically equivalent (same meaning, same outline):
<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>
<!-- example 1: using section elements with corresponding heading levels -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h2>Waking up</h2>
<p>…</p>
</section>
<section>
<h2>The big moment!</h2>
<p>…</p>
</section>
<section>
<h2>Going to bed</h2>
<p>…</p>
</section>
</section>
<!-- example 1: using section elements with h1 everywhere -->
<section>
<h1>My first day</h1>
<p>…</p>
<section>
<h1>Waking up</h1>
<p>…</p>
</section>
<section>
<h1>The big moment!</h1>
<p>…</p>
</section>
<section>
<h1>Going to bed</h1>
<p>…</p>
</section>
</section>
So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.
Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.
article, aside and nav are, so to say, more specific variants of the section element.
two completly different usage cases
These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).
In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).
<article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.
HTML Living Standard, 4.4.11:
...
Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
...
You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).
An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).
OK so here is what I've gathered from authorative sources.
MDN:
The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Usage notes :
If it makes sense to separately syndicate the content of a element, use an element instead.
Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Shay Howe's guide:
A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.
The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.
dev.opera.com
Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
Here's the official w3c take on section:
http://www.w3.org/wiki/HTML/Elements/section
Quote: "The [section] element represents a generic section of a document or application."
I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.
Is this a correct way to use the <section> tag?
<section id="container">
<section id="outer">
<section id="inner">
</section>
</section>
</section>
I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
http://html5doctor.com/the-section-element/
From the spec:
NOTE: The section element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
<section>
<h1>Portishead</h1>
<p>Portishead are a cool band from Bristol</p>
<section>
<h1>Dummy (album)</h1>
<p>some info....</p>
<img src="..." />
</section>
<section>
<h1>Portishead (album)</h1>
<p>some other info info....</p>
<img src="..." />
</section>
</section>
Note:
My answer is severely out-of-date, and no longer contains sound advice given the changes to HTML that have happened in the last decade. I will be leaving this answer as-is for historical context, but please be aware that the structure suggested is not best practice—particularly around the use of the obsolete document outline.
Short answer: The code as you've provided is not semantically valid.
Long answer:
section elements are meant to mark up sections of content. Each section of content (i.e. Introduction, Abstract, content, conclusion) could have subsections.
If you're using those elements for structural purpose, you should be using div elements instead. They are semantically meaningless.
This would be more semantic:
<section id="introduction">
<div id="outer">
<div id="inner">
Some content
</div>
</div>
</section>
This would be a semantic way of marking up nested sections:
<section id="content">
<h1>Fizz Buzz</h1>
<section id="chapter-1">
<h1>Foo bar baz</h1>
...
</section>
<section id="chapter-2">
<h1>Lorem ipsum dolor</h1>
...
</section>
....
</section>
My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable, however you need to just make sure it makes sense to do so.
I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)
Note: assumes body/html elements are present, etc
Site Layout
<header class="header" role="banner">
....
</header>
<!-- used once per page, implies role="main" -->
<main>
<!-- declares page content to be a document and not a web app -->
<section id="wrapper" role="document">
<section class="hero">
....
</section>
....
<section class="content">
</section>
</section>
</main>
<footer class="footer" role="footer">
....
</footer>
Single-Page Content Layout
Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases
<article>
<header>
<h1>Page Headline/Title</h1>
</header>
<section class="page-content">
....
</section>
<!-- if this is a post or something with metadata/authorship info... -->
<footer>
....
</footer>
</article>
I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (e.g. easy CSS scoping).
References
role="document" https://www.w3.org/TR/wai-aria/roles#document
A region containing related information that is declared as document content, as opposed to a web application.
"Why the <main> element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/
The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.
"W3.org/Wiki explanation of nesting <section> elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element
The section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary. The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.
A useful way to think through this is to consider how a screen reader would see your site. Imagine (and in fact you should test this for yourself) the screenreader announcing the word 'section' before reading the content inside your <section> tag.
If that doesn't make logical sense then maybe you've got your items ordered wrong.
Check out aria region role.
I don't know exactly how screen readers read nested sections but if the logical
sections on your page don't have a hierarchy then your HTML shouldn't either.
eg. (this is meant to represent HTML structure)
GOOD
section aria-label="dogs"
section aria-label="labradors"
section aria-labels="terriers"
section aria-label="cats"
section aria-label="sphynx"
section aria-label="persian"
BAD
Section used solely to group two other sections, but without a real meaning of its own as a 'section'.
section style="display: flex; flex-direction: row"
section aria-label="news"
section aria-labels="sport"
HTML5 also allows for setups such as:
<section>
<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>
</section>
multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.
Check out the http://gsnedders.html5.org/outliner/
An updated method (as far as I understand it) could be something like this:
<main id="content">
<div id="inner-wrapper">
<section>
<h1>Section Title</h1>
...
</section>
<section>
<h1>Section Title</h1>
...
</section>
</div>
</main>
main {
width: 100%;
...
...
}
#inner_wrapper {
max-width: 80%;
margin: 0 auto;
}
See: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ or http://html5doctor.com/the-main-element/ for more info.
I'm wondering if this construction would be semantically correct in HTML5.
<html>
<head></head>
<body>
<aside>
<header>
<h1></h1>
</header>
<div>
</div>
</aside>
<section id="content">
</section>
</body>
</html>
What I want is a left bar taking the 30% of the screen, with the logo and some stuff below it, and then the content taking the other 70% on the right side.
Thanks a lot.
Given that HTML5 is still a draft, the specs says
A header element is intended to
usually contain the section's heading
(an h1–h6 element or an hgroup
element), but this is not required.
The header element can also be used to
wrap a section's table of contents, a
search form, or any relevant logos.
and
The [aside] element can be used for
typographical effects like pull quotes
or sidebars, for advertising, for
groups of nav elements, and for other
content that is considered separate
from the main content of the page.
and the only "restriction" on the <aside /> tag is
It's not appropriate to use the aside
element just for parentheticals, since
those are part of the main flow of the
document
event though there are no explicit examples with <header /> tags inside <aside /> tags, I would consider them OK.
Links:
http://dev.w3.org/html5/spec/Overview.html#the-header-element
http://dev.w3.org/html5/spec/Overview.html#the-aside-element
There’s nothing wrong per se with the code you’ve put there, but bear in mind that the <aside> tag is a sectioning content element, so the <header> and <h1> inside it will be treated as the heading just for the <aside>, rather than for the whole page (at least under the HTML5 outlining algorithm, which, sadly, seems to be dead in practice).
That might be what you intend. If not, then if everything in the left column is pretty much just introductory content for the page, you could put it all inside a <header> element and lose the <aside> completely:
<html>
<head></head>
<body>
<header>
<h1></h1>
<div>
</div>
</header>
<section id="content">
</section>
</body>
</html>
You might also consider replacing <section id="content"></section> with a <main> element.