LearnHow to Use The HTML5 Sectioning Elements

HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

In this post you’ll learn how to use these sectioning elements in your own web sites. I’ll be explaining when you should use certain elements over others, as well as when it’s best to stick to a good old <div>.

Check out all our HTML courses at Treehouse.

Lets get started.

The main Element

The <main> element should contain the main content for your web page. All of this content should be unique to the individual page, and should not appear elsewhere on the site. Any content that is repeated on multiple pages (logos, search boxes, footer links, etc.) should not be placed within the <main> element.

The example below uses a <main> element to represent the main content for the page

<body>
  <header>
    <div id="logo">Rocking Stone</div>
    <nav>...</nav>
  </header>
  <main role="main">
    <h1>Guitars</h1>
    <p>The greatest guitars ever built.</p>

    <article>
      <h2>Gibson SG</h2>
      <p>...</p>
    </article>

    <article>
      <h2>Fender Telecaster</h2>
      <p>...</p>
    </article>
  </main>
</body>

Note: We’ve used the ARIA role=”main” attribute here is it indicates the significance of this element to programs that don’t yet support the <main> element (such as some screen readers).


You should only use one <main> element on a page, and it shouldn’t be placed within an <article>, <aside>, <header>, <footer>, or <nav> element.

The article Element

The <article> element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like news articles, blog posts, or user comments.

<article>
  <header>
    <h1>Blog Post Title</h1>
    <p>Posted 13th February 2014</p>
  </header>
  <p>
    ...
  </p>
</article>

You can nest <article> elements within one another. In this case it’s implied that the nested elements are related to the outer <article> element.

<article>
  <header>
    <h1>Blog Post Title</h1>
    <p>Posted 13th February 2014</p>
  </header>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <section>
    <h2>Comments</h2>
    <article>
      <footer>
        <p>Posted by: Joe Balochio</p>
      </footer>
      <p>This was a great article</p>
    </article>
    <article>
      <footer>
        <p>Posted by: Casey Brock</p>
      </footer>
      <p>How do you think this applies to the plan for world domination?</p>
    </article>
  </section>
</article>

In this example we’ve used <article> elements to mark up the blog post, and each of the comments. This nesting pattern implies that the comments are related to the topic of the main blog post.

The section Element

The <section> element is used to represent a group of related content. This is similar to the purpose of an <article> element with the main difference being that the content within a <section> element doesn’t necessarily need to make sense out of the context of the page.

It’s advisable to use a heading element (<h1><h6>) to define the topic for the section.

Using this blog post as an example, you could have <section> elements that represent each of the individual parts within the post.

<article>
  <h1>How to use HTML5 Sectioning Elements</h1>
  <p>...</p>

  <section>
    <h2>The <main> Element</h2>
    <p>...</p>
  </section>
  <section>
    <h2>The <article> Element</h2>
    <p>...</p>
  </section>
  <section>
    <h2>The <section> Element</h2>
    <p>...</p>
  </section>
  ...
</article>

Here we’ve used an <article> element to represent the post as a whole, and then multiple <section> elements to represent each of the sub-topics discussed in the post.

If you just need to group content together for styling purposes you should use a <div> element rather than a <section>.

The nav Element

The <nav> element is used to mark up a collection of links to external pages or sections within the current page. As well as being used for the main website navigation, the <nav> element is also a good fit for things like a table of contents, or a blogroll.

<nav>
  <ul>
    <li><a href="#chapter-one">Chapter One</a>
    <li><a href="#chapter-two">Chapter Two</a>
    <li><a href="#chapter-three">Chapter Three</a>
  </ul>
</nav>

Marking up your links within a list will often make your navigation easier to use, however this is not a requirement when using a <nav> element.

The aside Element

The <aside> element is used to represent content that is tangibly related to the content surrounding it, but could be considered separate. This includes things like sidebars (like those you might find in a book), groups of <nav> elements, figures and pull quotes.

<article>
  <header>
    <h1>Google Buys Nest</h1>
    <p>Posted at 11:34am 13th January 2014</p>
  </header>
  <p>...</p>
  <p>...</p>

  <aside>
    <h1>Google (GOOG)</h1>
    <p>Google was founded in 1998 by Larry Page and Sergey Brin. The company...</p>
  </aside>
</article>

In this example we’ve used an <aside> element to mark up information about Google within a news article. The company information in the <aside> could be considered useful by the reader but it’s not directly related to the news story.

The header Element

