What is the Difference Between <section> and <div> Elements

Have you ever wondered what is the difference between the <section> and <div> elements? If yes, then this snippet is for you!

The <section> tag creates independent sections within a webpage having logically connected content. And the <div> tag is an empty container specifying a division or a section.

In this snippet, we’ll give more details about the <section> and <div> elements and highlight the differences between them.

The <section> Element

According to the W3C specification, the <section> tag means that the content inside this element is grouped. In other words, the content relates to a single theme. It must be an entry in the outline of the page.

Examples of sections can be chapters, several tabbed pages in a tabbed dialog box, or numbered sections of a thesis. E.g., the home page of a website can be divided into many different sections (introduction, news, contact information, etc.). You can use the <article> element instead of <section> if the grouping of the element’s contents is reasonable.

The <section> tag is not a generic container. If you need an element only for styling purposes or for scripting, it’s better to use a <div> element instead. The use of the <section> element is appropriate only when the contents of an element are listed in the document’s outline.

Each section is specified by including headings (h1-h6 element) as child elements of the <section> tag.

Let’s see an example.

Example of using the <section> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>W3Docs</h1>
    <section>
      <h2>W3Docs Sections</h2>
      <ul>
        <li>Books</li>
        <li>Quizzes</li>
        <li>Snippets</li>
        <li>Tools</li>
        <li>String Functions</li>
      </ul>
    </section>
    <section>
      <h3>Books</h3>
      <p>Learn HTML</p>
      <p>Learn CSS</p>
      <p>Learn Git</p>
      <p>Learn Javascript</p>
      <p>Learn PHP</p>
    </section>
  </body>
</html>

The <div> Element

The <div> element only represents its child elements and doesn’t have a special meaning. It can be used with the lang, title, and class attributes to add semantics that is common to a group of consecutive elements.

This element can also be used in a <dl> tag and wrap groups of <dt> and <dd> elements.

It is recommended to use the <div> element as a last option when there isn’t any other suitable element . If possible, use other more appropriate semantic elements (e.g., <nav> , <main>, or <article>) to provide better accessibility for readers.

However, a <div> element is quite useful in other situations.

Use the <div> element for stylistic purposes or for wrapping various paragraphs within a section that are all to be annotated similarly.

Example of using the <div> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #87f5b3
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <div>
      <h2>A heading in a &lt;div&gt; tag.</h2>
      <p>Some text in a &lt;div&gt; tag.</p>
    </div>
    <p>Here is some other text in a &lt;p&gt; tag.</p>
  </body>
</html>