What Is the Difference Between and?
What Is the Difference Between and in Html? Aren't We Defining Sections in Both Cases? 1 12 Answers Means That the Content Inside Is Grouped (I. E. Relates to...
What is the difference between <section> and <div> in HTML?
Aren't we defining sections in both cases?
12 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. Eachsectionshould 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.
()
<div>
The
<div>element has no special meaning at all. It represents its children. It can be used with theclass,lang, andtitleattributes 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.
()
<section> marks up a section, <div> marks up a generic block with no associated semantics.
Just an observation - haven't found any documentation corroborating this
If a section contains another section, a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section. When using div instead of section the inner div h1-header is diplayed as h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
-- the Level2 - header is displayed in a smaller font than the Level1 - header.
When using css to color h1 header, the inner h1 were also colored (behaves as regular h1). It's the same behaviour in Firefox 18, IE 10 and Chrome 28.