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:
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:
<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
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
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
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.
Source: linuxhint.com