Skip to content
Related Articles

Related Articles

Differentiate between <article>, <p> & <section> tags in HTML

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 30 Jan, 2022

HTML tags are the start and end point parts of an HTML document, it starts with < (less than) and end with > (greater than angle bracket).

Tags in HTML are keywords where every specific single tag has some unique meaning.

Difference between <article> tag, <p> tag & <section> tag in HTML:

HTML <article> tag: The <article> tag is a semantic tag that describes its meaning to both developer and browser. It specifies independencies, self-container content. It doesn’t require any other context. An article makes meaning of its own and it must distribute independently from the rest of the website (even though it can be related). These tags are perfect for presenting Microdata information.

Some potential sources for article element can be:

  • Blog entry
  • Comment submitted by a user
  • Newspaper/Magazine article
  • Forum Post

Note:  The article element does not render anything special in a browser. By default, the article element is of block-level.

The article is mostly used in two contexts :

  1. On a page consisting of only one piece of content, a single <article> element is used to contain the main content and separate it off from rest of the page.
  2. On a page such as a search results page, a blog index page etc, multiple <article> elements are used to contain individual pieces of content.

Example: This example shows the use case of the <article> tag on our web page.

HTML




<!DOCTYPE html>
<html>
  
<head>
      
    <style>
        article {
            background-color: rgb(236, 233, 233);
            width: 300px;
            border: 2px solid black;
            padding: 5px;
            border-radius: 10px;
            margin: auto;
            box-sizing: border-box;
        }        
        img {
            height: 150px;
            width: 150px;
        }
    </style>
</head>
  
<body>
    <article>
        <img src=
             alt="GfG Logo">
        <h1>GeeksforGeeks</h1>
  
        <p>
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well-explained computer science 
            and programming articles, quizzes, 
            and live courses
        </p>
    </article>
</body>
  
</html>

Output:

HTML <p> tag: The <p> tag is both presentational and semantic. It defines paragraphs in HTML. Anything written within <p> and </p> is treated as paragraph. The browser automatically adds space (a single blank line) before and after each <p> element, which is simply margins added by the browser. Multiple lines and spaces added by the users are reduced to single by the browser.

Note: By default, <p> element is of block-level. <p> tag is most useful in times when there are multiple paragraphs to be added in articles, stories, etc.

Default CSS styling for <p> element in most of the browsers is as follows.

p {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 1em;
    margin-top: 1em;
}

Example: This example shows the use case of <p> tag on our web page.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Paragraph Tag</title>
    <style>
        .container {
            height: 100px;
            width: 650px;
            background-color: green;
            font-weight: 500;
            padding-top: 3px;
            color: whitesmoke;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <p>
            Hi Geeks, Welcome to GeeksforGeeks. 
            This is Paragraph 1. 
            It has multiple lines
        </p>
  
        <p>
            Hi Geeks, Welcome to GeeksforGeeks.
            This is Paragraph 2. 
            It also has multiple lines
        </p>
  
    </div>
</body>
</html>

Output: 

HTML <section> tag: The <section> tag is a semantic tag. It splits a page into different sections like introduction, details, contact Information etc which are mostly contained in different <section> tags. It can even divide contents into subsections. It is mostly used when requirements of 2 headers or any other section of documents is needed.

Note: By default <section> element is of block-level.

Example: This example shows the use case of <section> tag on our web page.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Section Tag</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            background-color: #dadada;
            margin: auto;
        }        
        div>section {
            height: calc(100%/3);
            width: 100%;
            font-size: 2rem;
            font-weight: 500;
        }        
        div>section:nth-of-type(2n) {
            background-color: green;
            color: white;
        }        
        .sub {
            font-size: 1.2rem;
            font-weight: 400;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <section> Section 1 - Education
            <section class="sub">Subsection 1 - About College</section>
            <section class="sub">Subsection 2 - About School</section>
        </section>
        <section>Section 2 - Hobbies</section>
        <section>Section 3 - Contact Info</section>
    </div>
</body>
</html>

Output:

The below table tells about the differences between <article> tag, <p> tag and <section> tag in HTML.

             <article> tag                                       <p> tag                          <section> tag    
  Article tag is a semantic tag. Paragraph is presentational and semantic tag. Section tag is a semantic tag.

 When to use:

  • Blog article
  • Newspapers/ Magazines article
  • Forum Post
When to use: Adding multiple paragraphs in articles, stories, informative blogs.When to use: Adding multiple headers or sections in a document.
Default CSS display property is               “Block”Default CSS display property is “Block”                       Default CSS display property is “Block”

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!