Difference between section and div in HTML

The section tag defines sections in a document like chapters, headers, footers whereas div tag defines a division in an HTML document. Here we will discuss the difference between section and div in HTML.

In HTML, <section> means that the content inside is grouped and should appear as a entry in an outline of a page whereas <div> does not convey any meaning, aside from any found in its class, lang and title attributes.

A website’s home page can be split into sections for an introduction, news items and contact information. For <div>, this should be used only when no other semantic element like <article> or <nav> is appropriate.

<section> gathers a specific and strong semantic purpose, where, div has only a generic, non-specific meaning and no semantic purpose.

Browser Support:

<div>: Google Chrome, Internet Explorer, Firefox, Safari, Opera.
<section>: Google Chrome 6.0, Internet Explorer 9.0, Firefox 4.0, Safari 5.0, Opera 11.1.

Read Also: Make a placeholder for a “select” box

So, let’s see the difference between section and div in HTML.

<section> example:

<section>
<h1>Title</h1>
<p>Content goes here....</p>
</section>

<div> example:

<div>
<h1>Title</h1>
<p>Content goes here....</p>
</div>

So, <section> is a good choice for marking up the relevant content sections of your document whereas, you can use a div as a wrapper for any styling purposes.

Note: By default, before and after the <div> element, browsers always place a line break and as well as this can be changed with CSS also.