While headings do a grand, perfectly valid, job in defining the start of a new section or sub-section in a document, there are a number of elements that can be exploited to establish a cleaner, clearer semantic structure.
Whereas div elements can be used to contain sections, used primarily as scaffolding on which to hang CSS, they don’t hold a great deal of meaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, and navigation.
Articles and Sections
An article element can be used to mark up a standalone section of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles.
A section element represents a more general section and could be used to split up an article, or to represent chapters, for example.
<article>
<section id="intro">
<p>[An introduction]</p>
</section>
<section id="main_content">
<p>[Content]</p>
</section>
<section id="related">
<ul>
<li><a href="that.html">That related article</a></li>
<li><a href="this.html">This related artivle</a></li>
</ul>
</section>
</article>
While divs could be used to make these separations (or even if you didn’t need these separations for styling), this provides a much richer, more meaningful document.
Headers and Footers
header and footer provide further specialized, self-descriptive, sections:
การสร้างเว็บเพจhtml 