Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Which specific tag is used to represent the article in HTML ?

  • Last Updated : 16 Jan, 2022

In this article, we will see how to represent the article in HTML.

The <article> tag is one of the new sectioning element in HTML5. The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent of the other content of the site (even though it can be related).

In other words, the article element represents a component of a page that consists of self-contained composition in a document, page, or site. For example – in syndication.

A potential source for Article Element are:

  1. A magazine/newspaper article
  2. A blog entry
  3. A forum post
  4. A user-submitted a comment

This tag is most often used in two contexts:

  • On a page with a single piece of content, a single <article> element can be used to contain the main content and set it off from the rest of the page. 
  • On a page with multiple pieces of content (a blog index page, a search results page, a category page, news feed), multiple <article> elements can be used to contain each individual piece of content. 

Either way, it is similar to the <div> element and displays the stylish work the same. However, using the <article> element instead of <div> provides more semantic information to screen readers, search engines, and third-party applications.

Note: This tag does not render as anything special in a browser, you have to use CSS for that.

Default CSS setting: Most browsers will display the Article element with the following values.

Syntax:

<article> {
    display:block;
}

Example: This example using inline styling in an article element.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <article style="
        width: 300px;
        border: 2px solid gray;
        padding: 10px;
        border-radius: 10px;
        margin: 5px;">
        <img src=
            alt="article tag"
            width="300" height="250" 
            class="alignnone size-medium wp-image-560930" />
  
        <h1>GeeksforGeeks</h1>
  
        <p>
            What We Offer We provide a variety of 
            services for you to learn, thrive and 
            also have fun! Free Tutorials, Millions 
            of Articles, Live, Online and Classroom 
            Courses ,Frequent Coding Competitions, 
            Webinars by Industry Experts, Internship 
            opportunities and Job Opportunities.
        </p>
    </article>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!