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.
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!
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.
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?
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?
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
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
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!
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.
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>
…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.
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
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.
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 ?
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
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 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>
?
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?
We are in 2013 … we can now use the <main> tag.