Introduction
As we've been witnessing throughout this unit, semantic HTML is a vital part of becoming a great HTML developer. There is a sea of semantic elements to learn in this regard. We already saw the elements <header>, <footer> and <aside> in the preceding chapters.
Now, this chapter is devoted to exploring perhaps one of the most troubling set of elements for beginners — honestly even for some veteran HTML developers — namely, <article> and <section>.
HTML developers often indulge in discussions as to whether they should use <article> or <section> to denote given sections in webpages. The reality is that it isn't that hard, and even shouldn't be so, to decide between these two. In this chapter, we'll get to know exactly when to use <article> and when to use <section>.
There's a lot to learn here, all superbly fruitful information, so let's not waste any more of our time in this introduction and just get right away into talking business.
What is <article>?
Before we explain the meaning of <article>, it's important for us to be crystal-clear on what the word 'article' here does NOT stand for. This will help us better understand the element.
On the web, as you'd probably know, the word 'article' is typically associated with a blog article, which is a large chunk of text representing a written piece of information for a given topic.
However, the word 'article' in <article> does NOT represent a blog article.
This is absolutely crucial to keep in mind. Instead, the word 'article' in <article> stands for article in the sense of how we'd say "there were many articles in the shop." Here, in the sentence, the word represents independent, purchasable items in the shop.
Alright, now let's get to the definition of the element.
<article> element is used to denote a self-contained, independent section on a webpage.Quoting from the official HTML standard:
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.
As per the definition of <article>, it seems that it's a particularly handy element to use whose need intrinsically resides in many webpages.
That is, customarily, many webpages have many independent, self-contained sections in them, such as those representing user comments, a list of products, and suchlike. All these sections render themselves perfect to go with the <article> element.
For example, shown below is an illustration of a webpage from an online store, displaying a list of products:
Each product, highlighted with a blue-bordered box, is an independent entity in the store and is, thus, a perfect candidate for <article>.
It's important to note that it's perfectly valid, and not even a rare thing, to nest <article> elements inside <article>. In such a case, the inner <article>s are related in practice to the outer <article> elements.
A familiar example of nesting <article> inside an <article> is of user comments inside a blog article, as illustrated below:
The whole article, including the comments, would be wrapped up inside an <article> element as it denotes a self-contained piece of information that could be shared as a standalone entity; the comments therein would also be <article>s on their own (since they are independent entities as well) as they are related to the blog article.
Let's now see some examples of <article>.
Examples of <article>
Let's start off with a naive usage of <article>, in denoting an entire blog article. But before we begin, it's good to understand why exactly we're using <article> for this use case.
If you think of a blog article, it's clearly a self-contained piece of information that can be redistributed independently on its own. Hence, it makes perfect sense to mark it up using the <article> element.
<article>.As a rule of thumb, remember that whenever we have something that can exist on its own without needing something extra to give context to it, we can use, and ideally should use, <article> for that thing.
Anyways, following is the minimal HTML for a blog article page:
<header style="background-color: pink">The header</header>
<article>
<h1>Writing your first HTML document</h1>
<p>Written by <em>Alice</em>.</p>
<p>It's very easy to write your first HTML document.</p>
<p>...</p>
</article>
<footer style="background-color: pink">The footer</footer>Notice how the <article> element denotes the entire main blog article section, obviously excluding the header and footer since they both aren't part of the article itself.
Also notice the background color given to the <header> and <footer> elements — this is only to visually demarcate them as separate sections (otherwise, they would just look as mere text).
Here's the output produced:
To add some spice to this example, let's bring on a user comments section as well.
Following, we try to emulate user comments with two very basic <div>s, each representing a separate comment, and a <div> to wrap the entire comments section:
<header style="background-color: pink">The header</header>
<article>
<h1>Writing your first HTML document</h1>
<p>Written by <em>Alice</em>.</p>
<p>It's very easy to write your first HTML document.</p>
<p>...</p>
<div class="comments" style="background-color: lightgrey">
<h2>User comments</h2>
<div class="comment">
<p>From <em>user_1</em></p>
<p>A wonderful article!</p>
</div>
<div class="comment">
<p>From <em>user_2</em></p>
<p>Very well written!</p>
</div>
</div>
</article>
<footer style="background-color: pink">The footer</footer>The classes applied to the <div>s here are meant to better explain their purpose. But when we'll take this HTML into a real website, these can also be used to easily select the <div>s for the sake of styling them using CSS.
Anyways, since we're learning about semantic HTML right now, we should take the code snippet above with a grain of salt.
A <div> representing each user comment? Seriously? Can't we do any better than this?
Well, it turns out, we could.
Since each user comment is an independent entity on its own, it can too be denoted using <article>. And so, our main <article> element, denoting the entire blog article, would be containing <article>s inside of it.
Again, this makes sense because the inner <article>s, each denoting a user comment, are related to the outer <article>, denoting the entire blog article — the comments are part of the article.
<article> is nested inside an <article>, the inner <article> should be somehow related to the outer <article>.Here's the HTML we'll get after making each comment an <article> on its own:
<header style="background-color: pink">The header</header>
<article>
<h1>Writing your first HTML document</h1>
<p>Written by <em>Alice</em>.</p>
<p>It's very easy to write your first HTML document.</p>
<p>...</p>
<div class="comments" style="background-color: lightgrey">
<h2>User comments</h2>
<article class="comment">
<p>From <em>user_1</em></p>
<p>A wonderful article!</p>
</article>
<article class="comment">
<p>From <em>user_2</em></p>
<p>Very well written!</p>
</article>
</div>
</article>
<footer style="background-color: pink">The footer</footer>Let's see the output produced:
Obviously, visually there won't be any difference than what we had before, for <article>s aren't styled any differently than <div>s, by default, by browsers.
However, clearly, semantically this code is much better than the previous one where we denoted each user comment with the mundane, generic <div> element.
Great.
Over to example number two.
Consider a products list page from an online shopping store.
As you'd probably already know, and what's even evident from the name, a products list page showcases a list of products. Typically, each product is shown with its image, name, and price, along with a button to add it to a cart.
Let's try to replicate a products list page.
The most important point to note here is that since each product is an independent, self-contained entity, each product will be denoted using <article>.
Here's our basic HTML:
<header style="background-color: pink">The header</header>
<h1>Products</h1>
<article>
<h2>Wooden chair</h2>
<p>$15.49 <s>$20.49</s></p>
<p><a href="#">See details →</a></p>
</article>
<article>
<h2>Glass vase</h2>
<p>$4.99 <s>$5.99</s></p>
<p><a href="#">See details →</a></p>
</article>
<footer style="background-color: pink">The footer</footer>Instead of giving the conventional 'Add to cart' button for each product, we've shimmed with a dummy hyperlink to learn more about the underlying product.
Obviously, the created products list is nowhere even close to a product list page from a real website. Still though, the idea of how and when to use <article> is made clear even such a simple HTML.
And that's essentially what we're concerned right now with, not with closely replicating webpages, right?
Let's see the result of the HTML:
Simple, but effective in its purpose of conveying semantics.
What is <section>?
Now that we've covered some ground for the <article> element, it's time to discuss another element in HTML to denote sections. That is <section>.
The <section> element is yet another element besides <article> that is considered amongst the four elements used to denote whole sections as per the HTML standard.
That is, <section> is also a sectioning content element, and likewise specifies the scope of <header> and <footer> elements.
But what exactly is <section>?
Well, it's very simple.
<section> element is used as a generic container to denote a section in HTML.Immediately by reading this definition, one might assimilate <section> to <div>, which is considered to be a generic container for a set of elements.
So is <div> the same as <section>? Well, no.
<div> vs. <section>
It's important to keep in mind that <section> and <div> are two different elements with two different purposes.
<section> is meant to act as a generic element to represent a section in HTML whereas <div> is meant to act as a generic container for any set of elements that don't necessarily constitute a section.
Continuing the discussion, here's what the official HTML standard has to say for <section>:
The section element represents a generic section of a document or application.
It even has a snippet giving some examples of sections, as quoted below:
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.
Evidently, it seems that the <section> element, just like <article>, ain't an occasionally used element in HTML.
<section> represents a generic section, most webpages contain such sections, therefore <section> has its use case in most webpages.
A pretty simple consequence.
Most of the time, if not always, a <section> should contain a heading inside of it, followed by other HTML elements which then define the rest of the content of the section.
This isn't strictly a requirement imposed on us by the HTML standard, but it's often the case and that's why we felt that it's important to point out. Obviously, there are exceptional cases as well but generally this is, and should be, the case.
Moving on, a common source of confusion for many HTML developers is how to determine when to use <article> and when to use <section>. This is a really good topic to debate on and is, thus, the emphasis of the last section on this page.
For now, let's delve into some code examples utilizing <section>.
Examples of <section>
Let's say we have a tutorial page for a software, whereby the page's main content is divided into multiple sections, each one containing a heading along with some copy text.
Each section contains content with a single theme, expanding upon one single topic for the software's tutorial, as we just specified above.
We can create the HTML of this page as follows, including the main, top-level heading of the document:
<h1>Learning software</h1>
<section>
<h2>Introduction</h2>
<p>This is the introduction to the software.</p>
<p>...</p>
</section>
<section>
<h2>Installing the software</h2>
<p>This is how to install the software.</p>
<p>...</p>
</section>Notice how each section is denoted using the <section> element.
It's apposite to note that the sections here can't, and shouldn't, be represented using <article>. Why, you ask?
Well, that's because the sections aren't independent entities on their own. Each section only makes sense when it is amalgamated with the rest of the sections on the webpage.
As we learnt above, an <article>, in principle, should be exclusively used to denote a section of content that is self-contained and independent on its own, i.e. it doesn't need to be combined with other pieces of content to make sense.
And, therefore, it makes no sense to represent each section in the example above via <article> simply because each section ain't independent on its own.
In the last section on this page, we shall talk more on this distinction between <section> and <article> in detail.
Anyways, let's now move to our second example of <section>.
Suppose that we have a product list page, as discussed above.
Previously, we simply had a set of products displayed on the page but now let's also introduce a section to allow us to filter these products, for e.g. by their category, price range, etc.
As before, because we obviously don't have the knowledge of all the tools that will otherwise be required to bake a filtering functionality associated with a list of products, we would be going with a simple emulation.
Here's our products list page, with a section containing the filtering functionalities:
<header style="background-color: pink">The header</header>
<h1>Products</h1>
<section style="background-color: lightgrey">
<h2>Filter products</h2>
<p>Here are the functions to filter the products.</p>
</section>
<article>
<h2>Wooden chair</h2>
<p>$15.49 <s>$20.49</s></p>
<p><a href="#">See details →</a></p>
</article>
<article>
<h2>Glass vase</h2>
<p>$4.99 <s>$5.99</s></p>
<p><a href="#">See details →</a></p>
</article>
<footer style="background-color: pink">The footer</footer>The element used to denote the filter section is <section>.
But why <section>, and not any other element?
Firstly, because the filter section is a separate section of the products list page, and secondly, because no other sectioning element — not <article>, not <aside>, and not even <nav> — makes more sense to represent it. Hence, the sensible choice is <section>.
Take a look at the resulting webpage as follows:
Before we end this discussion, there's one improvement that we could do in the code above, leveraging the <section> element. Can you spot it?
See how the <article>s altogether aren't sitting inside any containing element, yet they conjointly represent one single concept, that is, of a list of products. In other words, the whole list of products represents a separate section of the webpage and should, likewise, be denoted using <section>.
Note that we don't use <article> here because the list of products doesn't represent a single, self-contained entity. The self-contained entities are only the individual products themselves.
In the following code, we mark up the set of <article>s with a <section>:
<header style="background-color: pink">The header</header>
<h1>Products</h1>
<section style="background-color: lightgrey">
<h2>Filter products</h2>
<p>Here are the functions to filter the products.</p>
</section>
<section class="products-list">
<article>
<h2>Wooden chair</h2>
<p>$15.49 <s>$20.49</s></p>
<p><a href="#">See details →</a></p>
</article>
<article>
<h2>Glass vase</h2>
<p>$4.99 <s>$5.99</s></p>
<p><a href="#">See details →</a></p>
</article>
</section>
<footer style="background-color: pink">The footer</footer>The class applied to the new <section> element here is given to make it clear as to what's the purpose of the <section>, which is to denote a list of products.
In a real products list page, we'll need this class in order to select the <section> easily using CSS. In fact, we'll also need some class applied to the <article>s, let's say "product", to be able to select them as well.
<article> vs. <section>
Perhaps, one of the most debatable aspects of semantic elements in HTML is whether to use <article> or <section> in a particular scenario.
In fact, the HTML standard has a whole section dedicated to discussing about the distinction between <article> and <section>.
Quoting the first line from this section:
Asectionforms part of something else. Anarticleis its own thing.
Let's start drawing the line between these two.
First of all, it's worthwhile noting that <section> and <article> are both used to define sections in webpages. That is, they both fall under the category of sectioning content elements in HTML.
So if we're not necessarily dealing with a section of a webpage, and just want a container for a set of elements, we should not even be getting into this discussion of choosing between <article> and <section>; we should just be using <div>.
With that clear, let's now get to the distinction between them.
<article> is meant to denote self-contained sections that don't require additional content with them in order to make sense. <section> is meant to denote a generic section when no other sectioning element makes sense.
The latter statement here clearly asserts that <section> should NOT be our first resort in selecting an HTML element to represent a section of content; instead, it must be the last resort, when nothing else makes sense.
To be very precise, if a section of content doesn't make sense to be denoted using <aside>, <article>, or <nav> (as we shall explore later on), then we must use <section> for it.
