The section element

by .

Updated 22/01/2014 by Dr. Steve

We doctors are a bunch of chums using HTML5 and writing about how we do it. Apart from spurious requests for medical advice, the questions we receive most are about using the section element, and we realise that we’ve been using the section element incorrectly all this time.

Sorry.

What we’ve been doing wrong is using section to wrap content in order to style it, or to demarcate the main content area from the nav, header, footer etc. These are jobs for div, not section.

The section spec says

The section element represents a generic document or application section…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.

section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):

<body>
...
<section>
<h2>level of heading = section nesting level</h2>
rest of the content
</section>
...
</body>

With very few exceptions, section should not be used if there is no natural heading for it.

The spec says

The theme of each section should be identified, typically by including a heading (h1h6 element) as a child of the section element.

Check your work in the HTML 5 outliner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however).

Section is also the most generic of the sectioning elements. Make certain that you don’t really need an article, which is defined as

a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

What about main content?

Use the main element to mark up the main content area of a document. Dr. Rich Clark explains how to use The main element

Rules of thumb for using section

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

  • Don’t use it just as hook for styling or scripting; that’s a div
  • Don’t use it if article, aside or nav is more appropriate
  • Don’t use it unless there is naturally a heading at the start of the section
  • The revised spec (as of ) says:

    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.

    As blogposts and comments are often syndicated (by being pulled into other blogs or being linked via twitter, reddit etc) they should be articles.

Thanks to Opera’s Lachlan Hunt for fact-checking this article. Please also note that we haven’t yet changed the WordPress theme to get rid of extra sections, so for now please do as we say and not as we do!

