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.