html

HTML article Tag

HTML5 introduced the “<article>” tag that can be utilized to represent a specific self-contained component in any document, application, or site. This HTML component can be reusable and distributive, such as in a forum post, a magazine, a blog post, and more.

This study will teach you about the HTML <article> tag. So, let’s go!

What is HTML <article> Tag?

The <article> element and <div> element work similarly in terms of functionality, styling, and display. However, the <article> tag in a document gives more semantic information to search engines and screen readers. Moreover, an HTML file contains multiple <article> tags that can be nested.

How to Use HTML <article> Tag?

To use the HTML <article> tag, follow the below-given syntax:

<article></article>

 
Here, “<article>” is the starting tag, and “</article>” is the ending tag.

Let’s go through an example for demonstrating the <article> tag usage.

Example: Using <article> Tag in HTML

In HTML, first, add a <article> tag with a class named “all-OS” and the <h1> for the heading. Then, add another <article> tag with a class named “os”. Inside this <article> tag, specify the <h2> for the heading and <p> for a paragraph. After that, include the two <article> tags nested with <h2> and <p> tags as follows:

<article class="all-OS">
  <h1>Most Popular Operating Systems</h1>
  <article class="os">
      <h2>Windows</h2>
      <p>Windows is a group of multiple proprietary graphical operating systems. It is developed and marketed by Microsoft.</p>
  </article>
  <article class="os">
      <h2>Linux</h2>
      <p>Linux is an open-source operating system based on the Linux kernel. It is  typically packaged as a Linux distribution.</p>
  </article>
  <article class="os">
      <h2>macOS</h2>
      <p>macOS is a Unix operating system developed and marketed by Apple Inc. It is known as the main operating system for Apple's Mac computers.</p>
  </article>
</article>

 
The next section will describe the CSS styles applied to the above-mentioned HTML elements.

Style all-OS div

.all-OS {
         margin: 0;
         padding: 5px;
         background-color: rgb(155, 155, 155);
}

 
The div with the class name “all-OS” is styled like this:

    • .all_OS” is used to access the related <div>.
    • margin” property is utilized to add space around the div element.
    • padding” property adds space around the content of the div element.
    • background-color” is set to apply the background color of the div element.

Style os div

.os {
    margin: 10px;
    padding: 5px;
    background: white;
}

 
Apply styles to the next <div> named “os”. The description of the properties is given below:

    • .os” access the <div> with the name os.
    • margin” property adds a space of 10px around the div.
    • padding” property adds a space of 5px around the content of the div element.
    • background-color” property sets the div element’s background color.

After providing the CSS styling properties to the above <div> tags, the paragraph is styled by setting the properties as mentioned below.

Style p Element

p {
    margin: 3px;
    font-size: 15px;
}

 
The following properties are applied to the <p> element:

    • margin” property adds 3px space around the element’s content.
    • font-size” property sets the text font size as 15px.

Save the added code and open the file in your browser. The result will be displayed as shown below:


The above-provided document can have multiple articles, and the explanation related to each operating system is contained in the <article> tag. Moreover, one article is displayed one after the other as the screen scrolls.

That’s how we can create blog posts, forum posts, and magazine-like documents using the HTML <article> tag.

Conclusion

As we know, article writers or bloggers write the document by keeping in mind the core concept of the topic. Likewise, in HTML, the <article> tags are used to mention content that is fully contained and independent. Moreover, there can be one or more <article> tags in an HTML file, which can be nested. This study has explained the usage of <article> tag with an example.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.