در این مقاله از سری مقالات HTML به آموزش کار با تگ header در HTML خواهیم پرداخت. هر آنچه در مورد تگ هدر در اچ تی ام ال بدانید را در این مقاله فرا خواهید گرفت. در ادامه با مقاله تگ هدر چیست با ما همراه باشید و سوالات خود را در انتهای همین مقاله مطرح کنید تا در سریع ترین زمان ممکن پاسخگوی شما باشیم.
پیشنهاد می کنیم قبل از شروع این مقاله، حتما مقاله آموزشی html چیست را مطالعه کنید.
تگ هدر چیست
در واقع تگ header یک تگ جدید اضافه شده در HTML5 است. تگی که با استفاده از آن می توان یک هدر برای یک عنصر یا مثلا برای یک صفحه ی وب سایت ایجاد کرد. هدر چیه؟
به بالاترین قسمت اکثر وب سایت های نرمال که معمولا منو سایت، لوگو و اطلاعات تماس در آن قرار دارد هدر گفته می شود. برای مثال، تصویر زیر هدر وب سایت آموزشگاه طراحی سایت آریا تهران است.
خوب است بدانید در HTML4 و نسخه های قبل از آن برای تعریف سربرگ اصلی یا همان هدر سایت که در همه صفحات سایت می بایست نمایش داده شود، از یک تگ div که در داخل آن یک id که معمولا برابر با header بود استفاده می شد. البته هنوز هم برخی طراحان از تگ div برای ساخت هدر سایت استفاده می کنند و تمام عناصر مورد نیاز هدر هم درون همان تگ با id هدر قرار می گیرد. به شکل زیر
توجه داشته باشید با تغییر در پروتکل doctype html در ورژن های جدید html خوب است بجای تگ div حتما از تگ header استفاده کنید تا موتور های جستجو و مرورگرها به بهترین شکل قسمت های مختلف وب سایت شما را تشخیص داده و این کار در سئو شما تاثیر گذار باشد.
اما این همه ی ماجرا نیست. شما علاوه بر ساخت سربرگ اصلی سایت، برای تگ هایی مثل article هم می تونید از تگ هدر استفاده کنید.
اگر به یادگیری و ساخت هدر و یک منوی ریسپانسوی به کمک html و css علاقمند هستید حتما از فیلم رایگان آموزش html css پروژه محور رایگان استفاده کنید.
آموزش کار با تگ header در HTML
برای کار با تگ هدر در html5 باید بدانید که بصورت همزمان می توان در یک صفحه از چندین تگ header استفاده کرد و هیچ مشکلی به وجود نخواهد آمد.
به عبارتی شما علاوه بر هدر اصلی وب سایت می توانید برای بخش های مختلف سایت خود اعم از مقالات ( articles )، سایدبار ( aside )، سکشن های متنوع و… هم از تگ header یا تگ سربرگ استفاده کنید. البته این قضیه برای تگ footer هم صادق است.
اما از تگ header نباید داخل تگ footer و تگ address استفاده کرد. همچنین از تگ header درون تگ header دیگر استفاده نکنید.
برای آشنایی بیشتر با تگ ها، حتما مقاله تگ های html را مطالعه کنید، تا با تمام تگ های کاربردی اچ تی ام ال آشنا شوید.
مثال از آموزش کار با تگ header در کنار تگ آرتیکل:
کاربرد تگ header چیست ؟
همانطور که گفته شد، از تگ هدر برای ساخت سربرگ یا همان هدر یک صفحه یا یک عنصر مثل article و… استفاده می شود. تگ header اغلب بعد از تگ head و داخل تگ body در ابتدا قرار می گیرد. البته این مورد الزامی نیست و می توان از این تگ چندین مورد در سند html در جاهای مختلف داشته باشیم.
اما به همین سادگی؟
خیر. تگ header یکی از تگ های معنادار یا Semantic است که در کنار تگ هایی مثل تگ section، تگ article، تگ footer ، تگ nav ، تگ aside ، تگ details و تگ summary جهت ایجاد ساختار و طرحبندی حرفه ای برای محتوای سایت استفاده می شود. و در کنار تگ های ذکر شده عنصرهای layout را تشیل می دهد.
بنابریان از آنجا که این تگ یک تگ معنادار است، قطعا برای رتبه بندی در موتورهای جستجو و به عبارتی سئو سایت شما اهمیت بالایی دارد.
اگر بخواهیم فنی تر بیان کنیم باید بگوییم: این تگ از لحاظ ظاهری تغییری در سایت ها به وجود نمی آورد بلکه از لحاظ معنایی و مفهومی مورد استفاده قرار می گیرید. برای آشنایی بیشتر می توانید مقاله تگ های معنا دار را مطالعه کنید.
در اصل کاربرد تگ هدر را می توان به عنوان یک ظرف یا container برای محتوای مقدماتی یا مجموعه ای از لینک های پیمایشی دانست. در این تگ می توانید از تگ های h1 تا h6 ، تگ hgroup، جدول، لوگو یا آیکون و اطلاعات مربوط به نویسنده و یا سایت استفاده کنید.
پیشنهاد ویژه: برای شروع طراحی سایت بصورت حرفه ای صفر تا صد حتما از فیلم آموزش طراحی سایت آموزشگاه آریا تهران استفاده کنید.
کدام مرورگر ها از تگ header پشتیبانی می کنند ؟
تگ هدر در همه مرورگرهای معتبر اینترنتی از جمله اینترنت اکسپلورر، فایرفاکس، اپرا، گوگل کروم و سافاری پشتیبانی می شود. در جدول زیر اولین نسخه ی مرورگرهای اینترنتی که به طور کامل از تگ header در HTML پشتیبانی کردند را مشاهده می کنید
| نام مررورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۶٫۰ به بالا | ۴٫۰ به بالا | ۱۱٫۱ به بالا | ۵٫۰ به بالا | ۹٫۰ به بالا |
جدول صفات تگ head در HTML
تگ هدر از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. همچنین تگ header هیچ خاصیت ویژه ای در سند HTML ندارد.
دستور پیش فرض CSS تگ هدر
معمولا مرورگرها تگ header را بصورت پیش فرض یک تگ بلاکی در نظر گرفته و با دستورات CSS پیش فرض زیر نمایش می دهند. اگر در مورد مفهوم display: block اطلاعی ندارید حتما مقاله ویژگی display در css و مقاله تگ های بلاکی را مطالعه کنید.
