Grow your CSS skills. Land your dream job.

Last updated on:

HTML5 Page Structure

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Your menu</li>
			</ul>
		</nav>
	</header>
	
	<section>
	
		<article>
			<header>
				<h2>Article title</h2>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>
		
		<article>
			<header>
				<h2>Article title</h2>
				<p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>
		
	</section>

	<aside>
		<h2>About section</h2>
		<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>

	<footer>
		<p>Copyright 2009 Your name</p>
	</footer>

</body>

</html>

Comments

  1. Permalink to comment#

    And where is charset ?

  2. Permalink to comment#

    Just a query about the double inside the and also where is the ?
    Thanks for your very clear & useful website and I introduced my webdesign students to your video’s and they find it very helpful too.

  3. Permalink to comment#

    Hmm it looks like the code I wrote did not come up in the text, so I try it again and hope it will be rendered ok:

    I was wondering about the double <p> <p> inside the <article> ?
    … and also where is the <h1> ?

    Thanks

    • Mahendra
      Permalink to comment#

      How can we create html 5 page for Android is there ay specific tag.

  4. Helen
    Permalink to comment#

    Some page don’t look like a little girl’s blog. They have one piece of article but several navs and asides. Keep using xhtml-strict and use roles and titles!

  5. Isn’t there a new deffinition for the charset meta tag in the html5 spec? i.e.

    <meta charset="UTF-8">

    *just googled it and found an answer. (yes was the short answer).

  6. Ant

    I am just thinking about nav tag, is it really necessary? I never used div#nav>ul structure, instead ul#nav.

  7. Kelly Copley
    Permalink to comment#

    For charset the specs actually offer 3 methods..

    1. transport level content-type header.
    2. new charset meta tag
    3. Unicode byte order mark

  8. Without a style it will look like ordinary text or …?

  9. Permalink to comment#

    That’s a nice syntax for documents. For webpages you ought to place the navigation after the content for accessibility purposes.

    consider instead:

    <header>
    ...
    </header>
    <section>
    ...
    </section>
    <nav>
    ...
    </nav>
    <footer>
    ...
    </footer>

    You can still make the nav appear in the header of the page (or wherever else you want) using CSS, but when a blind user reads the page with a screen reader, they won’t be affronted with the long list of links until after they’re finished reading the content of the page.

    Additionally, when drop-down menus are used they will appear over embedded content (rather than hiding under) due to their lower location in the DOM.

    • Gregg
      Permalink to comment#

      Thanks for the explanation; I never would have considered that. Very helpful.

  10. El garch Hicham
    Permalink to comment#

    Thanks for the post, you did a great job :D

    what i’m asking is there is possibility to make Internet explorer (6,7 and other
    versions) understand the HTML 5, a js hack for example.

    I work for a web compagny and websites we create should be well displayed and accessible in also in IE .

    If anyone has any suggesions please show me your ideas.
    my GM: elgarch.hicham@gmail.com

  11. Permalink to comment#

    Thanks for the post, you did a great job :D

  12. Thanks!
    I want to try out the HTML5 one day.
    this is a definitely good starting point !

  13. Mathew
    Permalink to comment#

    is it really

    ………..

    or

    …….

    because I’ve seen site using article over section.

  14. Hey,

    I’ve been using this post as a for many HTML5 projects and it’s great.

    But I watched a video the other day in which the caster said that the tag was used *inside* the tag to separate different sections in the article and it made me think which one is correct. Any thoughts?

  15. thanks for sharing the code. :D

  16. David Chase
    Permalink to comment#

    Wouldnt it make sense to have the the section be inside of the article. When reading a magazine article there are many sections to the article rather than many articles in a section?

  17. sidd
    Permalink to comment#

    Header in section tag ?

  18. Clint
    Permalink to comment#

    IE8 will not recognize these styles when using this markup.

    For example:
    tag in the stylesheet
    header {width:940px; margin:auto; padding:0;}

    doc:
    Hello World

    When you render the page in IE8 the content will not be centered. If rendered in FF or Safari everything works fine.

    C~

  19. Permalink to comment#

    Hmmm… , … it’s not so clear, is it? Consider: http://www.turtleblog.co.uk/2011/04/whats-new-to-html5/

  20. Warren
    Permalink to comment#

    your structure is wrong! Sections should be located inside an article> an article makes sense by itself where as a section relies on other sections in order to make sense. http://html5doctor.com has a few good articles on this

    • Michael
      Permalink to comment#

      Warren: Article should be located inside a Sections not vice versa

  21. Clint, you can use Norminizer or eric meyers CSS Reset. All great tools. I forsee HTML 5 a dominate force behind SEO/SEM because of the semantics….. Great article.

  22. Ive recently been trying to up grade my website too html5, and let me tell it’s been a pain becaue most off selectors wont position the way I want, any
    sugestions on tutorias on the

  23. I just finished re-designing my theme. Thank you very much for your helpful post. HTML5 rocks :p

  24. Mohinder Singh

    every body give only the html5 tag but no body give how to write css for each like footer, aside, nav, section, article, etc.

  25. Mohinder Basta
    Permalink to comment#

    I want to Know how to write css properly for html5

    can you please send me a layout with example

    or a refrence site

    • mukesh
      Permalink to comment#

      mohinder u can make a class or an id inside ur header footer or aside tag … and simply add css to that class or id ..
      like …

      section class=”left_top_section”>
      header class=”left_top_header”> h1>……..header goes here ……./h1>/header>
      /section>

      and finally u can apply ur css rules to that classes …:)

  26. Greg Richmond
    Permalink to comment#

    Mohinder the CSS is no different to what you would have used with divs previously.

  27. Targyro
    Permalink to comment#

    Isn’t it insane that some of you guys are saying that the structure written above is wrong when HTML5 was created for that exact reason! If one thing is right about HTML5 is :ANYTHING GOES!

  28. Permalink to comment#

    Very clear information, Thanks for this information, but I have one confusion that, can we use section under article tag?

  29. mahendra
    Permalink to comment#

    Yes we can use article tag.

  30. Malakai
    Permalink to comment#

    Is correct somethink like this??
    <section>
      <header>//h2</header>
      <article>
          <header>//h3</header>
      </article>
      <article>
          <header>//h3</header>
      </article>
    </section>

  31. Permalink to comment#

    Finally HTML5 brings a better form of semantic markup! The element makes more sense for navigation than the old

    <

    ul> (unordered list) or

    <

    ol> (ordered list) elements, since those lists could represent anything. With the tag search engines can better define the idea that this tag is intended for navigational use only, such as with an absolute URL (http://www.your-site.com/example-page.html), or with a relative URL (your-directory/example-file.html). The old list tags could have represented a list of images, or types of something, regardless if it was a link or not.

    The new section tag would be great for home pages where you might have links to different sections of your site and want to represent certain types of content in each section. The article tag is also a “no brainer”. Should have had this years ago. I really like the tag too! A better way to represent content that is somehow related to but not directly part of an article or a pages content.

  32. Mike S
    Permalink to comment#

    Thank you for this! It’s just what I needed!

  33. hi,

    i just saw an article that explain that we should use instead of article

    http://www.iandevlin.com/blog/2013/01/html5/the-main-element

    what do you think ?

    i don’t know how to combine my section, article, main and aside tags. Because of my grid i have my article and my secondary navigation on the same row.

    so can i do something like that?

    <main>
     <article>
      <h1></h1>
      <p></p>
     </article>

     <aside>
     </aside>
    </main>

    ?

  34. Great! With your help I just made a redesign to HTML5 and Jquery for our website. Thanks!

  35. sunil
    Permalink to comment#

    You have used h2 inside sections but I believe it should be h1 tag

  36. Daniel
    Permalink to comment#

    This seems inconsistent with what html5doctor says. The article tag should be used where the section tag is used and vice versa.

  37. QuicksilverTO
    Permalink to comment#

    …or maybe it doesn’t matter at all. The issue here is EVERYONE IS CONFUSED (including those who have written books about HTML5), and for good reason.
    I suggest you read this free chapter from “The truth about HTML5″ (http://www.netmagazine.com/features/truth-about-structuring-html5-page) .
    Once you understand the intention behind the tags, you can decide if and when you should use them.

  38. Hey chris, quick question, is it okay to put section inside article tag? or is it not valid?

  39. We are in 2013 … we can now use the <main> tag.

  40. I was just glancing over the code and I noticed there is no tag. Perhaps Coyer might edit the code since there are a lot of comments and people might not scroll down.

  41. Wondering if the comment section should be within the main <section></section> tag or do we need another <section></section> to place comment template? Thanks in advance.

  42. Permalink to comment#

    Thanks! HTML5 change the web world…

  43. Akam Omer
    Permalink to comment#
  44. Dan Ware
    Permalink to comment#

    Great simple post!

    People still think it contains mistakes, but not everyone can read specs!

    Here in the spec, it clearly shows an article containing a section and a section containing an article – get over it!

    http://www.w3.org/html/wg/drafts/html/master/sections.html#the-article-element

  45. Chathura Wijekoon
    Permalink to comment#

    Where is the H1? Can we place multiple H1 tags within each section or articles or headers? Isn’t it good for SEO?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".