آموزش HTML – تگ header

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/10 | بخش : آموزش HTML

تعریف و کاربرد تگ header در HTML

تگ header تگی است که با استفاده از آن می توان یک هدر برای یک عنصر یا مثلا برای یک سند یا صفحه ی وب ایجاد نمود.

همونطور که می دونید تمامی (اکثر) سایت های موجود در وب دارای یک هدر می باشند، که معمولا در اون هدر میان منو میزارن ، لوگوی سایتشون رو قرار میدن یا مثلا میان قسمتی برای جستجو در سایت قرار می دهند

پس بطور کلی می تونیم اینجوری بگیم که ، به بالایی ترین (یا از سمت بالا ابتدایی ترین) بخش از یک وب سایت را هدر یا header آن وب سایت میگوییم.

نکات و توضیحات

  • تگ <header> به یک بخش یا سند، یک هدر اختصاص می دهد.
  • تگ header یک تگ جدید/اضافه شده در HTML5 می باشد.
  • تگ <header> باید به عنوان یک ظرف برای محتوای مقدماتی و یا مجموعه ای از لینک های navigation استفاده شود.
  • شما می توانید در یک سند چندین عنصر <header> داشته باشید.
  • یک تگ <header> را نمی توان داخل <footer> و <address> یا عناصر <header> دیگر قرار داد.

مثال از تگ header در HTML

استفاده از تگ header در تگ body – برای ساخت هدر سایت

در مثال زیر از تگ header برای ایجاد هدر (سربرگ سایت) و از تگ main برای ایجاد بخش محتوا (بخشی که مثلا مطالب یا پست هامو بزارم توش) و از تگ footer برای ایجاد فوتر سایت استفاده کرده ام.

<body>
<header>
<h2>اینجا میشه هدر سایتم</h2>
</header>
<main>
<h2>اینجا هم محتوای سایتمو قرار میدم</h2>
</main>
<footer>
<h2>اینجا میشه فوتر سایتم</h2>
</footer>
</body>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <header>

Element
<header> ۶٫۰ ۴٫۰ ۹٫۰ ۵٫۰ ۱۱٫۱