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.
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.
I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA.
It is OK to have the following set up?
<!-- main content -->
<section id="main" role="main">
<h1>The main content</h1>
<!-- This div needs to be here for styling reasons -->
<div class="the-content">
<p>All the text that goes with the main content</p>
</div>
<!-- the sidebar -->
<aside id="sidebar" role="complementary">
<h2>A title</h2>
<p>Some text</p>
<aside>
</section>
The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter?
It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section.
For example:
If the content in the aside is related to the main article, it should be inside the main section. However if the content inside the sidebar aside tag is different to main I would put it outside of the main section
http://html5doctor.com/aside-revisited/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Yes, it the <aside> inside the <section> is perfectly valid markup and will pass W3C validation, if that's what you're worried about.
The <section> element allows flow content inside which may include the <aside> element - however if you're only using sections for styling purposes, you should probably be using a div instead.
Aside from that (pun intended) I have my doubts on the role=main part being valid - according to this, the only role attribute values allowed on <section> elements are shown below:
Default ARIA semantics:
role=region.
What Other ARIA roles, states and properties may be used?
alert, alertdialog, application, contentinfo, dialog, document, log,
marquee, search, or status.
Any global aria-* attributes and any aria-* attributes applicable to
the allowed roles.
Which rather notably doesn't include the main role.
The spec (editor's draft that already includes main) doesn't allow to nest the main element inside article, aside, footer, header or nav, but it doesn't say anything about nesting these elements inside main. It also provides two examples that use article and nav (intra-document navigation) inside main. So at least aside, nested in the article or section (and therefore scoped to its level), should be also allowed. I also can imagine the case where some part of content with some supplementary info inside (like in the aside usage examples in the WCAG Wiki) may form together the main content of the page, so I don't think that disallowing it would be reasonable.
On the other hand, the outline algorithm (which now seems to be the primary reason for the existence of all sectioning content, including aside) is still marked as being 'at risk', so the definition of these elements may change and some clarification may be added.
Probably we should ask this question to the HTML5 spec editors?
I will concur with Darren in regards to where you drop the tag. Also, your tagging is a little wacky. Various tags have WAI-ARIA roles natively, while yes you can overwrite native roles, but why would you? This post about WAI-ARIA on the Paciello Group's blog talks about it more. Ex:
Insstead of using
<section id="main" role="main">
you could just use <main>, which means the same thing, and better practice. The <aside> tag has the complementary role added natively, so that is like saying My name is Ryan, really my name is Ryan.
I've heard that the HTML5 section element should not be used for styling purposes as its a semantic element. So <section class='wrapper'> as a replacement for a div would be wrong, using <div class='wrapper'> would be better.
But what when it makes sense to use the section element AND there is need for wrapper? Is it alright to do <section class='wrapper'> in that cases? Or do I have to to
<section>
<div class='wrapper'>
..
</div>
</section>
which seems a bit bloated to me?
I've heard that the HTML5 section element should not be used for styling purposes
Not sure what your source is, but they're wrong. Style away!
That being said, <section> elements should be used when they're semantically appropriate, as per the HTML5 spec:
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.
There is nothing wrong with it.
See http://www.w3.org/wiki/HTML/Elements/section
The element represents a generic section of a document or
application.
A section, in this context, is a thematic grouping of content:
chapter
various tabbed pages in a tabbed dialog box
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. The section
element is appropriate only if the contents would be listed explicitly
in the document's outline. [Example A]
A section typically with a heading.
You can use <section class='wrapper'> because adding a class is semantics, it's not styling purposes. But of course, then you can style the class.
Then, you should use <section class='wrapper'> if the wrapper is something big and important (if it contains a section). If not, better use <div class='wrapper'>.
But
<section>
<div class='wrapper'>
..
</div>
</section>
it's very awful because you add unnecessary code, which is not semantic.
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.