تگ header در html5 چیست و چه کاربردی دارد؟

ساعت : ۱۵:۵۲

تاریخ : ۹ بهمن ۱۳۹۷

تگ header چیست؟

زمانی که html5 عرضه شد، تگ های جدید زیادی به اون اضافه شد که تو نسخه های قبل نبودند و برخی تگ های موجود تو نسخه های قبلی html حذف شدند. تگ header یکی از اون تگ هاییه که در html5 اضافه شد و طراحان و توسعه دهندگان وب هم از اون استقبال خوبی داشتند. تو این مقاله از سری مقاله های آموزش css به معرفی تگ header و باید و نباید های استفاده از این تگ می پردازیم. همچنین به شما می گیم که چه تگ هایی می تونن در داخل این تگ قرار بگیرند و چه تگ هایی نمیتونن داخل این تگ قرار بگیرند.

تگ header چیست

همون طور که گفتیم تگ هدر جزو تگ هایی هست که در نسخه پنجم html اضافه شد و در نسخه ۴ وجود نداشت. هدف از به وجود اومدن این تگ این بود که صفحات وب رو از لحاظ معنایی بهبود ببخشد. تگ header هیچ تغییری در ظاهر وب سایت شما به وجود نمیاره و فقط بار معانی صفحات رو افزایش میده. ولی خب این به چه دردی میخوره؟ کاربرد تگ های معنایی اینه که ربات ها می تونن بخش های مختلف صفحات وب رو از همدیگه تشخیص بدن. یعنی بدونند که کدوم قسمت از سایت برای هدر، کدوم قسمت برای فوتر و کدوم قسمت برای محتوای ما هستش. برای درک بهتر موضوع به این مثال توجه کنید.


<div id='header'></header>

تو نسخه های قبلی طراحان وب برای بخش بندی قسمت هدر سایت، از یک تگ دیو به همراه آیدی استفاده می کردن ولی ربات ها توانایی تشخیص آیدی رو نداشتند. به همین دلیل این تگ header اضافه شد و به صورت زیر مورد استفاده قرار میگیره :


<header></header>

تگ header چیست

چه چیزهایی داخل تگ header قرار می گیرند؟

از اونجایی که تگ هدر برای مشخص کردن قسمت هدر سایت استفاده میشه، میتونه تمام تگ های مربوط به قسمت هدر سایت رو داخل خودش قرار بده. برای مثال تگ های nav،لوگوها و فرم ها، تگ های h1-h6 و تگ hgroup میتونند داخل تگ هدر قرار بگیرند.

البته تگ هدر فقط برای قسمت هدر اصلی سایت نیست و میتونه برای هدر بخش های مختلف سایت استفاده بشه. به بیان ساده تر بک در داخل هر تگ section میتونیم تگ هدر رو داشته باشیم ولی تگ های section نمیتونن داخل تگ هدر قرار بگیرند. مثال مقابل یک استفاده درست از تگ هدر رو به ما نشون میده:


<header>
   <nav>  بخش ناوبری سایت</nav>
</header>

<section>
   <header>
      <h2>بخش اخبار سایت </h2>
   </header>
</section>

تگ header

آیا استفاده از تگ header ضروری است؟

رای توسعه دهندگان وب هیچ اجباری وجود نداره که از تگ هدر استفاده کنند و مرورگرها هم هیچ ناسازگاری با این موضوع ندارند. به زبان ساده تر شما می تونید از این تگ استفاده نکنید. این تگ فقط بار معنایی سایت شما رو بیشتر می کنه و به ربات ها تو بهتر ترجمه کردن قسمت های مختلف سایت کمک می کنه.

با اینکه می تونید از این تگ استفاده نکنید ولی خب ما توصیه می کنیم از این تگ و سایر تگ هایی که بار معنایی صفحات سایتتون رو افزایش میدن استفاده کنید. در گذشته اگر می خواستید از این تگ استفاده کنید، باید از یک قطعه کد برای block کردن دیسپلی این تگ استفاده می کردید، چون اکثر مرورگرها برای پشتیبانی از این تگ به اون نیاز داشتند ولی امروزه این مشکل توسط مرورگرها رفع شده و این دستور به صورت درونی توسط مرورگرها پشتیبانی میشه.

در صورتی که به آموزش css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • تگ header در html5 چیست و چه کاربردی دارد؟
    نام نویسنده : امیرمسعود طالاری
  • تگ header در html5 چیست و چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده
  • تگ header در html5 چیست و چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده
  • تگ header در html5 چیست و چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *