What is the difference between <section> and <div>?
What is the difference between <section> and <div> in HTML?
Aren't we defining sections in both cases?
<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:
The
(https://www.w3.org/TR/html/sections.html#the-section-element)
The
(https://www.w3.org/TR/html/grouping-content.html#the-div-element)
Sections are most relevant in landmark navigation for assistive technology. To appear in the document outline or landmark list, they need a name, which can be assigned by means of
For example VoiceOver on Mac then can provide an outline to navigate directly to that section.
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.
-- 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.
Round 1
Round 2
https://i.stack.imgur.com/zSFmL.png
https://i.stack.imgur.com/jYJNk.png
In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.
In the HTML5 standard, the
The
Take caution not to overuse the section tag as a replacement for a div element. A section tag should define a significant region within the context of the body. Semantically, HTML5 encourages us to define our document as follows:
This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.
In most simple pages, there should only be a single section tag, not multiple ones. Please also consider also that there are other interesting HTML5 tags which are similar to section. Consider using article, summary, aside and others within your document flow. As you can see, these tags further enhance our ability to define the major regions of the HTML document.
My suggestion: div: used lower version( i think 4.01 to still) html element(lot of designers handled that). section: recently comming (html5) html element.
Using
Overall very little difference.
Also, would not recommend putting
The section tag provides a more semantic syntax for html. div is a generic tag for a section. When you use section tag for appropriate content, it can be used for search engine optimization also. section tag also makes it easy for html parsing. for more info, refer. http://blog.whatwg.org/is-not-just-a-semantic
The HTML
References :
http://www.w3schools.com/tags/tag_section.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/section
The HTML
The
whereas:
The
The
Here is a tip on how I distinguish couple of recent html5 elements in the case of a web application (purely subjective).
Success story sharingaria-label, aria-labelledby or title:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
<section> marks up a section, <div> marks up a generic block with no associated semantics.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
<h2> elements... i.e all <h2> are rendered in the same font-size. Wow! Amazing!
<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.
<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
<section>: Browser Support
<section> element is defined as a block of related elements.
<div> element is defined as a block of children elements.
main tag in there, and inside it, one or more section tags.
section should be main, the div should be article and the span would likely be section (depending on what it's doing)
<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)
<section>—a generic document or application section. A normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup, WhatWG)
<section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type
<section> in a <section>, instead place a <div> inside a <section>
<section></section>
-
element) as a child of the
<div></div>
<section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
<div> tag defines a division or a section in an HTML document.
<div> tag is used to group block-elements to format them with CSS.
<header>, <footer>, <nav>, <article> etc.)
<section> marks a widget in a graphical user interface, whereas <div> is the container of the components of a widget like a container holding a button, and a label etc.
<article> groups widgets that share a purpose.
<header> is title and menubar.
<footer> is the statusbar.
Follow WeChat
Want to stay one step ahead of the latest teleworks?
Subscribe Now
相似问题
HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.
sectionvs.div, including in light of this answer, I've come to the conclusion that they are exactly the same element. The W3C says adiv"represents its children". Well, isn't that also what thesectionelement does? Yes,sectionimplies its children are grouped together, but by the very act of putting children inside adiv, you are also, yes, grouping them together. At least the way I do it, I don't know about you guys.sectionvs.div” — don’t think too much about it. HTML isn’t complicated. “by the very act of putting children inside adiv, you are also, yes, grouping them together.” Not according to the HTML spec you’re not. You’re wrapping them in adivfor styling purposes, or JavaScript convenience, or something else that the W3C hasn’t thought of yet, but doesn’t indicate to readers that the child elements are a group.<p>This is a paragraph</p>or<h2>This is a second-level heading</h2>. Because<div>adds no meaning, you’d only use it if there isn’t another HTML element that adds appropriate meaning to the text in question.