Menu
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.
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
614
The <section> tag defines a section in a document.
7.1 Introduction to the structure of an HTML document An HTML 4 document is composed of three parts: a line containing HTML version information, a declarative header section (delimited by the HEAD element), a body, which contains the document's actual content.
What does <section> HTML Tag do? The <section> element is a structural HTML element used to group together related elements. Each <section> typically includes one or more heading elements and additional elements presenting related content.
<section> is a new HTML 5 element that defines an important section of a document. It can be used within articles, in the header or footer, or to define navigation. If a part of the content deserves its own heading, and that heading would be listed in a theoretical or actual table of contents, it should be placed in a <section>.
The numbers in the table specify the first browser version that fully supports the element. The <section> tag also supports the Global Attributes in HTML. The <section> tag also supports the Event Attributes in HTML. Most browsers will display the <section> element with the following default values:
The <section> tag also supports the Event Attributes in HTML. Most browsers will display the <section> element with the following default values:
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
sectionelement 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.).
114
<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).
42
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
