What is the difference between <section> and <div> tags in HTML ?

22 Dec, 2021
Both the tags (<div> and <section>) are used in the webpage, <section> tag means that the content inside relates to a single theme, and <div> tag is used as a block part of the webpage and don’t convey any particular meaning.
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: This example shows <div> tag.
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 tha 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: This example shows <section> tag
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 learing</li>        <li>DSA</li>        <li>Competitive programming</li>        <li>Web-Development</li>        <li>Java</li>      </ul>    </section>    <section>      <h3>Books</h3>        <p>Learn Machine learing</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:
 use <section> during requirements of headers or footers or any 
other section of documents.
sagar0719kumar
adnanirshad158
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
HTTP headers | Content-Type
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array