HTML and CSS Reference
In-Depth Information
The <section> and <article> Elements
The <section> element is the most generic element for sectioning content and is primarily
used for grouping content with similar meanings. It is meant as a general container element
with some additional semantic meaning when the content has to represent a logical group of
related content. A section, in this context, is a thematic grouping of content, typically start-
ing with its own heading. Additionally, you can use <section> to define page segments. For
example, on your web page, you could put blog posts, news, and a sidebar of ads into separ-
ate <section> elements.
Similar to <section>, the <article> element was introduced as a way to group together re-
lated information in a document. It is most appropriate to consider the <article> element as a
specialized type of <section> with more specific semantic meaning. This element represents
whatever we consider an article, meaning a section of self-contained content like a newspa-
per article, blog entry, forum post or similar content items. For example, an <article> ele-
ment will contain a single blog post, while a <section> element can contain several (or all)
blog posts on the page.
What is the actual difference between <section> and <article> elements? A <section> is
a logical part of a document, and an <article> is actual content. Think of a newspaper. A
<section> element is like the sports section. The sports section has many articles, just like
<section> can contain a lot of <article> elements. Semantically, articles may be long and
content-rich with the need to be divided into their own bunch of sections. Following are a
few examples that show the interchangeable use of <section> and <article>.
A simple web blog article would have the following structure:
<article>
<h1>Blog Article Heading</h1>
<p>Article Content</p>
</article>
Conversely, a page that lists multiple blog articles would have the following structure:
<section>
<article>
<h1>Blog Article #1 Heading</h1>
<p>Article Content</p>
Search WWH ::
Custom Search