Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between <section> and <div>?

Tags:

html

What is the difference between <section> and <div> in HTML?
Aren't we defining sections in both cases?

like image 413
Simplicity Avatar asked Aug 04 '11 10:08

Simplicity


People also ask

Should I use div or section?

A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline." Divs have no meaning in and of themselves and generally are only used for styling purposes as indicated above.

Does section replace div?

The section element will most likely be used more than the other structural elements like header , footer etc. mainly because it is not specific as others. Also there is no limit as to how many structural elements you can add but the thing to remember is that section is not a complete div replacement.

Can we use div in section?

Yes you can use a div inside a section . we use section when we want separate elements (this same category or similar). First tag inside section should be header (h). Example: one page in newspaper is a section, article is article and on a top this side we have header.


1 Answers

<section> means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.

<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

So no: using a <div> does not define a section in HTML.

From the spec:

<section>

The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

...

The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

(https://www.w3.org/TR/html/sections.html#the-section-element)

<div>

The <div> element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Note: Authors are strongly encouraged to view the <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

like image 167
Paul D. Waite Avatar answered Oct 08 '22 11:10

Paul D. Waite