<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML full sample</title>
</head>
<body>
<header>
<h1>page's header</h1>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">page</a></li>
<li><a href="#">this is nav tag</a></li>
</ul>
</nav>
</header>
<article>
<header>
<hgroup>
<h2>article heading tag #1</h2>
<h3>sub heading</h3>
</hgroup>
<p><time datetime="2011-06-06">2011 June 06</time></p>
</header>
<p>this is a content in article tag.</p>
<p><mark>Mark tag.</mark> can use in p, h1-6, span too. <br />
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
When used in a quotation or other block of text referred to from the prose,
it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written,
but which is now under previously unexpected scrutiny.
When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.
</p>
<p>Your score is: <meter min="0" max="10" value="2">2 out of 10</meter>. (meter tag)</p>
<p>tag <wbr> defines where in a word it would be ok to add a line-break.<br />
sample:<br />
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
(wbr at the Http)
</p>
<figure>
<img src="kookaburra.jpg" alt="Kooaburra">
<img src="pelican.jpg" alt="Pelican stood on the beach">
<img src="lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things).</figcaption>
</figure>
<figure>
<blockquote><p><code><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small></code></p></blockquote>
<figcaption>figure tag for code</figcaption>
</figure>
<section>
<h2>section1 in article tag</h2>
<p>this is section tag in article tag.</p>
<p>section is a blob of content that you could store as an individual record in a database.
It generally looks like this (and note that the heading goes inside the section element, not immediately before it)
</p>
<footer>footer tag can be in section tag.</footer>
</section>
<section>
<h2>section2 in article tag</h2>
<p>this is section tag in article tag.</p>
<details>
<summary>summary tag is header of details tag</summary>
<p>inside details tag.</p>
</details>
</section>
<aside>
<h1>aside in article tag</h1>
<p>Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to the article itself.</p>
</aside>
<footer>This footer tag is in article tag.</footer>
</article>
<article>
<header>
<h1>article tag #2</h1>
<p>it is possible to contain 2 article tags in 1 html page.</p>
</header>
</article>
<aside>
<h1>page's aside tag</h1>
<p>
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element,
and which could be considered separate from that content.
Such sections are often represented as sidebars in printed typography.
</p>
</aside>
<aside>
<nav>
<h1>Blog roll</h1>
<ul>
<li><a href="#">this aside</a></li>
<li><a href="#">contain</a></li>
<li><a href="#">nav tag</a></li>
<li><a href="#">and links</a></li>
</ul>
</nav>
</aside>
<footer>
<p>page's footer tag. (site wide footer)</p>
<nav>
<ul>
<li><a href="#">this is</a></li>
<li><a href="#">page footer tag</a></li>
</ul>
</nav>
<section>
<h1>section tag in footer tag</h1>
<p>This fragment shows the bottom of a page on a site with a "fat footer"</p>
</section>
</footer>
</body>
</html>
แสดงตัวอย่างแทก html5 ทั่วๆไปที่พร้อมจะปรับเปลี่ยนแล้ว แต่ยังไม่รวมถึงพวกแทก canvas, multimedia ต่างๆ
สรุปอย่างสั้นๆก็คือ พวกแทก header, article, aside, footer แตกต่างจากภาพต่างๆที่เราเคยเห็นมาก่อน แทบจะโดยสิ้นเชิง
คือมันไม่ได้เป็นตัวกำหนดของ layout เลยว่า aside คือเมนูด้านข้างหรือ sidebar, article คือส่วนของเนื้อหา, footer คือส่วนล่างของหน้า
มันไม่ใช่เลยครับ มันต่างออกไปอย่างมาก การกำหนด layout แน่นอนเราอาจะใช้ element หรือแทกเหล่านี้ก็ได้ หรือใช้ div เหมือนเดิมก็ได้
แต่แทกเหล่านี้มีไว้เพื่อเจาะจงความหมายเท่านั้นเอง (และแน่นอน สามารถใช้ css แต่งเป็น layout+design ได้ด้วย)
ดังนั้นการใช้แทกอะไรในอะไรได้หรือไม่นั้น ขอให้ดูจากตัวอย่างข้างบน เพราะทำถูกต้องตามหลักการของมันแล้ว (ยืนยันเมื่อ 22/7/2554) และ validate ผ่านหมดแล้ว ยกเว้นแทก details
read more... 
+++ สำหรับคนที่กำลังคิดจะเปลี่ยนเว็บไปเป็น html5 เหมือนกับผมนะครับ
พัฒนาเว็บไซต์
