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.
Syntax
<article> element is used as follows:1 |
<article>
|
2 |
<!-- Content goes here -->
|
3 |
</article>
|
Example
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:
1 |
<main>
|
2 |
<article>
|
3 |
<h2>The Benefits of Meditation</h2> |
4 |
<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> |
5 |
<img src="meditation.jpg"alt="A person meditating"> |
6 |
<h3>Reduced Stress</h3> |
7 |
<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> |
8 |
<h3>Improved Focus</h3> |
9 |
<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> |
10 |
<h3>Better Sleep</h3> |
11 |
<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> |
12 |
</article>
|
13 |
</main>
|
Result
Attributes
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:
1 |
<article class="featured"> |
2 |
<!-- Content goes here -->
|
3 |
</article>
|
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.
Content
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.
Related HTML Elements
- 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
- Official W3C specification
<article>
HTML Elements
