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" |
Similar Reads
What is the difference between <section> and <div> tags in HTML?
In web development, both the <div> and <section> tags are commonly used to structure content. The <section> tag is semantic and indicates that the enclosed content relates to a specific theme or topic, making it more meaningful for search engines and accessibility tools. In contras
3 min read
Differentiate between <th> & <thead> tags in HTML Table
In this article, we'll be differentiating the <th> tag and <thead> tag used in HTML. Before going forward, we must know that both the tags are used to give the headers in the HTML tables. <th> tag is used to give header in the cell of a table in HTML whereas <thead> tag is us
4 min read
Difference between <div> and <span> Tag in HTML
In HTML, the <div> and <span> tags are used for structuring and styling content. <div> creates block-level containers for grouping elements, while <span> creates inline containers for styling specific portions of text or elements within a block-level container. Syntax: <di
3 min read
Difference between <i> and <em> tag of HTML
The <i> and <em> tags in HTML both style text as italic, but they serve different purposes. The <i> tag is used for visual styling without semantic meaning, while <em> conveys emphasis and adds semantic importance, improving accessibility and meaning in content.Note: The <
3 min read
Difference between <nav> and <menu> tag in HTML5
"<nav>" Tag: The <nav> tag is used to specify navigation links either within the same document or any other document which means it provides link to contents which are either on same or different page/document. Example: html <!DOCTYPE html> <html> <body> <h1>The n
3 min read
Difference between <figure> & <img> tags in HTML
In this article, we will learn about the <figure> & <img> tag along with its implementation. We will also learn the differences between them. Let's begin the discussion with the figure tag in HTML.Table of Content HTML <figure> Tag: HTML <img> Tag: Difference between <
4 min read
What is the difference between <html lang="en'> and <html lang="en-US'> ?
The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page.The <html lang="en"> specifies the language of the document as English, while <html lang="en-US"> narrows it down to English as used i
2 min read
Difference Between Strong and Bold tag in HTML
In HTML, the <b> and <strong> tags both make text look bold, so they might seem 100% the same — but there's an important difference between them.This article go through the distinction between <b> and <strong> in HTML, exploring their semantic meaning, rendering, accessibilit
2 min read
Difference between Physical and Logical Tags
In this article, we will learn about physical tags & logical tags in HTML & their implementation. We will also explore the difference between them. Let's begin the discussion with a physical tag. Physical tags: Physical tags are used to indicate that how specific characters are to be formatt
4 min read
Elements that are used in head section of HTML page
The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta inform
3 min read