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.
Related
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.
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.
Which of the new HTML5 elements should be used instead of div.container and div.content ?
<header>
site header
</header>
<div class="container">
<div class="content">
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</div>
<aside>
sidebar
<aside>
</div>
<footer>
site footer
</footer>
div.content can probably be a <section>. div.container should probably remain a div.
None of them are made for that. I'd recommend using ARIA roles however.
<div class="container" role="document">
<div class="content" role="main">
These can then also be used in CSS with selectors like div[role='main']
You can't answer this example in general, it depends on the content of the page.
What matters here is the outline of your page. Therefor, you can ignore all div elements as they don't influence the outline. Only use them if you need them as hooks for CSS or JavaScript.
The first question would be: Is the aside related to the whole page or is it related to the "content area"? If it is related to the whole page, it must not be included in another sectioning element. If it is related to the content area, it has to be included in that sectioning element. Here I assume that it is related to the whole web page.
The second question: Is there a common heading for the three article elements? Examples would be: "My favorite books", "Latest blog posts", or "Products". If so, you should use a sectioning element which groups these three article elements. If there would be no possible heading, you probably don't want a sectioning element here, so could use div or not element at all.
The third question (if the second question was answered positively): Should this sectioning element be an section or an article element? If your choice of using the article element for these three "things" is correct, you probably (but not inevitably!) need a section here. Whether it was correct at all to use article, again, depends on the real content. So it could be possible that you rather want
<article>
<section></section>
<section></section>
<section></section>
</article>
instead of
<section>
<article></article>
<article></article>
<article></article>
</section>
Here I assume that your choice of using article for the three "things" is correct.
So the final version might look like:
<header>
<!-- if this header applies to the whole page -->
</header>
<section>
<!-- a h1 like "Latest blog posts" -->
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</section>
<aside>
<!-- if this aside applies to the whole page -->
<aside>
<footer>
<!-- if this footer applies to the whole page -->
</footer>
I highly recommend reading about the differences between article and section over at HTML 5 DOCTOR.
You will then be able to make an informed judgment about which sectioning elements should be used and when, and also when not to use div.
What I have surmised from their blog is that:
article: Used for content which will make sense on its own!
section: for content which is a logical section of either another section or an article (fine to nest these).
div: still used for containers or as hooks for styling, which is something html5 elements should not be used for.
Finally the decision of using html5 sectioning elements can often be decided by the fact that it contains a heading (although this is not a hard and fast rule). There are a couple of useful tools to aid these decisions.
HTML5 Outliner - online
HTML5 Outliner - chrome extension
To consider this question as a constructive question, it needs to be interpreted as asking what the HTML5 drafts say about the matter. Then the answer is section 4.13.1 The main part of the content in the W3C HTML5 draft. To put it briefly, it says that normally you don’t need any specific markup: just put the content there. Obviously, you can wrap it in a div element if you need to treat it as a unit in CSS or in scripting.
And according to that section, it could be marked up as section or article if it constitutes “a section of a larger work, for instance a chapter” or “an independent unit of content that one could imagine syndicating independently”, respectively.
This is a matter of coding style. No general-purpose software (like browser or search engine) cares about your choice here.
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.
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.