<!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>
ลองดูกันครับ
ตัวอย่างนี้แสดงว่าแทก, element อะไรใช้ในอะไรได้บ้างไม่ได้บ้าง ก็ลองเช็คดูครับ อ่านเพิ่ม http://www.okvee.net/2011/07/22/ตัวอย่างเต็มๆของการใช้-h/
Load balance : Server 03