179 Responses on the article “The section element”

  • […] This post was mentioned on Twitter by Remy Sharp. Remy Sharp said: Confused about the section element? @brucel doctor (whose bio is definitely getting longer) comes to the rescue: http://bit.ly/4kfvxY […]

  • Mike T. says:

    I’m interested in the cases where a section element wouldn’t have a heading. Anyone care to shed some light?

  • […] The section element. Useful article by Bruce Lawson on the correct use of the HTML5 <section> element, with a good tip about using the HTML5 Outliner tool to check your content for untitled sections as a way of identifying (possibly) incorrect usage. I may need to update the source of this site a bit! […]

  • Paul Burgess says:

    I am still a bit confused… when you say

    “section is a blob of content that you could store as an individual record in a database. It generally looks like this (and note that the heading goes inside the section element, not immediately before it):”

    In a real world application would it be used for say… the intro/excerpt part of a blogpost for instance? Is that a blob? Your code example seems to be just the whole page content surrounded by

    Am I missing something?

  • Joseph says:

    Mike,

    I am guessing in the instance that the element does not have or need a heading, you would not use a section element.
    As well as the new elements introduced in HTML5, div is still signifcant

  • Mike T. says:

    @Joseph,

    I think that’s a good rule of thumb that probably will cover most use cases.

    However, the spec does say A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.. (emphasis mine)

    Typically does not mean always, so presumably there exists a case where a headless section is warranted. Just trying to figure out what that might be.

  • Lachlan Hunt says:

    Mike, cases where a section wouldn’t have a heading are generally more relevant to web applications, as opposed to more traditional document structures.

  • Mike T. says:

    @Lachy

    Thanks! I need to remind myself that HTML5 ~= Web Applications 1.0. :)

  • Michael Johnson says:

    @Paul

    My mental model for section is turning out to be a chapter of a book. You could also include the foreword and preface, possibly table of contents. Then, each section could have subsections that make sense, e.g. technical works often break chapters down into sections.

    I would say that the intro bit of an article on Wikipedia would qualify as a section, so that would be an example that doesn’t have a heading. The heading would apply to the article, not that top section. Like:

    |article|
    |h1|
    |section id=intro|
    Intro content
    |section id=section1|
    |h2|
    First main section content

    Does that make sense? Doctors?

  • Aleksey says:

    @Michael Johnson: Almost. The article would already create a less generic section of the document, so the intro would not need to be in another section.

    I used to do the same thing with section as is mentioned in this article, but a few weeks ago, I realized this was wrong and started doing what is now advocated in this article. =)

  • Michael Johnson says:

    @Aleksey: That makes sense. Any other ideas for a non-titled section?

  • Alohci says:

    @Michael Johnson: I think your |h2| should be an |h1|. The fact that it is in section indicates that it is a subordinate heading to the |h1| of the article.

  • Alohci says:

    I can’t help thinking that if the doctors can’t get this right first time, that the requirements are far too subtle for the average web author. The absence of a main or content element, while perfectly reasonable once you understand the rules, is distinctly misleading to those who learn by copying and the result is inevitable misuse of the section element in exactly the way the doctors did.

    It’s noticeable that validator.nu does not even give a warning (or advice notice or similar) if the content of body contains a section element but no content that isn’t in a sectioning element.

  • John Faulds says:

    Even though I understand the theory behind when a section should be used, I can’t think of any good real-life situations where I would ever use it, based on this current definition. Anyone got any good examples?

  • @Alohci the validator is still evolving though and whilst I can’t speak for them, I’m sure they will be updating it when they feel it is necessary.

    @John Faulds I tend to agree with you, I still don’t find it 100% clear – If I had to use it right now, I would still use it to split the main content (article?) into sections such as main, comments, etc

  • Mike T. says:

    One thing that helped me a lot in understanding usage of the section element is by generating an outline for your html5 document:

    Here’s one implementation: by gsnedders.

  • Oli says:

    The spec is a little open to interpretation—“typically with a heading” is quite different to the “With very few exceptions, section should not be used if there is no natural heading for it” here. I’ve probably been using it a little more broadly than this too eg for next/previous navigation (with no title element). Exactly how related does the generic chunk of related content need to be? :)

    I think that a nice rule of thumb might be to consciously add a title for each <section>, even if you then hide the title with CSS (as is generally the case with <nav> for accessibility). If it seems like content that shouldn’t have a title when CSS is disabled, then it’s most probably not a section.

    Something else to keep in mind is:

    “Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.” from WHATWG; Headings and Sections.

  • […] Read the rest here: The section element | HTML5 Doctor […]

  • Christopher says:

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use for each seperate section within the that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an tag. Additionally for citations I am not wrapping them in tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

  • Christopher says:

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single “article” as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use “section” for each separate section within the that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an “article” tag. Additionally for citations I am not wrapping them in “article” or “section” tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

    P.S. Apologies for repost, comment system killed my tags, changed to “”.

  • Oli says:

    @Christopher entities are your friends, especially &lt; and &gt; ;)

    @doctors it’d be nice to have some notes about HTML in comments—”convert everything to entities” plus mentioning any allowed elements (links, ?). Zeldman’s blog is good for this

  • Christopher says:

    @Oli Thanks Oli, fixed with < and > – should have thought of that myself. :)

    From the sounds of this post I may be using Article / Section incorrectly but here’s what I am currently doing based on my understanding (which may be wrong):

    The whole paper, news story, blog post, etc is wrapped in a single <article> as it constitutes one complete contextual similar grouping of text & media.

    Inside the paper I use <section> for each separate section within the <article> that has a heading, again look at any scientific paper or news article for this layout.

    Exceptions: If a post, etc. is an aggregate of multiple stories I’ve been wrapping each story in an <article> tag. Additionally for citations I am not wrapping them in <article> or <section> tags.

    So what do you think? I’m I way off base?

    Cheers,

    Christopher

    P.S. Apologies for repost, comment system killed my tags, changed to “”.

  • Michael Johnson says:

    @Alohci: I think you’re right about the H2/H1 thing. I’m still basing it on my previous experience (H2 goes under H1). In this case, if I understand things correctly, since the section falls under the article, the article can have an H1 and the section can as well but it is a lower level heading than the initial H1. Is that correct?

    Yep…just checked the spec. The relevant section has an example that shows it specifically: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

  • I think it would be useful to specifically mark up the main content. The order of a element on a page will no longer matter to SEO.

    “In HTML 5 you can specifically mark up all the “secondary” content on a page such as navigation, branding, copyright notices, so it feels odd that you can’t specifically mark up the most important part of your page—the content.”

    What happens with ADs?
    It’s a secondary element, there is NO structural tag to make it secondary.

    I think HTML5 is extremely good when marking up a blog. However, for modular pages like Yahoo, Netvibes and iGoogle it doesn’t add much. We’ve been experimenting with HTML5 here at MySpace and so far, it hasn’t helped us as we think it would.

  • Bruce Lawson says:

    I think Oli has it right, above

    a nice rule of thumb might be to consciously add a title for each section, even if you then hide the title with CSS (as is generally the case with nav for accessibility). If it seems like content that shouldn’t have a title when CSS is disabled, then it’s most probably not a section.

    Ridrigo asked “What about ADs?” To me, ADs are only tagentially associated with main content and should be an aside.

    Note that many people are suffering from article/ section confusion: see Jeremy Keith’s article in which he suggest dropping one from the spec http://adactio.com/journal/1607/

  • @bruce I don’t think most of the ADs are related to the main content but to the website in general. An early article by Mike Robison (http://html5doctor.com/understanding-aside/) suggest not to use aside for ADs

  • Mike T. says:

    Unless you’re running something smart like Google AdSense, which *tries* to relate to the content on the page, most ads are just going to be whoever is paying the most. I don’t know about using aside in these cases.

  • Bruce Lawson says:

    Yeah, sorry Rodrigo; Mike T is right; I was thinking only of AdSense, so ignore what I said about ads.

  • Christopher says:

    @Bruce,

    So what are your thoughts on how I am using both article & section?

    See: http://html5doctor.com/the-section-element/#comment-947

    Thanks,

    Christopher

  • Oli says:

    @Christopher sounds good, but do you have a link?

  • Christopher says:

    Hi @Oli,

    Not yet, the project hasn’t launched yet but as I’m building this structure into all my templates I’m hoping to get clarity before launching something messed up on the world. :)

    Project is very document centric (as you can tell by my examples) so it’s using most of the semantic tags available in the HTML5 (most current) specification as well as a number of other “layers” including an rdf/owl based layer. That feeds into the presentation layer.

    Thanks,

    Christopher

  • Oli says:

    @Christopher so upload a template with dummy data already :P It’s hard to give more feedback that that without more info

    @Rodrigo and @Bruce the spec mentions using <aside> for advertising. If it was content-related you could add to an <article> <aside>, if not a <body> (ie page-level) <aside>. Alternatively you could use a <div>. (via WhatWG blog)

  • Christopher says:

    @Oli,

    Good Idea. :)

    I’ll rip one with each instance highlighted and post to git and post link here.

  • Bruce Lawson says:

    Breaking news: at my suggestion, the spec has been altered to clarify that article is for stuff that can be syndicated:

    section says:

    Note: 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.

    while article says:

    The article element represents a component of a page that consists of a self-contained composition that forms an independent part of a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.

  • Christopher says:

    Happy, looking at the last comment by @Bruce how I described my usage or article and section is bang on. :)

    Will still upload a template though.

  • DRoss says:

    Working on a new version of my site and building with html5. I checked it in the outliner tool and am getting an “untitled section” – I found it’s because I don’t have a title in the nav element. If I add any heading inside the nav the untitled section goes away.

    Do I really need to title my nav? Is this a bug with the outliner? A problem with the new spec? Or just the way it is. If so it’s unnecessary. Nobody needs me to tell them this is the navigation. If there were more than one nav elements on the page I could possibly see a title being useful but for this is doesn’t make a lot of sense to me.

    Anyone know anything about this? Thanks.

  • Alohci says:

    @DRoss – There’s plenty of examples in the HTML5 draft of nav and other sectioning elements that don’t have headings. Sectioning-elements-should-have-headings is more a rule-of-thumb than a hard and fast requirement, and the outliner is just a tool to help you pick up the places where a heading might be appropriate, or where a sectioning element might be inappropriate. It’s not a validator.

    The article actually says “(It’s fine for a nav or aside element to be untitled, however)”. In addition, footer elements are often not going to need a heading.

  • Don says:

    Ok, it is clear to me WHEN and HOW to use section and article, now would somebody explain to my WHY?
    Who or what benefits from this?

  • Alohci says:

    @Don – One of the big problems with HTML 4 from a semantic extraction point of view is that it’s sometimes impossible to tell when a section ends. If you have <h1><p><h2><p><p>, then does the last <p> belong to the h2 or the h1? Using explicit sectioning containers resolves the ambiguity. It’s proposed that the outline algorithm, (of which the outliner tool is an implementation) could be used to automatically generate summary information about a page such as a table of contents.

  • Don says:

    It is impossible to tell in your example as the end-tags are missing. if the last p is nested inside the first p it is part of h1, else it is part of h2.
    If you mark up correctly it would be very easy to determine where the last p belongs. But even if not…why would you care…surely the third paragraph is of no matter to a summary?

    But let us say you are right: Even then you can never presume that every website author will use section/article correctly. So any outline algorithm will only be useful to a very small collection of sites. As such it has very little global use and every author today could already accomplish this task on his own sites with HTML4 and some php or js scripting.
    If such constructs would work wouldn’t we have used it already on the abbr (and acronym and dfn) tag to create an automated, multilingual reference?

  • Alohci says:

    @Don. Sorry, I thought my shorthand was clear enough – obviously not. What I meant was: a h1 element; followed by a paragraph; followed by an h2 element; followed by a paragraph; followed by a paragraph.

    In any case, in the normal text/html serialisation, a <p> tag implicitly closes a previous paragraph – they can’t be nested.

    As for the usefulness of the outline algorithm when dealing with tag soup, I think you may well have a point. It remains to be seen how well it will work in the real world. The draft says “User agents should provide default headings for sections that do not have explicit section headings.” I can foresee a user-agent generated table of contents being a morass of “Untitled Sections”. To avoid this, I can see user-agents inferring missing headings from the beginning of the content, and maybe taking other liberties with the algorithm to fix up other situations such as when a sectioning element only contains other sectioning elements.

  • Don says:

    @Alohci: Ah, my mistake…and you are right…p’s can’t be nested.
    You explain it a lot better than I do; replacing div-itis with section-itis.
    In the end, where it comes down to is that 90% of all HTML4 and HTML5 tags are nothing more than hooks for style and script (the only exceptions being things like img, object, abbr, etc.)
    Those tags that are not hooking-tags should have very simple rules and should not be ambiguous in any way. Not only that, they should be irreplaceable (you cannot change an IMG for a DIV for example).
    And my original question therefor stands..why? I can write scripts, algorithms and related stuff to apply to a div with class=”section” as easy as it is to a section-element . Sure, not everybody will use the same class-name, but then again, not everybody will use the section element correctly.
    Adding all these explicit element will only lead to non-semantics I fear, esp. when we find out it doesn’t work and we can’t change it back because of backwards compatibility.
    I love the video and audio elements, but other than those…HTML5 is not for me. I will trust HAL9000 to make semantics of my pages in the future.

  • David says:

    @Alohci

    Cool. Yea I wasn’t really thinking of the outliner as a validator but it’s still strange to “warn” me of an untitled section even though it’s really not warranted.

    Thanks for the info.

  • thinsoldier says:

    So, 99% of the time, 99% of authors on 99% of projects would not use the section tag?
    Yes or no.

  • Bruce Lawson says:

    @david

    @alohci is right: the outliner is not a validator. But I agree that “untitled section” isn’t helpful. There is a bug filed that the outliner should generate something meaningful – so when it encounters nav, which is sectioning content, it should show the top-level heading within the nav element (if there is one) or say “(navigation)” instead of “untitled section”. It’s perfectly legitimate not to have a heading in navigation, footer or aside.

    In my diagnosis, the main cause of sectionpox (the new div-itis) is people want to put it around “main content”. I think that the best reason for adopting a main or content element is to stop people misusing section. But I doubt that the working group will sanction a “safety tag” as it were.

    @Don asked “why? I can write scripts, algorithms and related stuff to apply to a div with class=”section” as easy as it is to a section-element . Sure, not everybody will use the same class-name, but then again, not everybody will use the section element correctly.”

    On Saturday I was listening to Jamie Knight, a sighted web developer with autism explaining that he sometimes uses a screenreader when stressed as it’s easier than reading. On a blog post on my own site, I wrote

    He made his own screenreader that listens out for certain ids or class names like “navigation”, “menu”, “sidebar” so that his screenreader can skip the peripheral information on repeated views.

    With the “baked-in” elements like nav, footer etc, this would be achievable with much greater precision.

    http://www.brucelawson.co.uk/2009/standards-next-cognition-and-accessibility/

    Having real elements takes away the ambiguity of different naming conventions and means that programmatic user agents – like search engines or screenreaders – can “understand” content better.

    @thinsoldier – you asked “yes or no”. No.
    Most people would use sections a lot; to wrap up areas of code to disambiguate where sections start and end; to surround areas demarcated with headings inside articles that were to be syndicated, so that the sites that import that content can apply CSS that works for the importing sites’ outline and so the outlining algorithm works correctly.

    Regarding non-blog sites, for example http://portal.opera.com or iGoogle http://www.google.com/ig, I would mark up each “lump” of content as a different section because, well, each is a different section.

  • Don says:

    @Bruce:
    Although I wholeheartedly agree with better accessibility constructs, I seriously doubt that things like section etc. will do the job. First of all, it will only work if everybody uses it correctly, and seeing as how ambiguous these new elements are…
    Secondly, I have a blind friend who on occasion tests my sites. At one point he told me to stop trying too hard. His view on the matter is this: Radio, spoken books, tv, etc. don’t use elements either. The best way to solve accessibility issues on websites for the blind is by having the site read by a real person. As long as that doesn’t cut is use headings correctly and make the rest of the text as “flat” as possible.
    Now obviously part of this is a personal preference, but it does show that perhaps we are forcing accessibility in a direction it should be taken.

  • Bruce Lawson says:

    Don

    r/e your blind friend: everyone is different. I have blind friends who scan a page using “L” to go to lists (eg, go round navigation etc), “T” to go to tables, etc. Most screenreader users rely on a proper hierarchy of headings to navigate a page with (See a video of a blind web dev doing this: http://www.youtube.com/watch?v=AmUPhEVWu_E). Having a “flat” structure makes this impossible.

    The sectioning content and outlining algorithm simplifies the ability to properly structure headings, particularly with syndicated content.

  • Rich Clark says:

    @oli & @christopher,

    thanks for the comments, we did have the notes for what is/isn’t allowed in but I accidentally commented them out when making some changes recently, thye’re no restored.

    Ta

    Rich

  • Steve says:

    @Don

    It is true that not everyone will use HTML5 correctly, just like the majority of existing content won’t be updated to HTML5. However, disabled users are picky about the websites they use and if HTML5 proves to be as useful as we hope, they will most likely prefer to access sites written in it. The big boys like Amazon and eBay can implement it and make it massively easier to navigate these large, complicated websites. And for the other small sites that don’t, the screen readers can fall back to the technology that they’ve been using throughout this century.

    In short, it is nothing but a benefit to the users at a small cost to the developers.

    As for the element confusion, remember that Web Developers need to read manuals too. In the most part, section can be completely ignored and replaced with proper heading elements, the outliner will create the sections itself.

  • The difference between div, article and section is indeed quite hard to grasp from the start. It probably helps to code a few sites first and to see how far you get with these items.

    I like the “natural heading” idea of a section to separate it from a div. Considering a homepage, you can have sections for “news”, “banners”, “focus items” etc etc. The danger of the section element is that people would obviously want to replace the div.

    What I don’t like about this article is that the div is put forward as an element needed for styling or javascript. The div is (and always has been) a generic structural element, and should still be considered as such. It’s probably best to keep using divs to structure content within an article or section element. I think the meta data of an article (author, date, whatever other info) should still be wrapped in a div, as it makes very little sense as a standalone blob of information.

    So on the homepage you could have a section class=”newsList”, containing a list of articles, containing a header with a heading and div for meta data.

    On a sidenote, the whole mess seems a result of the lack of structural understanding. Divitis is not only a disease, the counterreaction is a disease by itself. At least tags like section and article might change this again.

  • Ken says:

    This makes perfect sense to me as I’ve often wanted to attach a heading to specific paragraphs and content, and mark up nested headings and there appropriate content. This is the use of section :)

  • Chris Pratt says:

    Instead of theorizing what the draft spec says for <section>, shouldn’t we be trying to determine the reason behind adding <section> in the first place?

    As I’m coming to understand it, it looks, at least on the surface, that the motivation for <section> is to simply provide a grouping of heading+content that a machine could extract or manipulate. As it currently stands, content on the internet consists of any number of headings, paragraphs, lists, etc., in virtually random order (from a machine’s perspective). Say I wanted to programmatically pull out the second heading with its content from an article. Currently, this would be an audacious if not insurmountable task. But, if each logical division of a piece of content was wrapped in a <section> element, I could jump right into the DOM, and get what I wanted with something as simple as “getElementsByTagName(‘section’)[1]” (`1` here representing the second element in the array).

    <section> seems mostly if not entirely devoted to machines (i.e. web applications), only holding value to end-users by proxy of the greater abilities it gives to web applications.

  • Sorry, but after reading this article i do not understand the difference between section and article any more :(

  • Marcio says:

    When you state:
    “Don’t use it unless there is naturally a heading at the start of the section”
    This is not precise. And the mention above on the 99% is not precise either.

    Considering that:
    a)
    Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element

    and

    b)
    The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element

    This, that is so empathize on this article, is getting less relevant:
    c)(…) A section, in this context, is a thematic grouping of content, typically with a heading.

    If we also consider that:
    c1)
    (…)A Web site’s home page could be split into sections for an introduction, news items, contact information.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

    So, it’s common to have a page with different sections, that allow us to give a structure to our page, semantic structure, without a header defined (when we are dealing with the section AS structural), and using
    a semantic sections without title, in those cases, will be better to use section without header, then using a DIV that we should avoid so that, our contents became semantically relevant.

    We will have frequently, hence the 99% isn’t accurate, situations/structure where:

    a) we have a semantic section (without header) to structure our page
    [and is not only a style thing, hence, a DIV will not fit, and should be avoided].

    b) article is not an option [because our content isn’t relevant for syndication, it isn’t independent by itself]

    c) we need to semantically group our elements without the need of a header. [because our group elements are part of our site structure].

    What are your thoughts on this?

  • Alohci says:

    @Marcio. I’m not entirely following your argument. How can you semantically group anything without being able to give a name to the group? Whatever name you would give it, that’s its heading. In the example c1 that you give, the sections have natural headings “Introduction”, “News Items” and “Contact Information” I don’t believe that is a requirement that the natural headings are actually part of the mark-up, just that the section conceptually has a natural heading.

  • Marcio says:

    Hi @Alohci,

    Thanks for your comments,

    “How can you semantically group anything without being able to give a name to the group?”
    Conceptually speaking, apparently and as far as I can see: we can’t.
    But that doesn’t mean that we want, always and for sure, or even often, that name to appear on the viewport.
    If however, we add a to our structural semantic , then we must provide a name to it, and that name should appear on the view port.

    What I’m stating is that, we will found, often or, at least, much more often the 1% of the cases, sections that, despite the fact that they conceptually allow/have headings, we don’t what to show them on the viewport.

    Should we use an empty element on our code just to say that, in the outline all goes well?
    Should we create a header to our sections, filled in, and then hide it with css?

    None of those options seems good on my eyes.

    I’m glad that doesn’t force us to have a declared.
    And I’m hoping that the statements on w3c are for conceptually cases as you stated.

    However, this last point is not clear and I’m suspecting that probably is not clear for a lot of other developers:
    Could it be, due to this header interpretation, that we can see so often the been used as the main content wrapper?

    Thanks again,
    Márcio

  • Marcio says:

    Lost the < > on the way, here it is again, sorry:

    Hi @Alohci,

    Thanks for your comments,

    “How can you semantically group anything without being able to give a name to the group?”
    Conceptually speaking, apparently and as far as I can see: we can’t.
    But that doesn’t mean that we want, always and for sure, or even often, that name to appear on the viewport.

    If however, we add a <header> to our structural semantic <section> , then we must provide a name to it, and that name should appear on the view port.

    Should we use an empty element on our code just to say that, in the outline all goes well?
    Should we create a header to our sections, filled in, and then hide it with css?

    None of those options seems good on my eyes.

    I’m glad that <section> element doesn’t force us to have a <header> declared.
    And I’m hoping that the statements on w3c are for conceptually cases as you stated.

    However, this last point is not clear and I’m suspecting that probably is not clear for a lot of other developers:

    Could it be, due to this header interpretation, that we can see so often the <article> been used as the main content wrapper?

  • Oli says:

    @Marcio — one situation where it’d make sense to use a heading-less section is for web applications, eg the main mail list in Gmail. Apart from that please consider that *not* having a heading on a section makes your content less accessible. For all but small spans of text it’s more difficult to skim. Also speech readers for example can give the user a list of the headings on a page allowing the user to quickly access the content they want. This is why we (and the spec) recommend using a heading.

    Remember you are not required to *display* the header — you can hide it via CSS as people have traditionally done for the semantic title on pre-HTML5 navigation lists

  • Marcio says:

    @Oli

    I do agree with the points above. I do agree that having a title is better then not having one, on some scenarios. Other scenarios, like having a header defined on a navigation list, I just can’t see the point for other machines to grab that. But still, if they have a good use for it, why not?

    If I do get your point, you are telling that the fact that we hide the header is not that bad, because the header is also and mainly (on this semantic context) for the machines first and humans second so, we should provide it so that machines can read it (and they don’t need to see it on the viewport), hence, that could be on a outline context only and doing a display:none; will be ok (assuming that the display:none will not take it from the outline as well).

    I still suggest that a clarification should be made on the article, based on the following points to discussion:

    1)
    Should be clearly stated that, besides the emphasis already made:
    adding this – conceptually – If section is taken as a semantic group of something, then a header with a semantic content should be provided.
    ?

    Should we have at least two main ways for dealing with sections:
    a) sections are inside articles and those sections could have a viewport visible element as well as a outline defined one, being the last one, strongly advisable.
    ?

    b) should we state that sections are NOT part of an article but, instead, they are there to sectioning parts of a group (like a website page components – intro, main headline, news… so the viewport visible element isn’t that often required, but the outline is still strongly advisable. (so a css hide could be required).
    ?

    2)
    The content?
    Should we state that: article is a miss use, mostly because our main web page contents are not that syndicated, and not that independent of all the rest. If they are, probably we have an issue on our “content site goals” – ?.
    Or, we semanticist profound activists assume that all content, no matter what, (private matters aside), should be syndicated, hence, let’s use article at will
    ?

    Should we state that div will be used for layout proposes and it is not advisable to use it if that is not for that propose only? (I believe this point is clear so, no alternatives were presented).

    Should we state that section is a strong candidate if we take it on the context b) above.
    Ex:
    if we are on a company presentation site page, then, lets call the main content “company presentation” (either showing that for the site user, or not, but it’s sure semantically better and appropriate then having a div. If we are at a homepage with the main content being displayed, let’s create a section called “main-site-info” for example. It could be relevant, so I presume, to some machines and later humans, to semantically grab the main-site-info.
    ?

    hm?

    Regards,
    Márcio

  • bruce says:

    Markus René Einicher said “after reading this article i do not understand the difference between section and article”.

    I’ve written an article called HTML5 articles and sections: what’s the difference?

  • coding horror says:

    Make certain that you don’t really need an article, which is defined as a composition that forms an independent part of a document, page, application, or site

    What does independent really mean? What would make some content dependent on a document, page, application? I can think of a date, or an author name. Everything else will be an article.

    I challenge the experts to define independence and more importantly dependency!

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • […] Doctor’s articles on header, section, aside, nav, […]

  • coding horror says:

    PLEASE DELETE MY ABOVE POST

    @Oli Studholme

    Strangely enough there is no page about article, like you have linked. I have read that article from bruce indeed—which is excellent—but I am still unsure about stand-aloneness. For example, when you have a photo album, would each photo+description an article?
    I can image this is a unit for (external) reuse. If stand-alone really means “a reusable unit”, I expect that I would have many articles.

    What about viewing an article as

    a means to enclose a group of non-article elements that together denote one thing that has a meaning without any context,

    or

    a means to enclose a single non-article element that has a meaning without any context.

    If articles can be nested it would be much harder to decide. Lets give me an example


    <article>
    <h1>Bunch of animals<h1>
    <article>
    <h1>Cow</h1>
    <figure>
    <img src="cow.png"></img>
    <figcaption>A cow eating grass</figcaption>
    </figure>
    <article>
    Some info about cows:
    <dl>
    <dt>habitat</dt>
    <dd>all over the world</dd>
    <dt>oher infos...</dt>
    <dd>...</dd>
    </dl>
    </article>
    </article>

    <article>
    ... other entry about the cat
    </article>
    </article>

    As you can see, everything has a standalone meaning an could be used elsewhere.

    If I am not allowed to nest articles I would mark a single animal entry as article.

    There is a problem though if you would like to put t both he complete bunch of animals as a single element in a rss-feed, and the cow-entry seperately in an other rss-feed also. The former requirement would force us to toggle between div and article dependent on the feed.


    <section>
    <h1>Bunch of animals<h1>
    <article>
    <h1>Cow</h1>
    <figure>
    <img src="cow.png"></img>
    <figcaption>A cow eating grass</figcaption>
    </figure>
    <div>
    Some info about cows:
    <dl>
    <dt>habitat</dt>
    <dd>all over the world</dd>
    <dt>oher infos...</dt>
    <dd>...</dd>
    </dl>
    </div>
    </article>

    <article>
    ... other entry about the cat
    </article>
    </section>

  • […] The section element | HTML5 Doctor great questions and answers (tags: html5 resource) […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, figure, and […]

  • […] think Bender’s illustration portrays section correctly — see this explanation about section at the HTML5 Doctor site. One rule is that you should not have a section unless it has a unique […]

  • How do you deal with documents that already have a Article & Section structure in place? Case in point: The US Constitution. Should Articles be contained with or ?

    I’ve been wondering this myself and would love any feedback you all might have.

    http://cdharrison.com/sandbox/html5/constitution/
    http://github.com/cdharrison/constitution-html5

  • […] para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles. En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a […]

  • […] can use the <section> element to split the article into logical groups of content with […]

  • […] 5 structure — HTML 4 and XHTML 1 to HTML 5 (@boblet)HTML5 Doctor’s articles on header, section, aside, nav, footer@boblet’s articles on div, section, and article; nav, aside, figure, and […]

  • Chris Krycho says:

    I’ve been tossing around some ideas in my head for the blogger blog I rebuild in HTML5. One of the things I’ve been pondering is the use of sectioning inside articles (rather than outside) which seems one of the more natural uses of the element. Marcio’s (1)(b) seems to hit it on the head to me.

    For example, it’s pretty common for us to have the following in our flow on our blog:


    <article>
    <p>(intro content)</p>
    <hr/>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <hr/>
    <p>(footnotes, etc.)</p>
    </article>

  • Chris Krycho says:

    I’ve been tossing around some ideas in my head for the blogger blog I rebuild in HTML5. One of the things I’ve been pondering is the use of sectioning inside articles (rather than outside) which seems one of the more natural uses of the element. Marcio’s (1)(b) seems to hit it on the head to me.

    For example, it’s pretty common for us to have the following in our flow on our blog:


    <article>
    <p>(intro content)</p>
    <hr/>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <hr/>
    <p>(footnotes, etc.)</p>
    </article>

    Given those divisions, it seems to make a lot of sense to me to break that up this way:


    <article>
    <section class='intro'>
    <p>(intro content)</p>
    </section>
    <hr/>
    <section class='content'>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    </section>
    <hr/>
    <section class='foot'>
    <p>(footnotes, etc.)</p>
    </section>
    </article>

    Obviously the semantics could vary as necessary; class names could be ids instead, and so on. The point is: a section seems like a much more natural subdivision of an article, at least in normal blog usage, than almost any other arrangement. (I could also think of it as being useful for say a division between “New Content” and “Top Content” or things along those lines.)

  • Márcio says:

    I still believe that we can use SECTION on both ways.

    a)
    Either inside an article, if we are talking about an article that as several sections (like the sections of a book, or a law book (like above as been asked).

    b)
    And also, outside an ARTICLE. On that case we are talking about sections of our site. On both cases, we are not violating the concept of section.

    If we decide to use article to divide our structure:
    We should simple ask: This group of things that I’m containing, are they a “article” ? The article definition seems clear at this point: “An article about a birth can be on our site or, as well, on a nature section of a journal. Hence, we are having both conditions: 1) “a self-contained composition in a document, page, application, or site” and also something that is 2) intended to be independently distributable or reusable;

    So, the code above from Chris seems to be correct. No doubts there. We are talking about an article on a blog. That has both conditions fulfill. However, If that article (with sections inside that make sense there) makes part of a SECTION, like a section of articles about something, OR a section – as a part of a website structure then, I believe, we should put or ARTICLE(s) inside a SECTION.

    So, the above seems correct, but on a “website wider context”, maybe we will not end on the ARTICLE and, up and down on our code, we will use a SECTION to group things that can be semantically grouped.

    Does this makes sense to you? If not, please say so. Until now, is this thought that as been guiding me on website semantic structures that need to be produced.

    Regards,
    Márcio

  • Alohci says:

    @Márcio – Yes that’s exactly how Article and Section are designed to be used, Articles and Section can be nested inside one another as much as it makes semantic sense to do so.

    @Chris Krycho – This is open to reasoned debate, but in my opinion:

    1. The class=content part doesn’t have a natural header of it’s own so it shouldn’t be a section. Use a div here.
    2. The class=intro part could easily be a header element
    3. The class=foot part would almost certainly be better as a footer element.

    So I think your mark up should be

    <article>
    <header>
    <p>(intro content)</p>
    </header>
    <hr/>
    <div class=’content’>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    <p>(main content of blog article)</p>
    </div>
    <hr/>
    <footer>
    <p>(footnotes, etc.)</p>
    </footer>
    </article>

  • Márcio says:

    @Alohci is right about a lot of things that needed to be done on Chris code. I haven’t looked in detail.

    a) The footer should be used instead.
    b) The intro could be a section, we can call it abstract or, resume, It has a natural header. But is not a header. Is a intro. So I would, against Alohci, not use the header their.
    c) If you have a section, you should have a header, either hidden or not. The intro dimension and relevance plays a role here. If it’s only a few words (and that will be a header), then, now with Alohci, I would use a header, but I will also use h1,h2,h3 instead of p.

    On the content part, it depends. If it’s something that is meant to be a section on the site structure, then put a section and name it, “main-content-section”, and it will be the section were the main content will reside.
    If there’s no header (only with semantic content we can dispute this), then, a DIV will do it.

    About the NATURAL header that Alohci writes, I believe it makes sense at some extension but header, on HTML5 specs seems to be a much more wide concept.
    “The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos”. So we shouldn’t get to focus on natural headers only, so I believe.
    A doubt still remain, should we follow the “natural header” when we are talking about section headers?


    <section>
    <header><h2>articles about X</h2></header>
    <article>
    <header>
    <h3>header for this article</h3>
    </header>
    <hr/>
    <section class="intro">
    <p>intro goes here</p>
    </section>
    <hr/>
    <div class="content"></div> <!--or section if we can find a header -->
    <hr/>
    <footer>
    <p>(footnotes, etc.)</p>
    </footer>
    </article>
    </section>

    Better?

  • […] html5doctor.com This entry was posted in Web Design and tagged HTML5, HTML5 Doctor. Bookmark the permalink. ← Name search HTML5 Boilerplates → […]

  • jehzlau says:

    Hmmm… I’m still confused where and when to use section. O__O

    Any more examples of where and when to use the section element doc? :(

  • […] 原文地址:http://html5doctor.com/the-section-element/ […]

  • […] can use the <section> element to split the article into logical groups of content with […]

  • Sam says:

    section
    h1
    article
    p
    end
    end

  • Toon says:

    According to Wikipedia, ‘section’ is sometimes used to denote the level of a document or text above the paragraph level. Thus, the hierarchy would/could be: article > section > p(aragraph)
    That seems to jive (more or less) with the HTML5 spec, although it’s a bit odd that you would define a forum post as a ‘section’ and that a title is expected.

  • […] <section> – used to mark up different areas/sections of the page. Again this one is more tricky to get your head around and was subject to great debate during the HTML5 Live course. You can read more about it on the HTML5 Doctor site. […]

  • batty13 says:

    Question regarding nested Header for the main header with HTML5!

    Can you nest all of the elements like header, nav, footer, etc inside one big section tag?

    The idea that comes to mind would be a simple border or css background image that’s tiles vertically such as a drop shadow.

    Or would you just rely on the old div still for HTML5? I”ve looked around and have not seen this yet..

    Here is an example of what I mean…

    Thanks!

  • batty13 says:

    Please disregard my question about sections!!! I see it has been address by the Rule of Thumbs!

    # Rules of thumb for using section
    #
    # Of course, there are always exceptions, but these should give useful guidance for 99% of cases:
    #
    # * Don’t use it just as hook for styling or scripting; that’s a div

    Looks like the div’s are still alive and perfect for just adding in style and scripts! Ah-ha because they are not semantic technically as they do not contain any data or actual content. Thus section is highly inappropriate
    for use in my example and question! Thanks!!

  • […] Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of […]

  • […] Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of […]

  • […] Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of […]

  • […] 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. […]

  • […] 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. […]

  • […] Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, […]

  • I’ve yet to start using HTML5 structures, but early tutorials used section incorrectly, I’m glad this article helps sort out the true use of section. I look forward to building a site completely on HTML5 and CSS3, granted IE7-8 will always haunt us.

  • Scally Wag says:

    I’m being a bit out there now but….

    What’s the difference between:

    <section>

    and….

    <!--section-->

    …why not just use comments in your html. Why use a section tag that has no real power?

  • @Scally Wag — Re-read the bit about using the outliner: <section> and other sectioning content elements help to generate a page outline automatically. This is not required, but it’s useful for e.g. assistive technology. In addition, using these elements means you can skip heading levels without it affecting the outline, which is great if you have logical heading weights. Comments don’t give you these benefits, meaning you should avoid skipping heading levels:

    authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level

    Don’t confuse ‘no default formatting’ with useless ;)

  • Scally Wag says:

    Click… got it!
    Thanks for the advice and link.

  • […] Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately. […]

  • @Scally Wag — happy to help :)

  • Felixius says:

    AAAAAARRRRRGGHHHHH!

    Thanks for the info Doctor, I feel fine now…. AAAAAARRRRRGGHHHHH!

    …AAAAAARRRRRGGHHHHH!

    Sigh

  • Marge says:

    Hi, how can I provide the name of each entry in the outline (using outliner tool) without using h1 in HTML5? Using h1 changes the font to bold right? Suppose that I want my header font to stay the same (not bigger and bold) but at the same time, it will appear as the header name in the outline, how can I do this?

  • Marija Zaric says:

    Hi, I used html5 in my website. But I am a little confused about where to use div, section and article.
    Take a look at: http://www.marijazaric.com and tell me what you think.

  • […] Section: sección genérica de la página. […]

  • Smittie says:

    I think you guys were right the first time. At least, your first application of the term made sense to me. It the first application of the term, SECTION was applied like the sections of a newspaper; Sport Section, Financial Section, etc. This new interpretation has the very limited useful application of long documents such as thesis.

    Given that the bulk the web consists of content that much more closely resembles newspaper articles than doctoral thesis, I really think the original interpretation was much more sensible and fitting. In it’s current assigned role, SECTION simply becomes useless to most of the web.

    Smittie

  • @Smittie — but the sections of a newspaper could easily use <section>s:

    <section>
    <h2>Sports</h2>
    <article>
    <h3>Footie blah blah blah</h3>

    </article>
    <article>
    <h3>Golf blah blah blah</h3>

    </article>
    </section>
    <section>
    <h2>World News</h2>
    <article>
    <h3>Earthquake omg</h3>

    </article>
    <article>
    <h3>Tsunami omfg</h3>

    </article>
    </section>

    Also, you’ve never written something long enough to have subtitles? Almost all of the articles here have ’em, and therefore (should) have <section>s.

  • […] informed decision and you’ll make mistakes on the way and will learn from them (just as I and others […]

  • Kanda says:

    I really couldn’t understand why the main content area cannot be a section.

    What I understand is, a page layout is divided into different sections like header, footer, nav & main content area.

    We need not use section tag for header, footer etc as they have more specific name for that section namely header & footer.

    As main content area doesn’t have a specific name, we use the generic ‘section’ tag.

    Can you please say what’s wrong in my understanding?

  • What about main content?

    <article>

  • […] The section element read through the comments […]

  • […] The section element read through the comments […]

  • Biff Tannen says:

    … the HTML 5 outiner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong.

    When & how would sections acquire a “titled” status?
    I don’t understand.

  • Biff Tannen says:

    Never mind, figured it out (I think).
    So sections should always contain a sub-heading otherwise they’re always going to be “untitled”??

  • Michal Kruszynski says:

    Interesting and confusing.

    Regardless of the spec, I use article and section to style, as less code is needed and it is cleaner, it seems barmy to do otherwise unless I am missing something here. Just because a spec says something, it doesn’t make it right.

    In practice it is natural to want to style a section or article and it is counter intuitive to think otherwise, or have I totally lost the plot?

  • @Michal Kruszynski — <article> and <section> can definitely be styled, but remember they have semantic meaning. If you’re only looking for a CSS hook, then you probably want <div>. Use the most appropriate element

  • Michal Kruszynski says:

    @Oli: thanks for that, clouds of confusion passing, bright spells of illumination to follow

  • […] html5doctorに以下の一文があります. Don’t use it unless there is naturally a heading at the start of the section […]

  • […] Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use adiv element. Read more about using section appropriately. […]

  • Ciantic says:

    Why headerless section is usefull:

    WYSIWYG editors start the heading level from H1 (with trickery one can get the heading level to something else) and everything that comes from editor is therefore good idea to dump inside section.

    Naturally user might not specify any headers (most often e.g. WP posts does not include headers, but they might!) inside the editor and thus the section becomes headerless.

  • Let’s imagine a blog with excerpts on the main page. Do I use

    [article]
    [h1]headline
    [section][h2]topic[/h2]...[/section]
    [section][h2]topic[/h2]...[/section]
    [section][h2]topic[/h2]...[/section]
    [/article]

    or

    [section]
    [h1]headline
    [article][h2]topic[/h2]...[/article]
    [article][h2]topic[/h2]...[/article]
    [article][h2]topic[/h2]...[/article]
    [/section]

    and why? On the one hand, those excerpts represent an article, on the other hand, the page itself is an article containing sections.

  • @Alexander — I’d use the second of your examples. I don’t think a weblog homepage is an article containing sections, in the way HTML5 defines those words. It’s an index to articles, not independent content in its own right. You might also like the HTML5 flowchart

  • Chris says:

    The tweets that keep pushing down my screen are just crazy, I can’t keep the content on the same spot w/o a tweet pushing the content back down.

  • […] Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately. […]

  • @Tiago Araujo — thanks, fixed

  • dhanesh mane says:

    Hey a very nice blog on section, I am still confuse about section element, but I feel its more safe if I dont use it on my sites, as on many websites its written as articles are better than section and dont use sections if there is no proper heading for the respective section.

    Well one more issue is, section can have h1,h2,h3…. tags, and there can be more than one section present on your page. so how safe it is if we use multiple [h1] tags in every section, will it cause any issue to SEO, because as per my knowledge a standard HTML page must have only one [h1], so if section is going to support multiple [h1] tags then how safe is this for SEO.

    Thanks
    Dhanesh Mane

  • @dhanesh mane — If you’re still confused try comparing this post to our post on the <article> element.

    There are no SEO problems with using multiple <h1> elements, and having multiple <h1> elements has always been valid. However, you shouldn’t use multiple <h1> elements for now because that style currently isn’t well supported e.g. by screen readers.

  • dhanesh mane says:

    hey thanks a lot for the article link, I like it a lot, It makes things very clear as of now I am still not planning to have section tag on my website, but surely going to try it in my next website which I want to make fully HTML5.

    Thanks
    Dhanesh Mane

  • Mike says:

    I just can’t see any benefit in bothering to use the “SECTION” or “ASIDE” tags. Since these tags do not affect the way anything is displayed by a browser, they appear to be purely for “trying” to give an indication to a coder how the page content is related (or not).

    If that is it’s only purpose, then why don’t I just continue to use DIVs with clearly labelled IDs?

  • bruce says:

    Mike

    for the “why” see my article on HTML5 semantics http://coding.smashingmagazine.com/2011/11/18/html5-semantics/

    “why don’t I just continue to use DIVs with clearly labelled IDs”

    you can if you want to. But see above.

  • Dan G says:

    Hey this section vs div argument is very complex in my opinion so I wanted to lay something out there and see what you all think. I am building a new portfolio site. The layout is going to be the top header , the middle layer, which will consist of 3 content boxes, and the footer ofcourse.

    Now, there will be 3 content boxes in the middle. They are going to be lined up horizontally across the page (Using the 960 grid system). Each content box will have a title, such as one for about me, one for recent work, etc… and the footer ofcourse.

    Under the about me section, will have a h1 style for about me, and then content in a p tag underneath it. And the same for the other two. 1 ) Would practical use be to wrap the middle area in a whole section in itself and then use 3 div containers for the content boxes inside of the “section”? or 2 ) Have three seperate section elements for the 3 content boxes inside a div tag and just add classes to them? For examples.

    Number one would look like this >

    <section id="content-area">
    <div id="about-me">
    <h1> About me </h1>
    <p>..... </p>
    <p>..... </p>
    </div>

    <div id="box-2">
    <h1> box2 </h1>
    <p>..... </p>
    <p>..... </p>
    </div>

    <div id="box-3">
    <h1> box3 </h1>
    <p>..... </p>
    <p>..... </p>
    </div>

    </section>

    Or would number 2 be more practical


    <div id="content-area">
    <section id="about-me">
    <h1> About me </h1>
    <p>..... </p>
    <p>..... </p>
    </section>

    <section id="box-2">
    <h1> box2 </h1>
    <p>..... </p>
    <p>..... </p>
    </section>

    <section id="box-3">
    <h1> box3 </h1>
    <p>..... </p>
    <p>..... </p>
    </section>

    </div>

    If you could please help me I would greatly appreciate it. I’m trying to become more proficient in html5 but this one element is holding me back : (.

    P.S. If you know a better way of doing what I have mentioned, help would be appreciated ;)

  • Alohci says:

    @Dan G – The clue is in the headings. If you have a section (or article), then it should have a natural heading.

    Ask yourself “What is the natural heading of “content-area”. What text could you put there that a user viewing your web site would want to see?

    In contrast, the natural headings of the 3 parts are provided in your question (well, two of them are) – “About Me” and “Recent Work”, so the sectioning elements should identify these boxes.

    So your second arrangement is the correct one, although there is a good case for using <article> for each of the boxes rather than <section>.

  • Ian says:

    Wow, this article and the comments are confusing. I tend to be thinking along the lines of Marcio’s comments.

    When I think semantic I’m thinking of viewing the code in a text editor and being able to envision how the page is laid out without having to look at the page in a browser. And it should be logical.

    If I have a literal top section and bottom section of different content it doesn’t mean I want to have a big heading for the user to see that says “Top Section” or “bottom section” because that would be stating the obvious as they will most likely be separated in some visual way with styling . The semantic part comes in when another developer is reading the code and can see two sections with id’s of top-content and bottom-content.
    As for trying to not use sections for styling, should I really have a redundant div around or inside a section to ensure I don’t use styles on the section? I know that’s not what you are saying, but I can’t think of any section on a page that I would not apply some style to even it it’s just a margin between sections.

    So, using a div for the wrap or container makes sense to me but then using a section for top and bottom sections makes more sense than using divs for semantics.

    Up until now I thought that was the only reason for the section tag (semantics in the code). I would like to see some definitive guides on marking up for screen readers but at the moment I’m just trying to wrap my head around semantic markup in general.

    As for the article and sections inside it, when dealing with blog posts it makes sense to me to have section class=”meta” or something like that for the meta data about the post(author, date, etc.).

  • @Ian — If you’re finding it confusing, try the HTML5 Sectioning Element Flowchart for a quick overview.

    If I have a literal top section and bottom section of different content

    How about <header> and <footer>?

    The semantic part comes in when another developer is reading the code and can see two sections with id’s of top-content and bottom-content.

    ID names are not semantic (no more than <!-- introductory content starts here -->). If the content is different, then the element will depend on what the content is. If you just want to style it differently, there’s no need for <section> — a class on e.g. <p>, a class on a <div> wrapping the content, or even .entry p:first-of-type {…} as we do here are all better options.

    As for trying to not use sections for styling, should I really have a redundant div around or inside a section to ensure I don’t use styles on the section?

    We mean only use a <section> when it’s semantically appropriate. You can definitely style them if you add them, just don’t add them solely as a style hook. Read more about this in Avoiding common HTML5 mistakes.

    As for the article and sections inside it, when dealing with blog posts it makes sense to me to have section class=”meta” or something like that for the meta data about the post(author, date, etc.).

    A section inside an article should generally be a subsection of the article, with its own title. The “Avoiding common HTML5 mistakes” link above links to a subsection titled “Don’t use section as a wrapper for styling”. I’d add meta stuff to the article’s <header> (or possibly <footer>), probably just in <p> for a single line.

  • Ian says:

    Thanks Dr. Oli,

    That flow chart will help a lot. I’ve also been reading through other articles here and one at smashing.com that have helped me see that I was looking at things from the wrong perspective at times. I’ll read the common mistakes link you provided also.

    I have been looking at section in terms of when a developer looks at my code it will be easy to spot the top, middle, bottom, sections and so on. These would be sections inside the main content wrap. So yeah, total misunderstanding on who I am trying to be semantic for, on my part. And maybe some misunderstanding of the definition of semantics too.

    At any rate, it’s making more sense as I read the articles here. You guys have a lot of good information.

    Thanks

  • Markus says:

    You can also use schema.org to mark the main content of a web page, because the Web Page-Element has a mainContentOfPage Attribute.

  • boomshanka says:

    Hi Bruce,

    Great article (in lack of a better word). I just have one question regarding the outliner tool: When I validate it against http://www.copenhagenfive.com it shows a single untitled entry, but the site does not use section, nav or aside – only header, figure, figcaption and footer. So which one is triggering the untitled entry?

  • Alohci says:

    @boomshanka – that would be the <body> element.

  • Thanks so much for this discussion.

    Something minute. The word technology is misspelled in your article…

  • CNA Training Tips…

    Hello, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam comments? If so how do you stop it, any plugin or anything you can suggest? I get so much lately it’s driving me crazy so any assistanc…

  • Derpa says:

    So what about the small percentage of us who are using HTML to make things OTHER than blogs and news sites? You know, custom tool panels and web applications and such for which your ‘section’ and ‘article’ and ‘aside’ rules are semantically meaningless. Are we just supposed to screw off and use forever?

  • Derpa says:

    * use <div><div><div></div></div></div> forever

  • Bruce Lawson says:

    Not at all, Derpa. You might use menu and command elements. Or the being-specified dialog element for dialogues – http://wiki.whatwg.org/wiki/Dialogs

    Article is for re-usable widgets, too – I imagine that web apps use many of these.

  • Tim says:

    I wondering how html5 will be effected when semantic search comes in and if search engines will still use link distribution as a form of authority.

    I’ve used the section element estensivly in my site about how to build a website it is a bit basic put if you pull it apart it can work well.

    Thanks for the tips Bruce

  • Giovanni says:

    “Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, 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, contact information.”

    According to this section seems a bigger and more generic container that the one you describe in this page.

  • Some sort of section inside an article will need to typically deemed a subsection in the write-up, featuring a personally own concept. Your “Avoiding popular HTML5 mistakes” link above one-way links into a subsection called “Don’t utilize section in the form of wrapper pertaining to styling”. I’d contribute meta goods towards article’s (or quite possibly ), more than likely only with
    for just a single line.

  • Emily says:

    That has helped me out loads Bruce, thanks for explaining it all properly so my puny little mind can comprehend it!

  • Valter says:

    This helped me a lot…. W3 Structural Elements have no idea why I didnt check in here first!

  • Steve says:

    This sounds really cool. HTML Doctors..nice venture. HTML 5 is really awesome and I love coding with it.

  • There is another good reason not to use the HTML5 semantic tags (section, nav, etc) as a CSS selector – Internet Explorer 8 will ignore them.

  • andrej says:

    what is the thinking behind introducing the section tag? why do we need it?

    until now content was structured by headings and hierarchy – why is this not enough?

  • Waqas says:

    Hi,

    Same question here. What is the myth behind the “Section” tag. Can anybody explain in a simple way? Or a rule of thumb why and where should we use it?

    thanks,
    Waqas

  • marcin says:

    Hi everybody, if someone is still confussed go there http://www.w3.org/wiki/HTML_structural_elements

  • […] Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately. […]

  • […] Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately. […]

  • Peter says:

    Does the section’s heading need to be a direct child? Or is it proper to use as section > header > h1 ?

    Further, I am confused since W3C seems to make no mention of your criteria for headings. http://www.w3.org/wiki/HTML_structural_elements#.3Csection.3E

    Please clarify

  • Peter says:

    To my previous point, if indirect children suffice as a section heading, is the example given by W3C proper, e.g., section > article h + section > article > h + section > article h ? It would seem that the headings of the children offer no declarative identity for the parent section wrapper, only the individual article children.

  • Health says:

    how can I provide the name of each entry in the outline (using outliner tool) without using h1 in HTML5?

  • Vladimir says:

    Why in your site elements “Element index” and “Ask the doctor” is a <section> elements? And “Related posts” and “Recent posts” not a <section>?

  • Would it make sense to put a <section> inside a <header> instead of using, say <h6>? In my situation, it would be for content describing the page (body > header > section)

  • Lance says:

    So when I see a page that is structured like so:

    <section>
    <header>

    </header>

    <div class="content">

    </div>

    </section>

    Is this correct?

    • Bruce Lawson says:

      it depends. If that’s all the content, the section is unnecessary – its function is to distinguish one section from another; if there is only 1 section, then it’s redundant.

  • DaVince says:

    My main content is segmented into several large blocks of content (it’s a portfolio; think stuff like “About me”, “My web designs”, “My music”). These blocks of content are rather large and contain their own… subsections, I suppose (separated as <article> tags).

    Would you say that using <section> is the best tag to use here?

  • DaVince says:

    …Really soon after, I find this MDN article on sections and it basically answers my question. It’s totally fine. :)

  • Springboard says:

    Has the use of <section> been altered in this page’s markup since the Jan ’14 update? Curious, because I’m still seeing some seemingly unnecessary instances.

  • Emil says:

    “or to demarcate the main content area from the nav, header, footer etc. ” – it is work for “main” markup.

  • Jumong says:

    HTML 5 structure is like 2+2=5, there is no correct answer only bullcrap

  • Leave a Reply to Oli Studholme

    Some HTML is ok

    You can use these tags:
    <a href="" title="">
    <abbr title="">
    <b>
    <blockquote cite="">
    <cite>
    <del datetime="">
    <em>
    <i>
    <q cite="">
    <strong>

    You can also use <code>, and remember to use &lt; and &gt; for brackets.