Section vs Article HTML5
In the W3 wiki page about structuring HTML5, it says:
<section>
: Used to either group different articles into different purposes or
subjects, or to define the different sections of a single article.
And then displays an image that I cleaned up:
It also describes how to use the <article>
tag (from same W3 link above):
<article>
is related to<section>
, but is distinctly different.
Whereas<section>
is for grouping distinct sections of content or
functionality,<article>
is for containing related individual
standalone pieces of content, such as individual blog posts, videos,
images or news items. Think of it this way - if you have a number of
items of content, each of which would be suitable for reading on their
own, and would make sense to syndicate as separate items in an RSS
feed, then<article>
is suitable for marking them up.In our example,
<section id="main">
contains blog entries. Each blog
entry would be suitable for syndicating as an item in an RSS feed, and
would make sense when read on its own, out of context, therefore
<article>
is perfect for them:
<section id="main">
<article>
<!-- first blog post -->
</article>
<article>
<!-- second blog post -->
</article>
<article>
<!-- third blog post -->
</article>
</section>
Simple huh? Be aware though that you can also nest sections inside
articles, where it makes sense to do so. For example, if each one of
these blog posts has a consistent structure of distinct sections, then
you could put sections inside your articles as well. It could look
something like this:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
How to use <section> and <article> tags in HTML5?
It depends on your content.
For example, a list of recent blog posts could be a section
containing several article
(example 1), a complex blog post could be an article
with several section
(example 2), a blog post with comments could be an article
with a section
and several article
(example 3).
How to decide when to use which? Easy:
- If you need a sectioning content element, start with
section
. - Check if the content matches the definition of
nav
. If yes, go withnav
, else: - Check if the content matches the definition of
aside
. If yes, go withaside
, else: - Check if the content matches the definition of
article
. If yes, go witharticle
, else: - Stay with
section
.
Example 1: A list of blog posts
<section>
<h2>Recent blog posts</h2>
<article>
<h3>Blog post 1</h3>
</article>
<article>
<h3>Blog post 2</h3>
</article>
</section>
Example 2: A complex blog post
<article>
<h2>Blog post 1</h2>
<section>
<h3>So, this is what happened</h3>
</section>
<section>
<h3>What the others said</h3>
</section>
</article>
Example 3: A blog post with comments
<article>
<h2>Blog post 2</h2>
<section>
<h3>Comments</h3>
<article>
<p>First!</p>
</article>
<article>
<p>First! <ins>Edit: Second :(</ins></p>
</article>
</section>
</article>
What is the difference between <article> and <section> in html5
The <section>
tag:
The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
The <article>
tag:
The article tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.Potential sources for the article element:
- Forum post
- Blog post
- News story
- Comment
Basically these tags are semantic elements and the only real difference between them are readability and design preference.
You can read more about them here if you wish:
- http://www.w3schools.com/html/html5_semantic_elements.asp
- http://www.w3schools.com/tags/tag_article.asp
- http://www.w3schools.com/tags/tag_section.asp
When to use HTML section or article tag for a good semantic structure
Typically, the article
tag would be used on blog pages, either for a collection of several blog articles on one page (i.e. containing several <article>
tags), or for a single article page (i.e. containing one <article>
tag). In any case, an article should stand on its own thematically, its understanding not depending on anything else outside the article tag.
<section>
s are similar, but are rather used to cover several aspects of the general subject treated on the particular page (also inside an article). There are cases where those two can be interchageable, but in general interpreting the word "article" literally can help IMO.
The right way to use <section> and <article> for SEO
Read more about the HTML element article
of Mozilla:
The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.
Unlike the article
element, the section
element:
The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.
Thus, the article element can contain section elements. But the section
element cannot contain any other semantic elements.
Accordingly, your example can be presented like this:
<header>
<h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
<h2>News from Valinor</h2>
<p>A short introduction to the content of the article.</p>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
<section>
<h3>The name of section</h3>
<p>The content of section.</p>
</section>
...
</article>
<footer>
<h2>Publisher and copyright holder</h2>
<p>Publisher and © 2021 Gandalf</p>
</footer>
Should <sections> have <articles> or should <articles> have <sections>?
It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section>
and an <article>
, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.
Use the first snippet if your page consists of multiple articles.
Use the second snippet when you have an article that's comprehensive enough to contain multiple sections.
You can even combine them both if using both fits your content, such that your markup looks like this:
<section><h1>section article?</h1>
<article><h1>art 1</h1>
<section><h1>sec 1.1</h1></section>
<section><h1>sec 1.2</h1></section>
<section><h1>sec 1.3</h1></section>
</article>
<article><h1>art 2</h1>
<section><h1>sec 2.1</h1></section>
<section><h1>sec 2.2</h1></section>
<section><h1>sec 2.3</h1></section>
</article>
<article><h1>art 3</h1>
<section><h1>sec 3.1</h1></section>
<section><h1>sec 3.2</h1></section>
<section><h1>sec 3.3</h1></section>
</article>
</section>
What tags can I use inside <article> tags
The <article>
tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
The article element represents a 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.
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. [...]
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Inside the article tag, you can use most common tags. Though as per the description given in the above mentioned links, I won't suggest using them.
Here are some of the links that might help you out:
https://developer.mozilla.org/en/docs/Web/HTML/Element/section
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Related Topics
Special Character Not Displaying as Expected
Transition for Background-Image in Firefox
<A Href> Appends Link to End of Current Url
How to Add a Google Search Box to My Website
Difference Between Classes and Ids in CSS? Explain with Example of Where to Use
How to Transform Each Side of a Shape Separately
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative
Google Maps Height 100% of Div Parent
Are Void Elements and Empty Elements The Same
Text-Decoration Not Working for Visited State Link
Load Iframe Links into Parent Window
How Much Faster Is It to Use Inline/Base64 Images for a Web Site Than Just Linking to The Hard File
Body { Overflow-X: Hidden; } Breaks Position: Sticky
Dropdownlistfor Will Not Show The Correct Selection