HTML Element: article

Syntax

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 & CSS for Beginners (MEGA Free Course!)

  

  Adi Purdila

  08 Sep 2022