The <header> element is used to represent the introductory content to an article or web page. This will usually contain a heading element as well as some metadata that’s relevant to the content, such as the post date of a news article for example. It could also contain a table of contents (within a <nav> element) for a longer document.

A <header> element will be associated with the nearest sectioning element, usually it’s direct parent in the page structure.

<header>
  <h1>Google buys Nest</h1>
  <p>Posted at 11:34am 13th January 2014</p>
</header>

In this example the <header> element contains the title and posted date for a news article.

The footer Element

The <footer> element is used to represent information about a section such as the author, copyright information, or links to related web pages.

<footer>
Copyright Matt West 2014
</footer>

As with <header>, the <footer> element is associated with the nearest sectioning element.

The address Element

The <address> element is one of the most commonly misunderstood HTML elements. This element is not for marking up postal address, but rather for representing the contact information for an article or web page. This could be a link to the author’s website or their email address.

<address>
  Contact <a href="mailto:matt@example.com">Matt West</a>
</address>

This element is often used within the <footer> for an <article>.

<article>
  <header>
    <h1>Google buys Nest</h1>
    <p>Posted at 11:34am 13th January 2014</p>
  </header>
  <p>...</p>
  <p>...</p>
  <footer>
    <address>
      By <a href="mailto:matt@example.com">Matt West</a>
    </address>
    <p>Copyright Matt West 2014</p>
  </footer>
</article>

Final Thoughts on the Sectioning Elements

In this post you’ve learned how to use the HTML5 sectioning elements when marking up your web pages. Using these elements has a number of benefits. One of the biggest being that it gives certain areas of your page more semantic meaning, allowing computer programs to identify key elements like the main content and page navigation. This information is extremely useful to applications like screen readers.


Note: Not all screen readers have support for these semantic elements yet. You may want to continue using ARIA roles just to be safe.


Using these sectioning elements also has the benefit of making developers think more about the structure of their web pages. Selecting which element to use for a piece of content isn’t always obvious, but it raises important questions about the purpose of that content, and whether it belongs on the page at all. This is an example of where web standards are not only helping to improve the quality of our markup, but the quality of our web pages as a whole.

I’m interested to hear your thoughts on the HTML5 sectioning elements. Share your views in the comments below.

Useful Links

