Scroll to top
Read Time: 3 min

The <article> element represents a section of content that is self-contained and can be independently distributed or reused. It typically contains a heading and a body of content, such as a blog post, news article, or user comments.


The HTML <article> element is used as follows:
  <!-- Content goes here -->


Let’s say you have a blog and want to write an article about the benefits of meditation. Here’s an example of how you could structure your HTML using the <article> element:

    <h2>The Benefits of Meditation</h2>
    <p>Meditation has been shown to reduce stress, improve focus, and boost overall well-being. This article will explore the many benefits of this ancient practice.</p>
    <img src="meditation.jpg"alt="A person meditating">
    <h3>Reduced Stress</h3>
    <p>Studies have shown that meditation can lower cortisol levels, the hormone associated with stress. Regularly practicing meditation can reduce anxiety and make you feel more relaxed in your daily life.</p>
    <h3>Improved Focus</h3>
    <p>Through meditation, you can improve your ability to concentrate and stay focused on the task at hand. This can be especially helpful for those who struggle with distractions or have a busy mind.</p>
    <h3>Better Sleep</h3>
    <p>By quieting your mind and relaxing your body, meditation can help you fall asleep faster and enjoy a more restful sleep. It can also be effective in treating insomnia and other sleep disorders.</p>



This element only includes global attributes.

Global attributes include, for example, the class attribute. This attribute is used to apply a class to the element, which can be used to style the content or apply JavaScript behavior. Here’s a demonstration:

<article class="featured">
  <!-- Content goes here -->

The featured class has been applied to the <article> element in this example. This class could be used to style the article uniquely, such as making it stand out on the page.


The <article> element can contain any HTML content, including headings, paragraphs, images, videos, and more. The content should be self-contained and focus on a single topic or idea. When using multiple <article> elements on a page, it’s good practice to include a heading inside each one, which can improve the overall readability of the content.

  • There are several other sectioning elements, useful for splitting up content on a page in a descriptive way: <article>, <aside>, <form>, <header>, <footer>,<main>, <nav>, and <section> are all sectioning elements.

Did You Know?

  • The <article> element was introduced in HTML5 to mark up self-contained content semantically.
  • Using the <article> element can improve the accessibility and SEO of your website, as it helps search engines and screen readers understand your content’s structure.

Learn More

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.