تگ‌های معنایی: header، nav، footer

تگ‌های معنایی: header، nav، footer – ستون‌های اصلی صفحه! 🏛️

سلام به دوستای عزیز و کنجکاو! توی فصل قبل در مورد ساختاردهی معنایی صحبت کردیم و گفتیم که چقدر مهمه که به مرورگر و موتورهای جستجو بفهمونیم هر قسمت از صفحه ما چه نقشی داره. امروز می‌خوایم روی سه تا از مهم‌ترین تگ‌های معنایی HTML5 تمرکز کنیم که تقریباً توی هر صفحه‌ای پیداشون می‌شه: <header>، <nav>، و <footer>.

این تگ‌ها به صفحه شما ساختار می‌دن و کمک می‌کنن تا بخش‌های مختلف مثل سربرگ، منوی ناوبری و پاورقی به درستی شناسایی بشن.

۱. تگ <header>: معرفی صفحه یا بخش 🚩

تگ <header> معمولاً برای معرفی و قرار دادن محتوای مقدماتی یا هدایت‌کننده در ابتدای یک صفحه وب یا یک بخش خاص استفاده می‌شه. فکر کنید به چیزهایی که معمولاً بالای هر صفحه می‌بینید:

لوگوی سایت
عنوان اصلی سایت یا صفحه
منوی ناوبری اصلی (گاهی اوقات در header قرار می‌گیره)
شعار یا تگ‌لاین سایت
اطلاعاتی در مورد نویسنده (در ابتدای یک مقاله)

نکته مهم: شما می‌تونید بیش از یک <header> در صفحه داشته باشید، اما هر <header> باید به یک بخش خاص (مثل کل صفحه، یا یک مقاله) تعلق داشته باشه. معمولاً یک <header> برای کل صفحه در بالاترین قسمت و شاید <header> های کوچکتر برای هر مقاله یا بخش.


<header>
  <h1>وبسایت آموزشی من</h1>
  <img src="logo.png" alt="لوگوی سایت">
  <p>یادگیری HTML و CSS به زبان ساده!</p>
</header>

۲. تگ <nav>: نقشه راه وبگردی! 🧭

تگ <nav> (مخفف Navigation) به طور خاص برای بلوک‌هایی از لینک‌های ناوبری طراحی شده. یعنی جایی که کاربرها می‌تونن بین صفحات یا بخش‌های مختلف سایت شما حرکت کنن.

موارد استفاده رایج:

منوی اصلی سایت (معمولاً در header یا کنار اون)
منوی فوتر (لینک‌های مهم در انتهای صفحه)
لینک‌های “قبلی” و “بعدی” در یک سری مطالب
فهرست مطالب در ابتدای یک صفحه طولانی

نکته: لازم نیست هر لیستی از لینک‌ها رو داخل <nav> قرار بدید. فقط لینک‌هایی که هدف اصلی‌شون ناوبری و جابجایی بین بخش‌های مختلف هست، باید داخل <nav> باشن. مثلاً لینک‌های داخل متن یه مقاله، معمولاً داخل <nav> قرار نمی‌گیرن.


<nav>
  <h3>دسترسی سریع:</h3>
  <ul>
    <li><a href="/">صفحه اصلی</a></li>
    <li><a href="/about.html">درباره ما</a></li>
    <li><a href="/contact.html">تماس با ما</a></li>
    <li><a href="/blog.html">وبلاگ</a></li>
  </ul>
</nav>

۳. تگ <footer>: پایان‌بندی صفحه یا بخش 📄

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

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

نکته: مثل <header>، می‌تونید چندین <footer> در صفحه داشته باشید، اما هر کدوم باید به بخش خودش مربوط باشه. معمولاً یک <footer> برای کل صفحه وجود داره.


<footer>
  <p>© 1403 - تمام حقوق برای وبسایت آموزشی من محفوظ است.</p>
  <p>
    <a href="/privacy.html">قوانین و حریم خصوصی</a> |
    <a href="/terms.html">شرایط استفاده</a>
  </p>
</footer>

این سه تگ (header, nav, footer) با هم یه ساختار سه‌بعدی و منطقی به صفحه شما می‌دن: مقدمه و ناوبری در بالا (header و nav)، محتوای اصلی در وسط (که بعداً با تگ‌های article, section و main آشنا می‌شیم)، و اطلاعات پایانی در پایین (footer).

با استفاده درست از این تگ‌های معنایی، صفحات وب شما نه تنها برای موتورهای جستجو قابل فهم‌تر می‌شن، بلکه برای کاربرها هم ساختار واضح‌تری پیدا می‌کنن و تجربه کاربری بهتری رو براشون فراهم می‌کنن. پس حتماً ازشون استفاده کنید! 😉