Code Snippet
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>
And where is charset ?
It is there but as a meta tag… Simplified.
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.
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
if it’s of interest I wrote an article on HTML5 here: http://www.turtleblog.co.uk/2009/09/whats-new-to-html5/
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!
Isn’t there a new deffinition for the charset meta tag in the html5 spec? i.e.
*just googled it and found an answer. (yes was the short answer).
I am just thinking about nav tag, is it really necessary? I never used div#nav>ul structure, instead ul#nav.
For charset the specs actually offer 3 methods..
1. transport level content-type header.
2. new charset meta tag
3. Unicode byte order mark
Without a style it will look like ordinary text or …?
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.
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
Thanks for the post, you did a great job :D
Thanks!
I want to try out the HTML5 one day.
this is a definitely good starting point !
is it really
………..
or
…….
because I’ve seen site using article over section.
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?
thanks for sharing the code. :D
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?
Header in section tag ?