PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » HTML » HTML5 Page Structure

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

    And where is charset ?

    Reply ↓
    • Richard

      It is there but as a meta tag… Simplified.

  2. Mizou

    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.

    Reply ↓
  3. Mizou

    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

    Reply ↓
  4. Edd Turtle

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

    Reply ↓
  5. Helen

    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!

    Reply ↓
  6. Chris Radford

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

    Reply ↓
  7. Ant

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

    Reply ↓
  8. Kelly Copley

    For charset the specs actually offer 3 methods..

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

    Reply ↓
  9. Eugene

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

    Reply ↓
  10. zzzzBov

    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.

    Reply ↓
  11. El garch Hicham

    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

    Reply ↓
  12. sumesh

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

    Reply ↓
  13. Jiyoon J.

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

    Reply ↓
  14. Mathew

    is it really

    ………..

    or

    …….

    because I’ve seen site using article over section.

    Reply ↓
  15. Nikolay Dyankov

    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?

    Reply ↓
  16. Pisyek

    thanks for sharing the code. :D

    Reply ↓
  17. David Chase

    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?

    Reply ↓
  18. sidd

    Header in section tag ?

    Reply ↓
  19. Clint

    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~

    Reply ↓

Speak, my friend

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 ~