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 contrast, the <div> tag is a generic container used primarily for layout and styling purposes without conveying any semantic meaning. Based on recent usage trends, approximately 65% of developers prefer using <div> for general layout tasks, while 35% utilize <section> for semantically meaningful content blocks.
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:
<!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:
<!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>Machine learning</p>
<p>DSA</p>
<p>Competitive programming</p>
<p>Web-Development</p>
<p>Java</p>
</section>
</body>
</html>
Output:
Differences between <div> and <section> tag
| <div> | <section> |
|---|---|
| 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 a generic container and global attributes | It is not 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. |