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:
<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)
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 aria-label, aria-labelledby or title:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
For example VoiceOver on Mac then can provide an outline to navigate directly to that section.
<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.
<div> Vs <Section>
Round 1
<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.
Round 2
<div>: Browser Support
<section>: Browser Support
The numbers in the table specifies the first browser version that fully supports the element.
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 <section> element is defined as a block of related elements.
The <div> element is defined as a block of children elements.
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:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>
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.
<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)
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 <section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type
Overall very little difference.
Also, would not recommend putting <section> in a <section>, instead place a <div> inside a <section>
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
<section></section>
The HTML <section> element represents a generic section of a
document, i.e., a thematic grouping of content, typically with a
heading. Each <section> should be identified, typically by including
a heading (<h1>-<h6> element) as a child of the <section>
element. For Details Please following link.
References :
http://www.w3schools.com/tags/tag_section.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
The HTML <div> 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.
References:
- http://www.w3schools.com/tags/tag_div.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Here are some links that discuss more about the differences between them:
http://html5doctor.com/avoiding-common-html5-mistakes/
https://teamtreehouse.com/community/use-div-or-section-element
http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
whereas:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. So <div> was used to define different parts of a web page in html4 but <div> doesn't mean anything particular therefore html5 introduced many semantic elements <section> is one of them which give enough information to screen readers, search engines and browsers etc, to identify the different part of websites.
the main difference is if you use only <div> to define website parts. it's less readable.
if you use semantic elements instead of div tag. they can help to improve readability of your website not only to humans for other programs(screen reader, search engine etc) also. we still can use <div> inside semantic elements as a container.
Related
Is it an acceptable practice to use section tag as a child anywhere in the page
or it should be always a main tag???
For example:
<section class="software-development">
<h2>
<span>Software</span>
<span>Development</span>
</h2>
<div class="development-areas">
<section class="web-apps">
<h2>Web Applications</h2>
<p>dolor ipsum........</p>
</section>
<section class="mobile-apps"></section>
<section class="desktop-apps"></section>
</div>
</section>
You can use almost any HTML tag for anything you want, but the idea of semantic tags is to give meaning to the content of your page.
In this particular case, you can use the section tag (or even the article) to define any self-contained part of your page, there's nothing wrong with that, in fact it IS a section after all with its own title. Don't think of the use of the tags as a hierarchy all the time; think of what the element your creating actually is in the page and use the appropiate tag;
This is a great article that can help you clear everything regarding semantic tags:
https://www.lifewire.com/why-use-semantic-html-3468271
Just a quote from the same article:
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.
More information for the section tag based on Mozilla's Docs:
Each should be identified, typically by
including a heading (<h1>-<h6> element) as a child of the
element.
If it makes sense to separately syndicate the content of a <section>
element, use an <article> element instead.
Do not use the <section> element as a generic container; this is what
<div> is for, especially when the sectioning is only for styling
purposes. A rule of thumb is that a section should logically appear in
the outline of a document.
You can read more in this question as well: https://stackoverflow.com/a/53229971/8437694
No, not anywhere. The specs say the following (emphasis mine):
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
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.
Authors are encouraged to use the article element instead of the
section element when it would make sense to syndicate the contents of
the element.
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.
So <section> could easily be put almost anywhere without fighting against its semantics.
Technically, you can use <section> anywhere "where flow content is expected".
What is the difference between the div tag and the new HTML5 aside tag?
W3Schools has a very similar description for the two -
Aside
Div
I have also seen many sites use the aside tag where a div tag would be perfectly fine.
Although, when I put them both into practise, they behave the same way, like so:
<aside>
<h4>This is a heading</h4>
<p>This is a very short paragraph.</p>
</aside>
<div>
<h4>This is a heading</h4>
<p>This is a very short paragraph.</p>
</div>
WORKING EXAMPLE
So my question is, what is the main difference between the two? When should one be used over the other?
Short answer:
<div> tag defines a general division or section in HTML.
<aside> tag has the same representations as a div, but contains content that is only related to the main page content.
Difference
Both have the same behavior but have a different meaning logically.
Similarities:
Both of them also supports the Event & Global Attributes in HTML.
<aside> and <div> elements have no default rendering (and presentation qualities). So you will need to make them a block element and adjust their appearance and layout with style sheet rules. By default, browsers always place a line break before and after them. However, this can be changed with CSS. Most browsers will display these elements with the following default values:
div {
display: block;
}
Differences
The <aside> element identifies content that is related but tangential to the surrounding content. In print, its equivalent is a sidebar, but they couldn’t call the element sidebar, because putting something on the “side” is a presentational description, not semantic.
According HTML5, <aside> element is a Sectioning Content, so its content defines the scope of headings and footers. Each Sectioning Content element potentially has a heading and an outline. When a browser runs across a sectioning element in the document, it creates a new item in the document’s outline automatically.
The <div> element is used to create a logical grouping of content or elements on the page. It indicates that they belong together in some sort of conceptual unit or should be treated as a unit by CSS or JavaScript.
It is a difference between HTML 4.01 and HTML5, The <aside> tag is new in HTML5.
All versions of every browser support <div> element.
The only practical difference (for now at least) is that old browsers do not recognize aside at all. They will treat it as undefined, not as a block element like div. Old versions of IE do not even let you style an aside element, though there are JavaScript-based ways to fix this.
The theoretical difference is explained in HTML5 drafts such as the current HTML5 LC. Note that w3schools.com is not an authority of any kind; see http://w3fools.com.
A div tag has no semantic weight and can contain any type of content. In HTML5 you can advantageously use section tags instead to add semantic weight. The aside tag should be used for content that is not related to the main content of a page
The main use that I see for
<aside>
is that this is giving more clarity to the HTML code. You might recognize the link between a main text and a subordinate text.
All HTML5 new elements intention is to make it easier to index your data.
With <aside> tag, it's very easy for program to identify that it is a aside data of the page.
In the WHATWG HTML specification it says regarding to the div element that we must strive not to use the div element.
It says:
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.
So what should we use instead of divs?
Use what makes sense for the structure of your document. If you're writing an article, use the article element. Defining segments within a document? Consider the section tag. Need to mark the header of a document? Use the header element.
<article>
<header>
<h1>Foo Title Here</h1>
</header>
<p>Article content can go here.</p>
<p>Note how meaningful this document structure is.</p>
<footer>
<!-- Links, etc. -->
</footer>
</article>
Think about it, every document starts with semantically meaningful tags: We wrap our HTML document with the <html> tag. Inside, we define a <head> and a <body>. Within the head we provide a <title>, perhaps a few <script>'s, and link up some stylesheets with <link> or <style>.
Since everybody follows these rules, it boggles the mind why they would abandon this consistency and favor the use of vague and semi-meaningless tags like <div> to define crucial portions of their document.
Contrast a document made up of vague and meaningless tags:
<div>
<div>
<div>Foo Title Here</div>
</div>
<div>Article content can go here.</div>
<div>Note how meaningful this document structure is.</div>
<div>
<!-- Links, etc. -->
</div>
</div>
Pretty meaningless, right? Always use the right tool for the job.
Reading the next line of the referenced specification, they provide some examples:
For example, a blog post would be marked up using article, a chapter
using section, a page's navigation aids using nav, and a group of form
controls using fieldset.
So, if possible, you should use an element that have more semantic meaning than the div element.
Why would a HTML5 website adopt the following structure? I am specifically interested in the use of the outer <section> element.
I realise that this validates as HTML5, but I do not understand why a section would contain an article. I thought that a section was to be thought of like a "chapter" of an article. Why wouldn't one just use <div id="main"> ... </div>? Is there a semantic advantage (perhaps for SEO) of using the outer section element?
Note: I have simplified the source by removing various container / inner wrapper DIV elements.
<div id="wrapper">
<section id="main">
<article id="home">
<section class="block">
<h1>Heading</h1>
<p>Content...</p>
<p>Content...</p>
</section>
<section class="block">
<p>Content...</p>
<p>Content...</p>
</section>
</article>
</section>
</div>
I am unable to provide a link to the website in question because it contains content that some viewers may find offensive.
From the spec:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead.
And:
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.
So in my opinion, what you have demonstrated is not really a valid semantic use for the section element, and div would be better (or nothing at all, considering there is already the wrapper div). However, the two child section elements are probably used more as the spec intended.
I don't believe any of the HTML5 elements (article, section etc.) have any real bearing on SEO at the moment, although they could in the future. And I may be wrong. I'm not an SEO expert.
without seeing it in action, kinda hard to say exactly but here goes: the outer section element is more than likely establishing the sites desired document outline. if that is not the desired outcome then i agree with #james allardice, a div would be better there (especially since there is no headline for the outer section). if that is the desired outcome, then using the outer section establishes a generic section in the sites document outline, with its child elements nested inside, so that it can generate the appropriate document map. user agents can then use the document map to generate a table of contents, which can then be used by at's.
you can test a documents outline here: http://gsnedders.html5.org/outliner/
This seems pretty semantic. A Web site's home page could be split into sections for an introduction, news items, contact information.
At the moment I don't think any weight is gained for HTML5 semantics with SEO, but in the future - it will probably be key.
Is it necessary to have a heading of <section> in HTML5 like mentioned here http://blog.whatwg.org/is-not-just-a-semantic
Sometime on a page we have some elements which are related and can be combined in a <section id="semantic name"> instead <div id="semantic name"> But we don't have any Heading for that..
Is it OK to use <section> without having <h1>, <h2>, <h3> inside
According to the HTML5 Doctor, you should not use <section> if there is no natural heading for it. Also, they say:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Also, check out this nifty flowchart to decide what element is best to use in your situations.
No, it is not required.
You can easily check this by reading the definition of the section element ("should" is not "must") or by validating your HTML.
The W3C validator will report a warning when no heading is used, but a warning is not an error.
Its only necessary if it wont [validate] (http://validator.w3.org)
The use of section tags is to convey the structure of your content, like a book is split into chapters, paragraphs, etc
If your page is mash of images to look like a magazine cover you may not have a need for adding any sections. You'll most likely still want structure for navigation but that's not done using sections.
I would say any page containing chunks of text (most pages) should use a section tag rather than a div. keep the divs for controlling layout only.
My best advice is to see how your site looks in a text only browser, or other accessible client. It amazing how rubbish most sites are designed for accessibility. My take is that section tags are an attempt to improve that.