A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » HTML » HTML5 Page Structure Submit one!

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>

Subscribe to The Thread

  1. haRacz says:

    And where is charset ?

  2. Mizou says:

    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. Mizou says:

    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

  4. Edd Turtle says:

    if it’s of interest I wrote an article on HTML5 here: http://www.turtleblog.co.uk/2009/09/whats-new-to-html5/

  5. Helen says:

    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!

  6. 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).

  7. Ant says:

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

  8. Kelly Copley says:

    For charset the specs actually offer 3 methods..

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

  9. Eugene says:

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

  10. zzzzBov says:

    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.

  11. David Hnatko says:

    bomba je to super :DD

  12. El garch Hicham says:

    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

  13. sumesh says:

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

  14. Jiyoon J. says:

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

  15. Mathew says:

    is it really

    ………..

    or

    …….

    because I’ve seen site using article over section.

  16. 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?

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---