Semantic HTML - Articles

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 HTML elements for beginners — honestly even for some veteran HTML developers — namely, <article>.

There's a lot to learn here, all superbly fruitful information, so let's not spend any more of our time in this introduction and just get right away into talking business.

Before we understand the purpose 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.

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 an online shopping store's webpage, displaying a list of products:

A products list page.

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:

A blog article with user comments.

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>.

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.

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:

Live Example

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.

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:

Live Example

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 &rarr;</a></p>
</article>
<article>
   <h2>Glass vase</h2>
   <p>$4.99 <s>$5.99</s></p>
   <p><a href="#">See details &rarr;</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:

Live Example

Simple, but effective in its purpose of conveying semantics.

<article> is a sectioning element

Recall from the Semantic HTML — Headers and Footers chapter that when <header> and <footer> are placed inside a sectioning element, they are scoped to that very element.

Speaking of which, the <article> element is also a sectioning element in HTML (the others being <aside>, <main>, and <section>). It defines the scope of nested <header> and <footer> elements.

Consider the following:

<article class="post">
   <header>
      <!-- Contains the profile picture and some extra settings -->
   </header>

   <!-- The actual content -->
</article>

Here, the <header> only applies to the <article> element, representing the top part of the social media post.

In contrast, if we have a <div> instead of an <article>, the <header> would instead apply to the entire document — clearly not what we'd want.

<article> must denote self-contained, independent content

As per the definition of <article>, the content it denotes must be independent and self-contained and where another element doesn't make.

This is really important to keep in mind.

For example, using <article> for representing the sidebar on a blog article page containing related links doesn't make sense. "Why?" you ask. That's because the related links section only makes sense within the context of the page where it currently is.

If, let's say, we extract it out from the page and then view it independently (maybe, print it all alone), it would lose its intuition because its 'related' trait now ceases to have any context within it. That is, what is that the section relates to.

Previously, the related links section was within the blog article page and so it presented links related to the blog article but on its own, there's nothing it relates to.

<article> can be nested inside <article>

It's perfectly valid to nest <article> inside an <article>. We've already seen an example of this in the discussion above.

Consider the case where we have a social media website's home feed for a given person, showcasing all his latest posts. Each post is denoted using an <article> because it's certainly a self-contained and independent piece of content.

Therein, within each post, we have a set of comments for the post. Each comment is also a perfect candidate for an <article> element because it's independently usable.

For example, it won't be surprising to know that the social media website might allow the user to view all of his various comments on different posts on one single page. And so, in this way, the website would be extracting comments from where they were originally made to another page — rendering them automatically valid for <article>.

Let's take this example to the glyphs of code.

Following we have an <article> element representing the social media post we were talking about earlier, containing user comments inside of it, each denoted as an <article> as well:

<article class="post">
   <header>
      <!-- Contains the profile picture and some extra settings -->
   </header>
   <div>
      <!-- The actual content -->
   </div>
   <footer>
      <!-- Like, share, and comment buttons -->
   </footer>
   
   <div class="comments">
      <article>
         <!-- Comment 1 -->
      </article>
      <article>
         <!-- Comment 2 -->
      </article>
   </div>
</article>

Be careful when nesting <article> inside <article> though. You must make sure that the nested article is somehow related to the outer <article>.

Applying this test to our example above, clearly the inner <article>s, which represent user comments, inside the outer <article>, which represents the post, are related and are therefore perfectly valid.

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:

A section forms part of something else. An article is 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.