Differentiate between <article>, <p> & <section> tags in HTML
Last Updated :
27 Mar, 2024
HTML is a language full of diverse elements, and three such elements are the <article>, <p>, and <section> tags. These semantic tags, while similar, each have unique uses and meanings within an HTML document.
The article tag is used for the independent content, p tag for paragraph and section for different section of the document.
Tags in HTML are keywords where every specific single tag has some unique meaning.
HTML <article> tag
The <article> tag is a semantic tag that describes its meaning to both the developer and the browser. It specifies independent, self-contained content that doesn’t require any other context. An article makes sense on its own and can be distributed independently from the rest of the website. These tags are perfect for presenting Microdata information.
The <article> tag is mostly used in two contexts: on a page consisting of only one piece of content, and on a page such as a search results page or a blog index page, where multiple <article> elements are used to contain individual pieces of content.
Some potential sources for article elements 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 :
- 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.
- 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220120191044/logo-200x145.png"
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, standing for ‘paragraph’, defines paragraphs in HTML. Anything written within <p> and </p> is treated as a 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 a single space by the browser. The <p> tag is most useful when there are multiple paragraphs to be added in articles, stories, etc.
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 defines sections in a document, such as chapters, headers, footers, or any other sections of the document. It’s used to split a page into sections like Introduction, Contact Information, Details, etc., and each of these sections can be in a different <section> tag. The <section> tag is introduced to wrap up things in a particular section. The <section> tag divides the content into sections and subsections.
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:
Difference between <article> tag, <p> tag & <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” |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...