What is the difference between <section> and <div> tags in HTML ?
The <div> tag and <section> tag are used in the webpage, the <section> tag means that the content inside relates to a single theme, and the <div> tag is used as a block part of the web page.
HTML div Tag
It is called a division tag. The <div> tag is a block-level element that only represents its child elements and doesn’t have a special meaning. It takes the Whole Width available on the screen. It is generally used with the title and class attributes.
The <div> tag is one of the most used tags in website creation. Use <div> element for style purposes or for wrapping paragraphs within a section that are all to be given similar properties. Requires closing </div> tag too.
Note: It is recommended to use the <div> element as a last option and use other various tags such as <main>, <article>, or <nav> as this practice is more convenient for the readers.
Syntax:
<div>
<h1>Title</h1>
<p>Information goes here....</p>
</div>
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Div example</ title >
</ head >
< body >
< h1 style = "color:green" >
GeeksForGeeks
</ h1 >
< div style = "background-color:#189" >
< h2 >
This is heading inside Div tag
</ h2 >
< p >
This is paragraph inside Div tag
</ p >
</ div >
< p style = "color:red" >
This is outside div tag
</ p >
</ body >
</ html >
|
Output:
HTML section Tag
The <section> tag is not a generic container in a web-page. The content inside <section> tag will be grouped i.e. it’ll connect to a single subject and appear as an entry in an outline of the page. A common rule is that the <section> element is valid only if that element’s contents would be listed explicitly in the document’s outline.
Section tag is used to distribute the content with a similar theme. The main advantage of the section tag is, it describes its meaning in a web page. It is mostly used when headers, footers, or any other section of documents are needed in a web page. Requires closing </section> tag too.
Syntax: Â Â
<section>
<h1>Title</h1>
<p>Information goes here....</p>
</section>
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Title of the document</ title >
</ head >
< body >
< h1 style = "color:green" >
GeeksForGeeks
</ h1 >
< section >
< h2 >GeeksForGeeks </ h2 >
< ul >
< li >Machine learning</ li >
< li >DSA</ li >
< li >Competitive programming</ li >
< li >Web-Development</ li >
< li >Java</ li >
</ ul >
</ section >
< section >
< h3 >Books</ h3 >
< p >Learn Machine learning</ p >
< p >Learn DSA</ p >
< p >Learn Competitive programming</ p >
< p >Learn Web-Development</ p >
< p >Learn Java</ p >
</ section >
</ body >
</ html >
|
Output:
Differences between <div> and <section>Â tag
It is called as division tag. |
It is called as section tag. |
It represents its child elements and doesn’t have a special meaning. |
It represents its child elements and has a special meaning. |
It doesn’t have any specific meaning. |
It describes its meaning in the web page. |
Use <div> element for style purposes in webpage. |
use <section> during requirements of headers or footers.
|
It is not a generic container and global attributes
|
It is a generic container
|
Section tag containing article elements in html
|
Div tag contains all the elements where the <p> tag should not force to do it.
|
Last Updated :
12 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...