Learn SQL

HTML <article> Tag: Uses, Attributes and Examples

By Cristian G. Guasch •  Updated: 09/25/23 •  10 min read

When it comes to structuring content on a webpage, HTML plays a critical role. As a web developer or designer, you’ll find that understanding HTML tags and their functions is paramount. Today, I’m going to delve into one such important tag – the <article> tag.

The <article> tag in HTML5 is not just another element; it’s an essential tool for organizing your content semantically. It helps define independent sections of self-contained content which could be understood outside the context of the complete page.

From news items and blog posts to forum posts and user comments, there are myriad applications for this versatile tag. But how do we use it correctly? What attributes does it support? To answer these questions (and more), I’ll walk you through detailed examples and best practices surrounding the <article> tag. Buckle up, because we’re about to dive deep into the world of HTML!
Let’s dive into the heart of HTML, more specifically, the <article> tag. It’s a semantic element that separates content such as news items or blog posts on your webpage. I’m sure we’ve all seen it used in various places – blog posts, forum threads, and even in digital newspapers.

So why is the <article> tag so important? Well, it clearly defines independent, self-contained content. This means that if you were to take this piece of content out of context from your website, it would still make sense to any reader. For instance:

<article>
  <h2>My First Blog Post</h2>
  <p>This is the first paragraph of my blog post...</p>
</article>

In this example above, anyone can understand what they’re reading – it’s a standalone article about ‘My First Blog Post’.

Of course, there are several attributes you can use with the <article> tag to enhance its functionality. These include id and class, which allow for specific styling through CSS or targeting via JavaScript.

<article id="first-post" class="blog">
  ...
</article>

Here’s where some people stumble: confusing <section> with <article>. While both tags segment parts of an HTML document, remember that <section> is appropriate for grouping related elements (like chapters), while our beloved <article> should encapsulate independent pieces of content.

Finally let’s address a common mistake: using multiple <h1> tags inside separate articles on a single page. It’s perfectly acceptable! Each article has its own hierarchy so feel free to start each one with an <h1> heading.

<article>
  <h1>Title One</h1>
  ...
</article>

<article>
  <h1>Title Two</h1>
  ...
</article>

So there you have it, a brief overview of the <article> tag and how to use it effectively. As with any aspect of coding, practice makes perfect. So go ahead, experiment with this tag in your next project!

Attributes of the HTML <article> Tag

I’m sure you’re eager to learn more about the attributes of the HTML <article> tag. Well, let’s dive right in! The <article> tag itself doesn’t have any specific attributes; it simply uses the global attributes available in HTML5. However, two useful global attributes that often come into play with this tag are id and class.

Now, why would we use these? Let me explain.

An id attribute is a unique identifier for an element on a webpage. It can be quite handy when you want to style or manipulate a specific article segment with CSS or JavaScript. Here’s how you might apply it:

<article id="intro">
    <h2>Welcome to my blog!</h2>
    <p>This is where I share my thoughts on web development.</p>
</article>

In this example, ‘intro’ could be used as a hook for CSS styles or JavaScript functions specifically targeting this article section.

On the other hand, we’ve got the class attribute. While an id must be unique within a page, classes can be reused across multiple elements – perfect for applying common styles! Let’s take a look at what that would look like:

<article class="blog-post">
    <h2>HTML Basics</h2>
    <p>Let's delve into the world of semantic markup...</p>
</article>

<article class="blog-post">
    <h2>CSS Selectors</h2>
    <p>Discover how to target your HTML elements with precision.</p>
</article>

In both these snippets, we’ve applied a ‘blog-post’ class that could represent shared styling rules in our CSS.

A word of caution though – while it’s tempting to add multiple classes or ids for maximum flexibility, remember: simplicity is key. Overuse can lead to a cluttered, confusing codebase, so use them judiciously.

And there you have it! While the <article> tag doesn’t bring its own unique attributes to the table, these global attributes offer plenty of utility for structuring and styling your HTML content effectively. Remember – it’s all about using the right tool for the job, and in some cases, that tool might be as straightforward as an id or class.

Practical Examples Using the <article> Tag

Let’s dive into some practical examples of how to use the HTML <article> tag. First up, we’ll start with a simple example. Suppose you’re working on a blog post. Here’s how you might structure your content using the <article> tag:

