عنصر <header>

در HTML4، یک هدر را به صورت زیر می‌توان تعریف کرد:

<div id="header">

اما در HTML5، از یک تگ ساده‌ی <header> (که داخل تگ <body> قرار می‌گیرد)، برای تعریف هدر صفحه استفاده می‌شود:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <header>
            <h1>Most important heading</h1>
            <h3>Less important heading</h3>
        </header>
    </body>
</html>

⚠️ توجه داشته باشید که تگ <header> کاملاً با تگ <head> متفاوت است.

عنصر <footer>

عنصر <footer> بسیار پر کاربرد است. به طور کلی بخشی که در پایین صفحه وب قرار دارد به عنوان <footer> در نظر گرفته شده و معمولاً اطلاعات زیر در آن ارائه می‌شود:

اطلاعات تماس
سیاست حفظ حریم خصوصی
آیکون‌های رسانه‌های اجتماعی
شرایط استفاده از خدمات
اطلاعات حق چاپ (کپی رایتینگ)
نقشه سایت و اسناد مرتبط

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    	<header>
            ...
        </header>
        <main>
        	...
        </main>
        <footer>
        	<ul>
        		<li><a href="#">Contact Information</a></li>
        		<li><a href="#">About Us</a></li>
        		<li><a href="#">Privacy Policy</a></li>
        	</ul>
        	<span>
        		Copyright © by ...
        	</span>
        </footer>
    </body>
</html>

عنصر <nav>

این تگ نشان دهنده بخشی از یک صفحه است که به صفحات دیگر سایت یا به بخش‌های خاصی از صفحه، لینک می‌دهد که به آن‌ها لینک‌های ناوبری (navigation) گویند.

در اینجا نمونه‌ای از بلوک اصلی لینک‌های ناوبری آورده شده است:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About us</a></li>
    </ul>
</nav>

⚠️ همه لینک‌های یک صفحه نباید داخل عنصر <nav> باشند. عنصر <nav> فقط برای بلوک‌های اصلی لینک‌های ناوبری در نظر گرفته شده است و معمولا عنصر <footer> دارای لیستی از پیوندهاست که لازم نیست در عنصر <nav> باشد.

بررسی عناصر معنایی در HTML5 - قسمت اول