سرفصل‌های آموزشی
آموزش پروژه محور HTML و HTML5
بررسی عناصر معنایی در HTML5 - قسمت اول

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

عنصر <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> باشد.

online-support-icon