<article>
  <h2>Title of Blog Post</h2>
  <p>The first paragraph of the blog post...</p>
  <!-- More paragraphs -->
</article>

Notice that everything related to this specific blog post is wrapped in an <article> tag. It neatly encapsulates our content, making it distinct and easily identifiable.

Now let’s add some complexity. What if our blog post has comments? Each comment could also be considered its own standalone piece of content – so they could each be contained within their own <article> tags:

<article>
  <h2>Title of Blog Post</h2>
  <p>The first paragraph of the blog post...</p>

  <!-- Comments Section -->
  <section>
    <h3>Comments:</h3>

    <!-- Comment -->
    <article>
      <p>Commenter Name says...</p>
      <!-- The actual comment text -->
    </article>

    <!-- More comments... -->

  </section>

</article>

In this case, we’ve got articles nested inside another article! This shows just how versatile and powerful this tag can be.

However, remember not to overuse it. While it’s tempting to wrap every section of your page in an <article> tag, remember that it should only be used for independent items of content. If something doesn’t make sense out-of-context or isn’t intended to stand alone, you’re probably better off using a different element like a <div> or <section>.

It’s also worth mentioning that while the <article> tag is supported by all modern browsers, some older ones may struggle. To avoid any issues, it’s always a good idea to test your HTML on various platforms and browsers.

And there you have it – a quick tour of the <article> tag in action! With these examples to guide you, I’m confident that you’ll be able to effectively use this useful HTML element in your own projects.
Let’s dive straight into the common mistakes we often see when using the HTML <article> tag. One of the most prevalent slip-ups is not understanding what content qualifies as an “article”. Remember, it’s not about length but rather substance. An article should be a coherent and independent piece of text that makes sense on its own, like news stories, blog posts, or forum threads. Using <article> for unrelated chunks of content is definitely a no-no.

Take a look at this code snippet:

<article>
  <h1>Welcome to my website!</h1>
  <p>This is just a regular paragraph.</p>
</article>

In this example, neither the heading nor the paragraph form an independent piece of content. They don’t qualify as an “article” and shouldn’t be wrapped with an <article> tag.

Another widespread mistake involves nesting articles improperly. If you’ve got sub-articles within an article, they should directly relate to the parent article. If they don’t, it’s better to separate them out.

Here’s what not to do:

<article>
  <h1>My Favorite Recipes</h1>

  <article>
    <h2>How To Code in Python</h2>
    ...
  </article>

</article>

The nested article has nothing to do with the parent one – big mistake!

Lastly, let’s discuss misuse of <section> and <div>. It can be tempting to use these interchangeably with <article>, but remember: each has its specific purpose! While both can group related elements together, only use <section> for thematic grouping of content where each section stands alone in context (like chapters), and reserve <div> for styling purposes without semantic meaning.

To sum up: get your definitions right; nest articles properly; and differentiate between <section>, <div>, and <article>. Keep these points in mind, and you’ll avoid the most common pitfalls of using the HTML <article> tag.

Conclusion: Mastering the Use of HTML’s <article> Tag

I’ve journeyed with you through the intriguing world of HTML’s <article> tag. It’s time to pull together all that we’ve learned and wrap up this comprehensive guide.

Firstly, remember the <article> tag is a semantic element in HTML5. Its purpose? To mark up self-contained content on your webpage – think blog posts or news articles. The content within an <article> tag should make sense independently of the rest of your site.

Here’s a quick recap using code:

<article>
  <h2>My Blog Post</h2>
  <p>Content goes here...</p>
</article>

Now, let’s not forget about attributes, specifically id and class. These allow us to add unique identifiers and style our <article> elements respectively.

Again, let me illustrate with some code:

<article id="first-post" class="blog-post">
  <h2>My First Blog Post</h2>
  <p>Content goes here...</p>
</article>

A common mistake I’ve seen is confusing the use of <section> and <article>. While they might seem similar, keep in mind that a section is for grouping related content while an article holds stand-alone content.

So there you have it – my take on mastering HTML’s <article> tag. Armed with this knowledge, I’m confident you’ll apply it effectively in your web development journey!

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles