After publishing Easy HTML5 Template last week, and getting some constructive feedback on the contents of the template, something dawned on me that has apparently been alluded to in a few different articles, including one on HTML5 Doctor.
Basically, it seems that HTML5’s new <section> element is confusing and it’s hard to discern its true value. I’ll try to demystify it here by referring back to the spec and discussing, through process of elimination, some ways it could be used.
Defining <section>
According to the spec <section> is defined as follows:
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.
So immediately we might think that <section> could be used to hold a blog post, or an individual comment in a blog post. But wait a minute. The spec goes on:
Authors are encouraged to use the
articleelement instead of thesectionelement when it would make sense to syndicate the contents of the element.
That part rules out blog posts, blog articles, news feed content, and other syndicated content. What does that leave us with?
Further Clarification From the Spec
The spec goes on further to describe how it shouldn’t be used, and it also gives some recommended usage. It explains:
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 only problem I have with the above recommendation is the “news items” example, which seems to make more sense for <article>, but I suppose that would depend on whether the news item has the potential for syndication.
Update (October 20, 2011) Originally I had mistakenly assumed the “news items” mentioned by the spec were each divided into sections. What it’s saying is that the news items would be inside of a single <section> element, and then possibly broken up into <article> elements. Credit to this comment by Paul D. Waite on Stack Overflow.
Finally, here is a warning given in the spec (which is along the lines of why at least one person took issue with my use of <section> in Easy HTML5 Template):
The
sectionelement 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 thedivelement instead. A general rule is that thesectionelement is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
I have a problem with the spec saying that it’s “not a generic container element”. Well, it kind of is. How else can you describe it? Nonetheless, being armed with that information, we can make a somewhat intelligent decision for its use.
When Should it Be Used?
In HTML5 for Web Designers, Jeremy Keith reminds us to ensure that everything within a single section element is related.
To make this more clear in a practical way, I brainstormed a list of some specific DOs, and DON’Ts to keep in mind when using the <section> element.
A List of DOs…
- DO use
sectionfor each individual section of a tab switcher or content slider (if an unordered list isn’t needed) - DO use
sectionto divide a lengthy “terms and conditions” (or similar) page into numbered sections - DO nest
sectionelements if necessary (as you might do with the “terms and conditions” page) DO usesectionto hold a product description (which might include a photo, “add to cart” button, etc.)DO usesectionto hold individual biographies for employees on a corporate info page- DO use
sectionto divide the different sections of a one-page website or portfolio
UPDATE (Jan 12/2011): Bruce Lawson disagrees with the two items that now have the line-through above. He mentions that these could be syndicated so would be more appropriate if wrapped in article tags. I tentatively agree, but I suppose a case could be made for using section if there is no intention of ever syndicating the content. But then that raises the question: Is it the potential for syndication that requires the use of article (which would make his statement correct in this case)? Or is it the actual intention to syndicate that defines whether to use article?
A List of DON’Ts…
- DON’T use
sectionto divide content from the header and footer; usedivinstead (see the doctor) - DON’T use
sectionto wrap a tab switcher for DOM manipulation or styling - DON’T use
sectionfor sidebar or other tangentially-related content boxes; useasideinstead - DON’T use
sectionjust to add a border or drop shadow around something; usedivinstead - DON’T use
sectionfor the wrapper when implementing faux columns; again, usedivinstead - DON’T use
sectionto nest elements when trying to avoid IE6’s float double-margin bug (or a similar layout-related issue); again, usediv - DON’T use
sectionto hold an individual author bio on a blog post or news article; useasideinstead
My Conclusion
In short, HTML5’s <section> element could be used in any instance where it contains standalone, non-syndicated, non-aside content whose wrapper is not for styling purposes. In other words: Hardly ever.
I think Jeremy Keith made a good observation when he said:
I don’t think there needs to be a
sectionelement and anarticleelement. I don’t have a particularly strong opinion about which one should stay and which one should go but a little trimming is definitely in order.
When I included <section> in Easy HTML5 Template, my intention was to present it for possible use, and I didn’t intend for it to be a generic wrapper for styling. I’ve decided I’m going to include two <section> elements in that template and wrap them in a generic <div> to make it more clear how it should be used.
What do you think? Can you think of any other DOs and DON’Ts for the <section> element that I can add to the list so its use can be made more clear? Have I used it incorrectly in any of those I listed? Do you think we even need a <section> element at all?
I disagree with these:
DO use section to hold a product description (which might include a photo, “add to cart” button, etc.)
DO use section to hold individual biographies for employees on a corporate info page
Each of these is, I think, an independent atomic piece of content, which could be syndicated. So I think these are [article]s
Thanks for the feedback. I’ve line-throughed those entries and added a note.
So my question is: If I have no intention of ever syndicating those pieces of content, does that mean I should use “section”? In other words, does the potential for syndication define which one should be used, or does the author of the content have the option to decide “this should be syndicatable” or “this shouldn’t be”, and then use article/section accordingly?
Syndication-applicable might be too restrictive of a definition for the use of the ‘article’ tag.
How about using ‘article’ for any form of repeating/iterative/sequential content? These would frequently appear in a ‘section’, but not necessarily.
Or think about it this way: Other web services may want to syndicate some of your content OR use (avoid?) it when displaying or calculating search engine results, so if it CAN be syndicated, it should be an article
I’m all for more semantic associations with markup elements… so long as it doesn’t get too verbose or arduous to use them. Section might be useful as well, though if we had to drop one I’d say drop section (use div) and keep article for things that are repeating/iterative/sequential (as Anthony says below) or syndicable
Good to know, than you! I think I can come back for more feedback from other commentors
>> The only problem I have with the above recommendation is the “news items” example, which seems to make more sense for <article>, but I suppose that would depend on whether the news item has the potential for syndication.
Well I see <section> more as a wrapper for <articles> like
I agree entirely with this. The section contains a header giving an overarching title to the articles (syndicated content).
The potential for syndication should be enough to determine content as articles and not whether they will be syndicated.
Could be syndicated = article
Has a header and/or not just for style = section
Style only or none of the above = div
I am sure there will always be a few exceptions but thats life.
For the most part, I agree.
The only issue I have with the code Lukas shows above is the question of whether or not all the content within the “section” tags are related. According to the spec, the stuff inside the “section” needs to be thematically related. I don’t know if a list of “articles” qualifies in that case. So then it becomes just a generic wrapper, which is the same as a “div”.
I’d say the theme is news and why wouldn’t articles qualify – of course they do! It’s not a generic wrapper at all. It is the news ‘section’, it has a heading depicting this, it could have a paragraph and a footer relating to news. The code snippet doesn’t have these, but the implication that it could have them, even just in theory, shows it is more than a wrapper. The semantic benefit is clear even in just the example provided. It’s clearly not the same as a div even in this instance.
I’d say that makes sense in the fact that a “section” of a website could contain an article but equally an article could be made up of a number of “sections”.
Does the spec contradicts itself. They say it can be used for “various tabbed pages in a tabbed dialog box” but not “When an element is needed for styling purposes or as a convenience for scripting”.
Or am I being too strict, it’s not really for the convenience of scripting, the section is just being added to the page for the script, it’s being added to the page to create a tab which just happens to be scripted and styled.
I think a key point is made in the first quote, it mentions a generic section of an application. When I first started reading about HTML5 I saw articles for text and sections for applications. That’s not exactly right but I think it’s a good way to look at it, most sites talking about the section tag fail to mention it’s use for web apps.
Sometimes is hard to understand the propose of some new tags. But with time and a lot of conversations, like ones promoted with articles like this, we will evolute to a better web.
I think that one of the conceptual difficulties of the section element is that is not a work horse element like all the rest. I want to use it, but it apparently has very little everyday application. And let’s face it, the spec is poorly formed. Seriously, when would I ever make a numbered section of a “thesis”? WTF!
Thanks for trying to make sense of this. I think that your your example of using, ” section to divide the different sections of a one-page website or portfolio” make a lot of sense.
I’ve always thought of section as a wrapper around articles. Otherwise, if you follow the spec word by word, I don’t see how you could incorporate it in most websites – maybe once or twice, and that’s it.
The purpose of the section and article tags, in my opinion, in the long run, is to have identifiable chunks of web pages able to be teased out of the page. This is akin to Web Parts, Slices, etc.
So, if you can point at something and say ‘this “thing” stands alone’ then it could be a section. If you look at a part of that section and can identify repeating bits of content then those are articles. Articles should be children of sections in most cases. So ‘news items’ are contained in a Section but ‘a news item’ is contained in an article.
What you should not do is wrap a chunk of stuff in a section and only use it to style undifferentiated content such as a sidebar that could contain 30 different types of “things”. That isn’t a section, it’s a container.
In the end, these things will be used however people want for whatever they want of course.
Since the inception of SGML, information architects have struggled with semantic meaning of content and how to properly model that content. Most of the models I’ve built are dictated by the existing content with full knowledge that the DTD will become a living breathing thing as greater examples arise of how the content should be marked up and thus modifications required. I couldn’t find the content models proposed for section or article, but from a legal publishing standpoint you have instances where both own each other, thus to try and set a specific approach to using these tags at this time is heading down a slippery slope of confusion and eventual disuse. If syndication is the goal for readers to extract content, then attributes on divs or syndication wrapper tags could work as representative of semantics. The structure therefore could be flexible with the existing div markup and left simplified.
I disagree with the common opinion that section should be a wrapper for articles. Actually, from my POV, section is a part of an article. Let’s take this post for example. First, the whole post would be wrapped in an article tag, and parts “Defining <section>”, “Further Clarification From the Spec”, “When Should it Be Used?”, etc. should be wrapped in each own section tag (they are sections of this article).
I believe <section> can be used for modules and widgets on the page. If the widgets are related to an article it makes these widgets should be wrapped in an <aside> and separated in <section> tags
Another use would be on front pages to separate each individual content item. This could also be article tags, but I believe the front page is rarely the source for syndication.
I do follow as following
I like to break articles in to sections.
Say I write an
<article>about myself. I would break it in to different<sections>– perhaps one about early life, another about my education, and another about my skills.I can also see using it as “this section of the website has articles”… but usually the block level parent of an article is also used for structure, in which case I use a
<div>.Am I wrong in this approach?
Yeah, I think what you’re saying is okay, and doesn’t seem to contradict the uses recommended in the spec.
HTML5 is not a new language, its just a specification for search engines how to index your pages.
in Villabajio, designers made sites on tables and ebashat each other in Quake!
In my mind I think of section as when you write an essay. The introduction is a section, the first point is a section, the second point is a section, and the conclustion is a section. I may be wrong, but that’s what makes sense to me.
I just read on http://www.w3schools.com/html5/html5_reference.asp and they say a section tag ‘Defines a section’ and a div tag ‘Defines a section in a document.’ And so… what’s the difference? Pretty funny.
Don’t trust W3schools for anything. See W3Fools.
What I feel is that section is made for semantics, not for design. I mean dividing contents inside a tag without a use for styling will only help group content types around the website. I have a question. Is the section tag useless if there is no id on the tag?
No, it’s not useless without an id. Any HTML element can have no id and no class, and it is exactly the same. The only difference is it’s harder to target a specific element when it doesn’t have a class or id to hook onto.
I have to disagree, sections are very useful, semantically speaking. The specs are trying to discourage the wrong use of section element, hence the “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.” part.
On the other hand, let’s look at what specs are saying:
“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.”
“A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
These two excerpts make section apply successfully to the body element. In fact, I can think of section as the semantic grouping container that was missing for the body element, for which we used the non-semantic div.
Which was the opposite for which the div was conceived in the first place, making div id=”header”, div id=”footer” practice to result in specific HTML5 header and footer sections, making HTML5 section element as the general section to be used to group content. Semantically group, that is.
So, any time you need to semantically!!! group content, that’s not header nor footer, and it’s not an article (another specific section), you use the HTML5 section element.
And yes, this means the article element can be sectioned also, not just with by the header and the footer sections, but with other sections, allowing for article’s content to be grouped semantically. But if you want style hooks, don’t use section inside body or article, use the good old div.
For now, I try to assume, based on working draft spec that section are used to the content it self. For example, this post is an article and sections are Defining , Further Clarification From the Spec, and so on so forth. Section is an outline of a content but not for layout. This is good and create a tree of an article just like Power Point outline.
Until now the question remain about what the real function of section tag? . The most confusing part, Section element are not supposed for styling and scripting but when creating slideshow by reusing section that’s warning sounds like don’t use CSS section selector for presentation and don’t use JS. My jaws down :)
“DON’T use section to hold an individual author bio on a blog post or news article; use aside instead”
I believe a footer would be better to hold authorship information. Good article
After searching around and reading a lot of different opinions on a range of different website including the W3C specifications of the section element and the article element I come to the conclusion that the discussion and confusion is caused by the bad practice of not separating content and design and not distinguishing between the semantic skeleton and the design skin. It’s exactly like IT Mitică said. You could say, section is to semantics as div is to presentation. The div is the only HTML element that can be used for the presentation and I believe that the introduction of the new HTML5 elements have turned the div into a non semantic bastard child of an affair with CSS and should be avoided at all cost.
If you follow the best practice recommendations of the W3C and keep content and presentation separated you will not be easily confused about when to use section article or div. It’s common sense:
If a part of the content makes sense on it’s own, meaning that you can pull it out of context without it changing the meaning of the content then the article should be used. This can be a article not only in the sense of a magazine article or a blog post but also as a physical article or product you can buy in a webshop. If the content needs it’s parent element or sibling elements to be able to understand it, then a section element should be used. In my opinion a blog comment such as this one should be inside a section element because the comment doesn’t necessarily make sense without the blog post itself or other comments that are referred to. Thus a section can also be a child of another section.
When in doubt whether you should use a section or article element, do this: Print the content on paper, walk out the front door and ask a random person to read it. If it makes sense to the person and you don’t need to explain anything about what it is then you should use an article element. If you need to provide an explanation or elaborate with more information before the true meaning of the content becomes clear then you should use a section element.
When there is a obvious connection between several embedded articles where dividing the the articles into groups will increase the comprehensibility of the parent article as a whole then this should be done using the section element since the grouping is made bases on the content and not for design. I believe the div element should only be used if you want to divide content for the purpose of styling or other purposes that are not related to adding meaning to the content.
I don’t subscribe to using div tags for styling or JS hooks IF the semantic grouping element that is already there can be used. CSS3 has a lot of new styling capabilities that make triple or quadruple div tag embedding redundant. The div element should therefore in my opinion only be used where native CSS styles falls short and in the absence of browser support for CSS3
Hi, I’m new to web design only 1 years experience so please be gentle. I’m trying to come to grips with HTML5 and I do not understand a few points. What happens if I would like to use article or section on a different page, ie- how would I re-position them etc? Would I only use them once on a single page? Sorry if this sounds silly but I just dont get it, I have just learned about divs so this is all very strange to me. Thanks
You can use lots of articles on one page, or lots of sections on one page, and you can re-use them on as many other pages as you want. There’s no limit, the same as divs.
Thanks Louis for the help there, I can now start re-thinking it all!
> The only problem I have with the above recommendation is the “news items” example, which seems to make more sense for <article>, but I suppose that would depend on whether the news item has the potential for syndication.
I think each news item could be an <article> but the “news items” container element (that’s what they’re talking about) would be a <section>.
http://dev.w3.org/html5/spec/Overview.html#the-section-element
Its pretty clear. It IS for use as a generic divider of related content with a header, CAN be nested, additionally, articles can be nested in other sections AND article. Intent DOES define the use of the article tag. Sheesh.
Did I say something in the article that contradicts the spec? I don’t see a problem with my explanation here. Correct me if I’m wrong.
Keep in mind that “generic divider” is not the same as “generic wrapper”. The document you linked to says:
I still have a hard time understanding section, but alas, I am going to read a bit more. I just think your conclusion sums it up: hardly ever, so why bother with this element?
Before the “section” tag was even invented, I always divided my websites into sections and used the section names as GET variables to know which section my loader script should fetch. So to me, a section is something completely different from an article. A section is a unique part of my website, which most of the time uses a single entity (class) to generate its content, and is different from any other sections. For example on a personal artist’s website, containing news on updates and releases, artwork, and a profile, I would create 3 sections: news, art and profile. The news section would contain articles of updates and planned releases and would be generated using the News class; the art section is like a simple gallery with thumbnails and navigation, generated using the Art class; and the profile section would be a simple page that doesn’t have any dynamic content.
I would find the use of sections in any other manner not only confusing, but not at all useful and would see no use for such a “section” tag.
I used to be confused the
sectiontag witharticleanddivtags. But when I look into a Word document, the meaning of section is very clear. All I do is just apply the same meaning to the HTML document, and it’s really helpful.Your article is great, some ideas just lighten up in my mind and help me a lot. Thanks.
Umm how about I don’t use SECTION at all because I was getting along fine without it before!
The
<section>is supposed to function like levels in docbook. Every time you use a heading, the heading and all the content that belongs to that heading should be included in the section. It is semantic and can help with document navigation (you could have the web browser generate a table of contents for every page).What about for the purposes of advertising? Could you use the section tag to put ad space in the sidebar or perhaps in between articles?
That was my first thought of it. Let me know what you think!
I think the “aside” element would be better for that. But at this stage, it probably doesn’t make any difference, since no browser or assistive device recognizes either of those.
thankyou for the in depth explanation of the section element i was just about to start using it in place of divs on my university assignment. Until i started to research html5 properly tonight i assumed section had replaced divs and that this was one of the main changes in html5, how i was wrong :)
“DON’T use section to hold an individual author bio on a blog post or news article; use aside instead”
Say what?
The ASIDE tag defines content NOT RELATED to the main (dominating) content itself. Since an “author bio” would not be fit to be wrapped in an ARTICLE (as it contains content not related to the blog post itself but only relates to the author of the blog post), it would be put in a SECTION outside the ARTICLE tag. This voids the confusion and – what’s more important – keeps the semantics where they are: in a logic order.
So, wrap the blog post (which resides in an ARTICLE tag) and the author bio (which resides in an SECTION tag) in a parent SECTION tag and you’re all set. Or do you really want to tell search engines that the author bio is to be ignored because it’s unrelated to the main content displayed? I think the author of the blog post will disagree… ;)
Remember: It is true that websites should be made to be visited by humans, but machines will be parsing their content to make it findable. It’s not a good idea to confuse machines by telling them “hey, this part of the website is wrapped in an ASIDE tag so… in case of doubt feel free to ignore it because it’s absolutely unrelated to the main content on this page.”
Firstly, I don’t think debating this issue is going to prove anything. Machines do not recognize the difference between “aside” and “section” and “article” so the “semantics” of this could have very little, if any, long term value.
That being said, you’re not correct about what you said about “aside”. According to the spec:
So an aside can indeed be used for a bio, which is “tangentialy related” to the content around it and which could stand on its own.
When you write
Machines do not recognize the difference between “aside” and “section” and “article” so the “semantics” of this could have very little, if any, long term value.
you bluntly forget about the fact that machines DO recognize the differences DUE TO THOSE TAGS and the long-term value of these semantics you are not seeing is already in effect. Multiple search engines, including the big players like Google, Bing and Yahoo, have started using these to (sub-)classify data. In fact, they even progressed beyond that level of classification if you would take a look at http://schema.org/! There, you have hard proof that (their) “machines” even care about microdata. A practical example would be Google which has publicly been showing the effect of all this in their search results for more than a year now.
Your answer shows that there is obviously a knowledge gap between us two when it comes to commonly used data mining techniques.
But, at least this little exchange shows that HTML5 has the power to provoke social interaction, as it (besides all the magic) provides ample opportunities to discuss it’s implementation details.
Wishing you a great weekend…
Mike, this article isn’t about Microdata, it’s about HTML5’s “section” element. I never said that machines don’t recognize microdata. They do, and I’ve written about that in my book.
I said that machines didn’t recognize the difference between “section” and “article” and “aside”. And it’s very likely that they never will recognize that difference.
For refererence, here are some links that discuss the fact that HTML5 tags (not microdata) have little or no benefit to SEO:
How well does Googlebot deal with non-standard tags?
HTML5 and SEO
Our Pointless Pursuit Of Semantic Value
Does semantic html5 matter to google yet?
Is HTML5 Good For SEO?
If you want machine-readable “semantics” then use (as you suggested) Microdata and also WAI-ARIA. But tags like “aside” and “section” will have zero benefit to SEO, and probably won’t matter from an accessibility standpoint for at least some time, if ever.
I think HTML5 is rubbish anyway. Seriously, div, section, aside, etc. Why do we need to split hairs! They are all just containers of “stuff”. Splitting hairs is a good way to fog everything up and overcomplicate. Instead of actually getting work done (which I was hoping HTML5 would help with), we end up building a circular conversation tree on some dude’s blog.
Let’s keep canvas, video, audio, and a few others, the ones that actually add real value, and discard the rest.
Instead of talking about trivial HTML5 tags, let’s talk about YAGNI and DRY instead …
I’m not sure, after reading the article, if i’m more clear or confused about section element, but still is a good discusion.
At some point we will be at the thin line between it is a section or is another element…
It seems to me one helpful distinction might be in template composition.
When a template is providing a wrapper element to contain included content, I lean towards section, as this is defining the overall structure of the page. I think this fits semantically. Regardless of styling, a layout template should use some sort of element wrapper to define the structure of the layout. Since the layout should not be aware of what’s being put inside, article is inappropriate.
But within a template, there is typically a single element that wraps the main content of the element. This is where I think article (or div) are appropriate, depending on syndication.
I am wondering what the point of sections is in the first place. Until now (html4) content was structured by headings.
Everything in the same hierarchy after the header is a “section”. Until the next header.
What is the point of introducing sections as semantical wrappers? This is how i understand your post. sections should not be layout or design decision-based but merely representations of meaning/semantic entities.
Am I missing something?
Btw: Great and detailed post.
I agree with Jeremy Keith, but I would go a step further. Instead of simply tossing out
<section>, replace it with<articles>(plural)Also, since the semantics of
<section>are so nuanced and vague I would want to know just how exactly is this element going to be used in, say, screen readers, browser rendering engines, etc. Because the spec just leaves to much to the imagination. Especially since<div>is plenty abstract enough to fill in any semantic gaps.Or maybe it’s much ado about nothing. Maybe it’s just there for academics to use in their thesis and cumbersome scientific documents and the mistake we’re making is to assume that since it’s available and new that we need to find some way to shoehorn it into our development process.
I vote we simply let sleeping dogs lie and refrain from using it for now.
Thanks for sharing !
I still do not really know much about section element.
Thanks a lot, your post made it much clearer to me.
Especially the DOs and DONTs list is worth a share.
Have a look at http://www.apple.com they, acoordingly to this tutorial, “abuse” the use of ;)
Hi. This article is from 2011 and has only two reply comments from 2013. So, I hope my reply still gets read.
I hadn’t considered the correct or incorrect use of the “section” element until I read this article. There’s a lot of good points here, but perhaps the concept is being over-complicated. Please excuse incorrect nesting and lack of using hgroup. Further notes are below the code. I’ve found myself using section like this:
So, you now have a “non-div” container for your article content about baseball, and one for football.
This says:Here are articles about sports. There is a section of articles about baseball, and there is a section of articles about football.
Each section, as well as each article, can be given names or IDs for styling and scripting, or for any reason to refer to one or all of them. Although, you could just style them using their element tag name, or script using the dom ( The second football article would be pageArticle[3] according to below… )
var pageArticle=document.GetElementsByTagName(‘article’);
So, this is why section exists. It’s not to just contain articles, as I’ve done, but to contain sections of stuff.
It is up to the developer as to how best to use or not use the section element.
You wouldn’t want to say “here is a paragraph with a section of sentences, and these sentences are sections of words, and words sections of letters,” but section of photos, section of articles, section of lists(multiple ULs or advanced menu/table information), section of user controls or multiple forms, section of blog-posts(articles), or section of pages and main content within a site.
I think section is a powerful tool, rather than subtle semantic markup. Section is a user or developer defined group of related content, code, or even functionality, for better organized html documents and web presentation than the ‘div’ element offered prior to HTML5.
Thanks,
Brett
I guess I muffed the html…I used pre..then code…and then still character equivs. The editor display showed correct so I thought it would post that way..sorry folks
I fixed it for you. I think you accidentally left out the semi colon on your entities. (i.e. you wrote “<” instead of “<”… or maybe you used & when you were only supposed to use &…?
Hmm, those issues you arise here are serious
What we expect from HTML5 is a sum of tags which must have clear meanings (not generic ..as DIV is) – to be uses by webdesigners as they need >> not to oblige them to read detailed instructions about how to use and how not …
With HTML4 most of thigs were quite clear – the big thing missed was a kind of “semantic separator of contained content” – the only important problem of a DIV is that he can not semantically separate the content in front of search engines.
For search engines a DIV is very transparent – they will index a bunch of div’s as a whole – now we have a lot of semantic tags / separators but as I see here – things start to get complicated …Hmm we should ask W3C to publis new specs with clear statements and use cases.
Section is not a generic container element in a sense that the HTML5 outliner will look for an heading within the section element and will outline therefore a section by using that heading that otherwise will be seen as an “Untitled section” which makes it not generic compared to the div tag element that you will use for sectioning any portion of the web page mostly for styling and presentational reasons than semantic ones.
With the section element the meaning of the h1 which use in the past was recommended only once in your web content and mostly to tell the search engine the title of thate content, now you are recommended in the use of the h1 element following the opening section tag for the sake of semantic.
I have to say I disagree with Jeremy Keith’s quote in your conclusion. I see benefit of both the
<section>and<article>tags. Of course the page I’m looking to implement the<section>tag on, I just realized is not properly “sectioned” to begin with (I have a<h3>following a<h2>that isn’t a sub-heading of the<h2>– oops I’ll have to see if that<h3>shouldn’t maybe be a<h2>). Some places replacing<div id="header">with<header>or<div class="pic">with<figure>make sense both semantically and are used to apply style. Other places<div id="xxx">still makes sense as there isn’t a semantic replacement. I currently have no intention of using<article>as I don’t see my content being semantically appropriate for that use, but I do see the semantic use of<section>on said website being appropriate. Once I have<section>tags on pages it’s going to be hard not to use them as hooks for CSS or JS in some cases. For example if I want to style every<a href="xxxx">tag within a specific<section>differently than the rest of the<a href="xxxx">tags on the page. Especially since some of those are inside an<ol>and some are outside the<ol>. Why add a non-semantic<div>tag just to add a hook if you have a semantic<section>tag available for a hook? Of course if you are adding the<section>tag JUST to add a hook, you’re probably not using the<section>tag semantically correctly either…Section = A distinct group within a larger body of people or things. A relatively distinct part of a book, newspaper, statute, or other document.
Article = A separate clause or paragraph of a legal document or agreement, typically one outlining a single rule or regulation. A particular item or object.
Above two helped me to understand when to use Section and Article.
HTML DOC = html + body + header + aside + footer + section + article + div + span + h1 + a + ul + li + etc…..
Web Page = HTML Doc
Blog is set of Web Pages
News Website is set of Web Pages
Hotel Website is set of Web Pages
Online Shopping site is set of Web Page
Which means for search engines: blog = news website = hotel website = online shopping site = web page.
Which means everything is HTML Doc (Web Page).
Now web page will have set of meaning full text which will be understood by human. Search engine wants to understand this text like humans. So lets this from human point of view.
A set of text must be telling about something on a web page.
A set of text = One or more para graph.
A set of text = One or more news
A set of text = One or more blog post.
A set of text must have relative header. For example an essay on element.
<div>
<h1>Elephant</h1>
<p>
Elephants are large mammals of the family Elephantidae and the order Proboscidea. Two species are traditionally recognized, the African elephant and the Asian elephant.
</p>
<p>
Elephants are herbivorous and can be found in different habitats including savannahs, forests, deserts and marshes. They prefer to stay near water. They are considered to be keystone species due to their impact on their environments.
</p>
</div>
Above can be replaced with following.
<section>
<h1>Elephant</h1>
<p>
Elephants are large mammals of the family Elephantidae and the order Proboscidea. Two species are traditionally recognized, the African elephant and the Asian elephant.
</p>
<p>
Elephants are herbivorous and can be found in different habitats including savannahs, forests, deserts and marshes. They prefer to stay near water. They are considered to be keystone species due to their impact on their environments.
</p>
</section>
A set of text that is non relative to each other. For example a news then it can be structured like following.
<div>
<h1>News</h1>
<article>
<h2>Sports</h2> Pakistan’s flamboyant allrounder Shahid Afridi says that Virat Kohli was “too emotional” as a leader and it will take him some time to fill in the captaincy void left by Mahendra Singh Dhoni’s retirement from Test cricket.
</article>
<article>
<h2>Technology</h2>
NEW DELHI: Microblogging website Twitter has started the gradual rollout of its ‘While You Were Away’ feature, which it had announced in early November.
</article>
</section>
Conclusion: Set of paragraphs talking explain about one object/subject should be wrapped in one section. A web page can have one or more section. Set of non relative paragraph should be divided into different articles wrapped by a section.
its very usefull for me i am searching last few days and finally i find this thanks for sharing your knowledge.
Set of non relative paragraph should be divided into different articles wrapped by a section.
Myth Busted – HTML5 structural elements are worthless and don’t benefit SEO whatsoever. Using article, section or aside tags ‘Will NOT Improve Site Rankings’ despite the Schema Markup Hype. The “Structural Elements Rules Will Drive You Nuts If You Let’ – this is why I use a div and span tags instead for less code bloat…. just don’t go overboard with them!
Read more about how structural elements are pointless hype at http://backlinko.com/search-engine-ranking
I appreciate you and very useful information. finally i got the answer.