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

    • madhvik
      Permalink to comment#

      jst go to the url : https://github.com/aFarkas/html5shiv#html5shivjs

      Download the html5shiv.js and include the below mentioned code into the head tag

           <!--[if lt IE 9]>-->
      
      
      

      It renders HTML5 element dynamically in the DOM and rules out the cross-browsr compatibility issues in IE6-8.

    • madhvik
      Permalink to comment#

      After downloading the html5shiv.js into the native js folder inside HTML, please use this into your head tag;

      <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <![endif]-->
      
  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?

    • Readability and W3C go both ways. HTML5 layout hierarchy gives greater weight to section tag, for layout reasons. Article tag locations are designer semantic, content delivery. CSS weighting, heavy-to-lightweight seems to run section-article-div. Making section a fantastic content anchor, article a reliable placeholder, and div an unobtrusive manipulator.

      header/header article... section... article/article .../section .../article footer/footer

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

    • mmcgu1966

      I know this is an older post, but I was just updating my templates and noticed that W3Schools still shows the tag as ‘unsupported’. that seems a little odd. Anybody have any problems with it in IE 10+?

  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

    • Mark

      This is true, Dan. But in Chrome and IE (I only use later for now) the CSS cascade handles section and article differently, depending on parent-child relations.

      article and section are newbies – p a and h1 have been around a while
      screen layout reflects the stability of older (foundation?) elements

      sometimes designers have to code like bug testers – push both incidences and you have more control
      not sure if that applies with article and section – they’re on steroids for now

      http://css-tricks.com/perfect-full-page-background-image/ …my fav in this respect…

  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?

    • Bryan

      Hey Chathura,

      Maybe someone already answered this for you, but according to Matt Cutts, who is a big wig @ Google and is pretty sociable with people who ask questions regarding best practices for SEO, he states that multiple H1’s on a single page is okay to use, but use with caution and moderation. Meaning use H1’s where they make sense! Typically when I develop a site I use an H1 for the logo (just on the home page) and the home page’s main title can also have an H1, because they are both separated pretty well in different sections of the site. When it comes to doing an interior layout page I removed the H1 from the logo and just go with a basic anchor instead which leaves only one H1 on the page and it is dedicated to the page title.

      Hope this makes sense.

      Matt Cutts video talking about best practices for H1 elements in SEO: https://www.youtube.com/watch?v=GIn5qJKU8VM

  46. Bryan

    Maybe this has been addressed, but I see this on many websites now a days where the developers have totally skipped over the H1 tag and go straight to using H2’s for things such as the page title/article title of the page… I’m confused to this as H1 is supposed to be used for the pages main title… Is there any explanation as to why this is becoming a common theme among website now a days? Pretty confusing to me and I’m also going out on a limb and thinking the developers of whatever website that uses H2 as the main page title are just lazy and not noticing the type of html element being used.

  47. Michael E McGuire

    It’s getting more common to have a banner or logo-image in place of the H1 headline. Sub-headlines would still feel like they should be H2s and so-on. There’s really no good reason to even use H-tags since we tend to reset all the default styles anyway and web page design are getting away from the print-model.

    The unasked question is, should the logo be in an H1 tag.. maybe with a Rel attribute to go with it? Would anybody care?

  48. Yazmee
    Permalink to comment#

    Hmm… Consider reading a newspaper with different sections, such as sport section, entertainment section and business section. Don’t each section have a few articles in them? And sometimes, one article may have a few sections in them. Seems like a chicken-or-egg-comes-first sorta thing :P

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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