55 Responses to “How to Use The HTML5 Sectioning Elements”

  1. VNCoupon on May 19, 2018 at 9:12 am said:

    Hi!
    Thank for sharing! It’s very useful.

  2. Despite the dubious implications of single-spaced strategies, often there is more than enough room to see and write relating to the lines of things we say.
    The latest studies have shown that decoding may be accomplished inside a
    few days, and even quicker if more computing power is employed.
    4(9)T or older I hope this article was very informative and helped you quickly see
    the usage with the clear crypto datapath command.

  3. Hello I am so glad I found your website, I
    really found you by error, while I was browsing on Askjeeve for something else, Anyhow I am here now and would just like to say many
    thanks ffor a incredible post and a all round enjoyable blog (I
    also love thhe theme/design), I don’t have timke too read through it all at thee minute but I
    have book-marked it and also added your RSS feeds,
    so when I have time I will be back to read a lot more, Please do kerp
    up the awesome job.

  4. Best dog food review on February 5, 2018 at 12:22 pm said:

    It’s remarkable to go to see this web page and reading the views of all colleagues
    about this paragraph, while I am also eager of getting experience.

  5. Awesome! Its actually amazing article, I have got much clear idea about from this post.

  6. Sarah T. on January 10, 2018 at 1:39 am said:

    Hey, Matt!

    Thanks for the very thorough article. I’ve never even used the likes of address before.

    My question is simple – are these (somewhat complex, might I add) semantics in any way more useful from a SEO standpoint than simple div’s? I’ve done some checking (not creepy stuff, just using things like http://webanalysis.tools/ , so don’t judge) and few of my competitors seem to use and elements. Do you think that using this more complex and specific approach could potentially help with ranking?

    Thanks again,
    Sarah

    • Matt West on January 11, 2018 at 12:39 am said:

      Hi Sarah,

      I’m not an SEO expert, so can’t comment on any specific SEO benefits from using these tags.

      In general, it’s better to always use the appropriate tags so that you’re giving semantic meaning to your content. In theory, this will make it easier for programs like search engine crawlers to understand your page. Whether this will actually impact your ranking is beyond my area of expertise.

      Sorry that I can’t be more help.

  7. news blog logo on October 30, 2017 at 11:46 am said:

    Stick with what you’re doing, or find another and marketing strategy to replace the classified ad
    strategy. There are many news blog logo networks around where you can submit you and market
    your blog. This is a gesture of excellent will hoping that other
    bloggers will do the identical.

  8. cool sculpting in colorado on October 24, 2017 at 12:26 am said:

    I think other website owners should take this web site as an example, very clean and great user friendly design.

  9. www.gaoodgle.com on September 2, 2017 at 5:13 am said:

    For the reason that the admin of this site is working, no hesitation very shortly it will be renowned, due to its quality contents.

  10. Personally, I had problem with section-article-section interaction. Such article helps to figure out something more consistent from this sectioning mess. This whole sectioning ain’t so obvious as it sounds;]. Read some publications on the subject, and see yourself. Even persons, who are considered “industry expert” (and who are surely experts to someone like me) have differing opinions and/or feelings about this. Anyway, reading this helped me assign solid place for each of those (elements) in my own designs.

  11. Great post! Very clear. (nice clean design, too.) Cheers!

  12. KelvinKMC on May 30, 2016 at 7:54 pm said:

    Very informative article!

    I didn’t realise and tags could be repeated so many times throughout the HTML document. I had been using it to define the structure of the page as opposed to what you’re explaining.

    Also, I had been using the tags to define actual sections of the page. I will take your advice and use s instead.

    I feel like such a newbie again after reading this.

  13. Jonathan Gonzales on February 21, 2016 at 11:58 pm said:

    Great thing! thanks for sharing about HTML 5, its usefull 🙂

  14. meizitang botanical slimming on January 27, 2016 at 3:02 am said:

    http://www.meizitangonsale.com

  15. I’d suggest to always wrap navigation links with an list for the accessibility purposes. For example blind people are happy to have a control over the navigation which is easier with a list.

  16. ウブロ スーパーコピー 優良店 大阪 on December 10, 2015 at 10:31 pm said:

    ウブロ スーパーコピー 優良店 大阪 http://www.bagkakaku.com/index.html

  17. スーパーコピー 服 激安 6畳 on December 10, 2015 at 10:30 pm said:

    スーパーコピー 服 激安 6畳 http://www.newkakaku.net/guz1.htm

  18. カー用品 on December 10, 2015 at 6:49 pm said:

    [SOLD OUT]バンズ VANS VAULT SK8-HI BOAT LX VINTAGE TRI-TONE スニーカー ヴォルト スケートハイ ボート ラグジュアリー ヴィンテージ トリプルトーン スエード メンズ VN-0L9JLIA バーガンディ [ 正規 あす楽 ]【P2】

  19. [SOLD OUT]送料無料 コーチ COACH メンズ トートバッグ [ F93219 ] ブラック MCS アンバサダー ブリーフ [ 正規 アウトレット あす楽 ]

  20. transport międzynarodowy pabianice on October 11, 2015 at 8:55 am said:

    Kran HDS przydaje się także przy oporządzaniu po remontach.
    Jeżeli na obszarze budowy zyskują się
    metaliczne zasobniki z gruzem, aktualne naciągając niszczone skrzydło HDS,
    umiemy zapycha intensywnie przymocować
    na wozie tudzież wywieść do krzesła konserwowania.
    W rezultacie HDS Jednostkę egzystuje stosowany ongiś, gdy ciągniemy
    sens zrobić wykopaliska ziemne o
    dość oczywistym zarysie. Naówczas HDS potrzebuje puścić dopasażony
    w metalową nabierkę zaś
    zasłużonego kamerzystę, który będzie władał taki
    wyszukaj zrealizować

  21. converse taiwan on September 15, 2015 at 7:25 pm said:

    conversęŞ

  22. Thanks for finally writing about > How to Use The HTML5 Sectioning
    Elements – Treehouse Blog < Loved it!

  23. コーチ キーケース レディース 人気,コーチ アウトレット メンズ,ニナリッ on September 9, 2015 at 3:53 pm said:

    http://branditandbuildit.com/uruzz01/coach-76442-43.htmlコーチ バッグ ピンク,コーチ バッグ ピンク,ポーター ショルダー,ポーター コラボ トート,【新品-本物-正規品】最低価格と最高の品質を持つ製品は超激安 価格で大 放出!ニナリッチバック
    [url=http://backpackuganda.com/uruzz01/coach-26445-85.html]コーチ キーケース レディース 人気,コーチ アウトレット メンズ,ニナリッチ 財布 小銭入れ[/url]

  24. コーチ ハンドバッグ レザー,コーチ ショルダーバッグ レディース 黒,ニナ on September 9, 2015 at 3:53 pm said:

    http://www.binxdaclown.com/uruzz01/coach-96444-59.htmlジョブコーチになるには,コーチ キーケース,ポーター ショルダー,ポーター コラボ トート,【新品-本物-正規品】最低価格と最高の品質を持つ製品は超激安 価格で大 放出!ニナリッチバック
    [url=http://www.signpac.com.au/uruzz01/coach-86449-125.html]コーチ ハンドバッグ レザー,コーチ ショルダーバッグ レディース 黒,ニナリッチ 財布 店舗[/url]

  25. コーチ長財布,コーチ アウトレット 公式,ポーター ショルダー,ポーター コ on September 9, 2015 at 3:53 pm said:

    http://colonialdinerrestaurant.com/uruzz01/coach-66442-34.htmlコーチバックトート,チャンピオン コーチジャケット,ニナリッチ 香水 トマト
    [url=http://www.pageshoes.com.au/uruzz01/coach-26440-5.html]コーチ長財布,コーチ アウトレット 公式,ポーター ショルダー,ポーター コラボ トート,【新品-本物-正規品】最低価格と最高の品質を持つ製品は超激安 価格で大 放出!ニナリッチバック[/url]

  26. コーチ ハンドバッグ ピンク,コーチ ショルダーバッグ レディース 黒,ニナ on September 9, 2015 at 3:52 pm said:

    http://taxiinbirmingham.org.uk/uruzz01/coach-16445-72.htmlsupreme コーチジャケット,コーチ トートバッグ キャンパス,ニナリッチ レールデュタン
    [url=http://www.whatissharepointportal.com/uruzz01/coach-86449-124.html]コーチ ハンドバッグ ピンク,コーチ ショルダーバッグ レディース 黒,ニナリッチ 財布 店舗[/url]

  27. コーチ ショルダーバッグ 黒,コーチ キーケース 花柄コーチ キーケース 金 on September 9, 2015 at 3:52 pm said:

    http://northerned.com/uruzz01/coach-46441-20.htmlコーチ 財布 ブラモ_,コーチ ショルダーバッグ 黒,ニナリッチ 香水 レールデュタン
    [url=http://www.newlegacyrc.org/uruzz01/coach-56447-109.html]コーチ ショルダーバッグ 黒,コーチ キーケース 花柄コーチ キーケース 金具,ニナリッチ 財布 年齢[/url]

  28. Brian Ellis on August 7, 2015 at 2:17 pm said:

    Well it removed the tag I referenced but it is the main tag. It’s not supported by IE.

  29. Brian Ellis on August 7, 2015 at 2:16 pm said:

    While I’m sure this article has its merits I couldn’t get past the first line as the tag is not support by IE at all and is asking for trouble when coding a site.

  30. mathew porter on March 1, 2014 at 6:02 am said:

    I have seen an ever increasing amount of sites and especially theme devs using the section element incorrectly, I would say if your not sure on if you should use it on a particular area of your markup, then possibly leave it out.

    In respect the the multiple h1 tag discussion in the comments, from an seo prospective its advisible to have one per page and in terms of markup, as mentioned by Adrian, you should you a nested heading structure that is relevant to the flow of the document.

  31. Fantastic article!

    I always thought you can only wrap article in a section tag and not the other way round.

    Good explanations!

  32. Thanks for this article. One thing I struggle with is determining when the section element is appropriate. Can you elaborate more on how to determine when this element makes sense? Is there a real basic question to ask yourself to help determine when to use it?

    • Matt West on February 27, 2014 at 8:51 am said:

      Hi Tom,

      Sections should be used if you need to group together a bunch of elements that are related but don’t fit the requirements for an article element (i.e. they wouldn’t necessarily make sense when taken out of the context of the page).

      For example if you look at this page from the Treehouse website, each of the page sections (defined by the change in background color) could have been marked up using section elements.
      http://teamtreehouse.com/features
      Image: http://cl.ly/image/3A1a282z1o0O

      Does that help at all?

  33. Mr Martinez on February 25, 2014 at 4:52 am said:

    Thx for some great reading! I have a question, do you use any framework like foundation or bootstrap. And if so, how would you (or soneone else hrre) approach a semantic structure. Since we have to use row classes and column classes for ex. I have tried to outline the content with for ex. and then child the framework “divs” bit i feel uncomfortable using just that, divs… Greetings.

    • Mr Martinez on February 25, 2014 at 4:54 am said:

      Sry for typos (phone) and i outline them with for ex. The section element. (Didnt include it when i used tags around it in my post)

  34. Hi,
    great article, gave me some ideas how to work with these elements. I have a question though, in a single page website, would you recommend to use for the page sections like for example the “hero section” and “our work” and “clients quotes” and so on, the section element or div elements or some other ? This is still not clear for me, I currently use the section element which made the most sense for me but maybe is not correct.

    thanks.

  35. Viziononline web design company is the most innovative company. It provides innovative features of websites, that are the unique and visually appealing design. They have experienced website designers that gives new idea in your business website http://www.viziononline.co.uk

  36. Wow, thank you for this article. Very helpful!

  37. Great article
    I mostly used divs, and now I’m going to edit a huge part of my site, towards HTML5 sectioning.

  38. thank you for help

  39. Your website offered us with useful details to work with. Each & every guidelines of your publish are amazing. Thanks a lot for discussing. Keep writing a weblog.

  40. Thanks for the post Matt, really throws some light.

    But still I’d ask a question about SEO-benefits of using multiple H1 tags on the page? I guess it’s another HTML5 issue out there. This article http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era–webdesign-16824 is remarkable, but the commenters point out that we shouldn’t use multiple H1 tags.

    What do you think about it?

    • Matt West on February 19, 2014 at 1:25 am said:

      Hi Alex!

      Matt Cutts did a video on using multiple H1s, it’s a little old now but could still be useful. http://www.youtube.com/watch?v=GIn5qJKU8VM

      Edited: Removed inaccurate information about the HTML5 page outline algorithms relationship with SEO.

      • Wow, some guys pointed out that search engines still do not use HTML5 Outline algorithm for sake of backward compatibility. Thanks for the video, though! 😀

      • Adrian Roselli on February 24, 2014 at 6:14 pm said:

        The HTML5 Document Outline is supported by no browsers and should just be ignored. One of the HTML5 editors has called it a “dangerous fiction” (http://blog.paciellogroup.com/2013/10/html5-document-outline/), it imparts no SEO benefits (at least none that anybody can cite), and the W3C is changing the language about using multiple H1s as a result of all the recent misunderstandings (http://lists.w3.org/Archives/Public/public-html/2014Jan/0004.html).

        In the interests of accessibility and a non-flat document structure, just use traditional nesting and avoid H1s in every section (use a heading level appropriate to its nesting position).

      • Adrian Roselli on February 25, 2014 at 11:10 am said:

        I see you edited your comment to remove the reference to SEO and the HTML5 Document Outline. I also see you removed my comment altogether. Any reason why? Can you put it back?

        • Matt West on February 25, 2014 at 12:17 pm said:

          Hi Adrian,

          Yep, didn’t want people to read my comment and get the wrong info.
          I didn’t remove your comment, it was flagged for moderation as it contained links. I’ve approved it so it should be live now.

          Thanks for the correction btw 🙂

          • Adrian Roselli on February 25, 2014 at 3:57 pm said:

            Matt,

            Gotcha. My bad. I didn’t see any note when I posted it (I may have not been looking very hard). Thanks!

  41. Great article. I especially didn’t know <address> was meant to be used for _contextual_ contact information. As the name implied, I thought it was for _physical_ addresses. And that was a bit confusing, because I also saw it used for author contact information and made a false assumption that it was not semantic. I have to remember that HTML5 elements aren’t so literal. 😛

  42. Woah this kind of website is fantastic everyone loves looking through the articles you write. Continue to be within the great! You are aware of, many people are seeking spherical because of this facts, you can guide these tremendously.

  43. As you see, my ‘section’ tags are not in my comments 🙁

    • Matt West on February 18, 2014 at 4:28 pm said:

      The comments system on this blog will strip out any HTML for security reasons. If you want to display HTML code you need to escape the tag syntax. See: http://www.htmlescape.net/htmlescape_tool.html

      🙂

  44. Hey, It is a good article cheers.

    Although the article is very helpful, there is problem that I can see. I don’t understand how you type element as a word. If you start element, HTML renders it and creates a a section block. It does not wait to close tag like .

    Could you explain me how you handle it?

    Cheers.

Leave a Reply

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more