Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 26 Aug, 2021
Geek Week

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 the 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>Competetive programming</li>
        <li>Web-Develpoment</li>
        <li>Java</li>
      </ul>
    </section>
    <section>
      <h3>Books</h3>
      <p>Learn Machine learing</p>
      <p>Learn DSA</p>
      <p>Learn Competetive programming</p>
      <p>Learn Web-Develpoment</p>
      <p>Learn 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 or any 

other section of documents.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :