همانطور که مشاهده می کنید کلیه قسمت ها با عنصر div پیاده سازی شده اند و برای متمایز کردن آن ها از یکدیگر خصوصیت id و class آن ها مقدار دهی شده است. اما با این حال div عنصری نیست که بتوان به وسیله ی آن ساختار و بخش های صفحه را از نظر نوع با یکدیگر متمایز کرد و فرضا برای یک موتور جستجو تمامی این بخش ها مفهموم یکسانی دارند. اما در html 5 تگ های جدیدی به منظور مفهومی کردن ساختار قست های مختلف در نظر گرفته شده است.
همونطور که در تصویر بالا مشاهده می کنید تگ های جدیدی جایگزین هر یک از نام های id و class قبلی در تگ های div شده است که هر کدام مفهمو و کاربرد هر تگ را مشخص می کنند. کد html صفحه ی بالا می تواند چیزی شبیه به کد زیر باشد:
<body>
...</header>
...</nav>
...
</section>
</article>
...</aside>
...</footer>
</body>
* تگ header:
تگ header تگی است برای نمایش دادن هدرِ یک section یا قسمت می باشد، البته کمی متفاوت تر از سابق. در html 4 تگ های هدر شامل تگ های h1 تا h6 می شدند که معمولا متن مورد نظر خود را به عنوان هدر در آن قرار می دادیم. اما تگ header جدید می تواند شامل تگ های داخلی نیز باشد. در واقع توسط این تگ ما بخشی از یک section را به عنوان هدر معرفی می کنیم و که متن هدر می تواند تنها قسمتی از آن باشد. همانند زیر:
<h1>A Preview of HTML 5</h1>
<p class="byline">By Iran Pc Network</p>
</header>
<h1>irpcn</h1>
<h2>Insert tag line here.</h2>
</header>
همانطور که می بینید داخل تگ header، اول از تگ h1 برای معرفی عنوان هدر(heading) استفاده شده است اما تگ p نیز در بخش header ما قرار دارد. در تگ دوم نیز از دو سطح heading (h1 و h2) برای معرفی هدر استفاده شده است.
* تگ section:
<h1>HTML 5 - irpcn</h1>
<p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG.
...</p>
</section>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
* تگ article:
تگ article نمایش دهنده ی یک قسمت مستقل در یک صفحه ی html می باشد. به طور مثال فرض کنید می خواهیم قسمتی برای کامنت یک سایت در نظر بگیریم، واضح است هر کامنت مستقل از کامنت دیگری می باشد و عملا ربطی به هم ندارند، در چنین حالتی باید از تگ article برای نمایش یک کامنت استفاده کرد. مثلا:
id ="comment-2">
<h4>Comment #2 by <a href="http://irpcn.com/">Emad</a></h4>
</header>
<p>test comment!</p>
</article>
همچنین می توان از این تگ برای متمایز ساختن پست های بلاگ، مقالات، پست های انجمن ها و ... استفاده کرد.
* تگ aside:
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
این قسمت بخشی از یک صفحه است که آرشیو ماهیانه مطالب سایت را نمایش می دهد و در sidebar صفحه قرار گرفته است. از موارد دیگر کاربرد این تگ می توان نمایش چندین تگ nav، نمایش آگهی ها و ... که جدای از مطالب اصلی سایت هستند نام برد.
* تگ های audio و video:
پشتیانی از مدیا به صورت native توسط خود html امکانات و کنترل های بهتری را برای توسعه دهندگان فراهم می کند. نمونه ای از آن، کنترل playback توسط API های DOM می باشد که کمی جلوتر نمونه ای از آن را خواهید دید.
مرورگر های opera، chrome و فایرفاکس از فرمت ogg برای پخش پشتیبانی می کنند و safari نیز فرمت های تحت پشتیانی Quick Time را پشتیانی خواهد کرد. در ساده ترین حالت با قرار دادن یک تگ video به صورت زیر می توانید فایل صوتی یا ویدئویی خود را در صفحه قرار دهید:
="video.ogg" width="300px" height="200px" id="myVideo"> decoder not found</video>
