<!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>HTML5 Page Structure
Chris Coyier
on
And where is charset ?
It is there but as a meta tag… Simplified.
This is the wrong use of the section tag
Whats wrong with section tag?
The section attribute is not meant to include articles, more the other way around. See this example:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
Well the use of
<article>inside section is the right use… even in the link provided by Dave the example shows it that way… and than, what is ment to be and isn’t…If you so please you can have
<section>with<article>that contain their own sub<section>and the web site will still work propperly… just means that you structure your code differently…some thing is wrong section tag
To append to ulli’s comment: A “section” of content containing articles, and a “section” of content within an article containing either the body of the article, or anything else appended to it. In the case of the mozilla example, the section within the article contains reviews of the article, or reviews of the particular subject in question.
That there in your answer is what’s wrong: mozilla as your source of information. Generally, the section element is okay as posted in this entry.
@CHarlie: And what’s wrong with Mozilla as a source?
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
How can we create html 5 page for Android is there ay specific tag.
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 explanation; I never would have considered that. Very helpful.
Not Quite! You can put it at the top of the page. Check out the The MDN Specs.
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: [email protected]
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
It renders HTML5 element dynamically in the DOM and rules out the cross-browsr compatibility issues in IE6-8.
After downloading the html5shiv.js into the native js folder inside HTML, please use this into your head tag;
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 ?
yup
you can use it for defining the header stuffs of an article like title , description , etc !
eg:
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~
Hmmm… , … it’s not so clear, is it? Consider: http://www.turtleblog.co.uk/2011/04/whats-new-to-html5/
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
Warren: Article should be located inside a Sections not vice versa
WRONG TUTORIAL!!!!
visit:
http://dev.w3.org/html5/spec/Overview.html#the-section-element
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.
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
All major sections wrap in semantics tags and others leave as div’s or whatever you used. For screenreaders you can use alt inside tag to describe that div!
I just finished re-designing my theme. Thank you very much for your helpful post. HTML5 rocks :p
every body give only the html5 tag but no body give how to write css for each like footer, aside, nav, section, article, etc.
I want to Know how to write css properly for html5
can you please send me a layout with example
or a refrence site
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 …:)
Mohinder the CSS is no different to what you would have used with divs previously.
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!
Very clear information, Thanks for this information, but I have one confusion that, can we use section under article tag?
yes, but article comes under section is good to identify which section contains what articles and also that is Standard to use in websites..
Yes we can use article tag.
Is correct somethink like this??
<section>
<header>//h2</header>
<article>
<header>//h3</header>
</article>
<article>
<header>//h3</header>
</article>
</section>
yeah no problem with this ……absolutely right
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.
Thank you for this! It’s just what I needed!
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>
?
You have used h2 inside the main, sections, article
Great! With your help I just made a redesign to HTML5 and Jquery for our website. Thanks!
You have used h2 inside sections but I believe it should be h1 tag
This seems inconsistent with what html5doctor says. The article tag should be used where the section tag is used and vice versa.
…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.
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/footerWe are in 2013 … we can now use the <main> tag.
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+?
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.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.
Thanks! HTML5 change the web world…
Please consider these mistakes:
http://html5doctor.com/avoiding-common-html5-mistakes/
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
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
https://css-tricks.com/perfect-full-page-background-image/ …my fav in this respect…
Where is the H1? Can we place multiple H1 tags within each section or articles or headers? Isn’t it good for SEO?
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
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.
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?
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
Shouldn’t it be like this: http://codepen.io/anon/pen/myzZMb.html
From what I read in an article, it actually doesn’t matter if use sections with articles or articles with sections. I don’t know if that would be ok, but I would think section tags would be preferred to use for generic content, whereas articles are for blog type posts or things of the like.
Well,do we get an answer about “section” and “article ” above?
I think the purpose of the Article tag is mainly for bloggy goodness. If your making a non-news/info page, having the Article tag is kinda misleading, though I suppose it might make a nice Paragraph wrapper. In the end though, it’s all symantics. You can do an entire page in nothing but Divs.
Everyone is so focused on the “section” tag and where it’s positioned that no one has asked about another tag that’s new in HTML5 the “main” tag. While the content might be an “article” or a “section” it is also the “main” content of the page so shouldn’t that tag be used?
How is this any different than standard HTML?
Which are HTML5 specific elements!?
Dear All,
In HTML 5, the Specific flow or structural skeleton is well described above.
It basically has 7 core elements, unlike in html4 and earlier versions, we were depending on div tags towards these roles by using CSS to display in the required / necessary format.
In HTML 5
that basic purpose of div and controlling them with CSS is appended (Note: Just a standard addon not removed.), and thoroughly new ammendments were made with these core tags serving the purpose much more efficiently, they are as follows.
1) Header :
2) Nav :
3) Main:
4) Section:
5) Article:
6) Aside:
7) Footer:
Now professionally, you can use all of these or some of these as suggested by Chris or adopting a liberal approach where you can make a combination of both the above tags and div or else just go with the traditional usage of div and css.
The differnce and details about them is explained with simple example in the below comment.
Now, Just as I stated above,
in a traditional approach
<
div id=”footer”>
where all the id values are precisely defined in CSS, and only act accordingly, here the purpose and role depends on the definition we make in CSS.
In Standard HTML 5
</header
<
section>
(optional * not a cumpolsary tag to be used but definitely a good addon)
Here the CSS still plays a vital role, but only for visual styling rather than role assignment to the tags on the primary level.
Now the
<
header> tag is used to display the top section of the page where the logo, search bar, login, subscription, etc., other significant elements are placed.
Note: it is also placed inside the content for titles or just as highlighter etc.,
<
nav> tag, as usual meant to be used for our menu of the site.
Note: it can also be placed any where, need not be right after the header (depends on type of menu -vertical/horizontal/large/ multi purpose etc.,), or else can be used even for inner menus placed in sidebar (either horizontally or vertically.)
<
section> tag is a tag which holds, some content be it a menu on as sidebar or a place of new postings display, or image gallery etc.,
Note: it can be placed anywhere on the site, the core purpose is to hold some content.
<
article> tag is a tag which also hold the data, but only on a specific context, rather than multiple contexts
eg: assume if you are speaking about on “Prime minister” you can hold as many details only regarding that speicified subject, you can not suddenly say about “President” in the same context.
but if you are speaking about politics you can inlude both Prime minister and President, they both become part of the context.
Let me detail you with a swift example
POLITICS
Prime MInister
Name: John
Age: 45
Party: XYZ party
XYZ party is a national party established in1990
Biography
President
Name: John
Age: 45
Party: ABC Party
ABC party is a regional party established in 2001
Biography
</section
Now here Politics is treated as a section, and the articles included are Prime minister and President.
We can make use of this section again but then only the details of the prime minister
for eg:-
Name:,
Age:
Area of Contest:
Party he/she belongs to:
How many times he won:
Details / Biography:
etc., would be treated as sections with in the article.
Similarly for the other as well.
Meanwhile, there is an interesting element/tag
to be spoken. This also serves definite purposes, but sould allways be realted to the context though not actually part of it as you see in the above example it speaks about some specific part related to the context but not part of it.
tag is the content holder where the main portion of the site resides which may include any from slider to, menu, forms, details of the site etc.,
Last comes the
<
footer> tag
as its purpose and role need not be explained, presuming you all know what is it meant for.
I believe, the explanation is a bit lengthy, but definite to the point and understandable.
for any queries, you can comment back or reach me on my mail [email protected]
I really appreciate “Chris” for this splendid and beautiful portal with such massive bundle of knowledge.
From mozilla:
<section>can contain<article>and<article>can contain<section>.What is the difference between article and section?
• both can:
o be nested in each other
o take a different notion in a different context or nesting level
• sections are like book chapters
o they usually have siblings (maybe in a different document?)
o together they have something in common, like chapters in a book
• one author, one article, at least on the lowest level
o standard example: a single blog comment
o a blog entry itself is also a good example
o a blog entry article and its comment articles could also be wrapped with an article
o it’s some “complete” thing, not a part in a series of similar
• sections in an article are like chapters in a book
• articles in a section are like poems in a volume (within a series)
When in doubt, refer to the spec:
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element
https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element
Note that the examples in the spec show section and article both nested within each other; there is no simple rule stating one should only/always be nested within another.
Maybe need adding the main content role, or main tag.
article should incluse sections. not other way around.
It’s totally acceptable to include articles inside of a section. The spec currently states:
And, as far as articles go, they can and self-contained elements within a page:
Taken together, the section can be a group of thematically-related articles that are self-contained elements. The only thing that might be updated here is including a title inside of the section.