خانه » تگ header در html

تگ header در html

در این مقاله از سری مقالات HTML به آموزش کار با تگ header در HTML خواهیم پرداخت. هر آنچه که باید در مورد تگ هدر در اچ تی ام ال بدانید را در این مقاله فرا خواهید گرفت. در ادامه با مقاله تگ هدر چیست با ما همراه باشید و سوالات خود را در انتهای […]

تعداد نظرات: 0
دسته بندی ها: HTML
زمان مطالعه: 8 دقیقه

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

در این مقاله از سری مقالات HTML به آموزش کار با تگ header در HTML خواهیم پرداخت. هر آنچه که باید در مورد تگ هدر در اچ تی ام ال بدانید را در این مقاله فرا خواهید گرفت. در ادامه با مقاله تگ هدر چیست با ما همراه باشید و سوالات خود را در انتهای همین مقاله مطرح کنید تا در سریع ترین زمان ممکن پاسخگوی شما باشیم.

پیشنهاد می کنیم قبل از شروع این مقاله، حتما مقاله آموزشی html چیست را مطالعه کنید.

آنچه در این پست می خوانید :

تگ هدر چیست
آموزش کار با تگ header در HTML
کاربرد تگ header چیست ؟
کدام مرورگر ها از تگ header پشتیبانی می کنند ؟
جدول صفات تگ head در HTML
دستور پیش فرض CSS تگ هدر

تگ هدر چیست

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

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

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

<div id="header">
    <div class="logo"><a href="#"><img src="" alt="logo"></a></div>
    <nav>
        <ul>
            <li><a href="">item1</a></li>
            <li><a href="">item2</a></li>
            <li><a href="">item3</a></li>
            <li><a href="">item4</a></li>
        </ul>
    </nav>
</div>

توجه داشته باشید با تغییر در پروتکل 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 در کنار تگ آرتیکل:

<!DOCTYPE html>
<html>
<body dir="rtl">
<article>
  <header>
    <h2>آموزش زبان html</h2>
    <p>این مطلب توسط رضا قمری در ۱۶ اردیبهشت ۱۴۰۰ ارسال شده است</p>
  </header>
  <p>زبان html یک زبان مادر برای طراحی صفحات وب می باشد. آموزش این زبان را میتونی در سایت آموزشگاه آریا تهران بصورت رایگان ببینید.</p>
  <p>زبان html یک زبان مادر برای طراحی صفحات وب می باشد. آموزش این زبان را میتونی در سایت آموزشگاه آریا تهران بصورت رایگان ببینید.</p>
</article>
</body>
</html>

کاربرد تگ 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
پشتیبانی	۶٫۰ به بالا	۴٫۰ به بالا	۱۱٫۱ به بالا	۵٫۰ به بالا	۹٫۰ به بالا

اگر هنوز html , css را به طور کامل بلد نیستید و میخواهید یک وبمستر حرفه ای بشید و به راحتی تمام امور یک سایت را مدیریت کنید میتوانید در دوره آموزش وبمستر آریا تهران شرکت کنید. در این دوره html , css , javascript و سئو و نحوه کار با ابزار های تخصصی سئو مانند سرچ کنسول و گوگل آنالیتیکس به شما آموزش داده میشود و تمام این آموزش ها متناسب با نیاز بازار کار میباشد.

شما در انتهای این دره میتوانید با مهارت های کسب شده خود به راحتی جذب بازار کار شده و به عنوان یک وبمستر کسب درآمد چندین برابری داشته باشید. استخدام شدن شما با مهارت های کسب شده این دوره جامع قطعی میباشد.

جدول صفات تگ head در HTML

تگ هدر از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. همچنین تگ header هیچ خاصیت ویژه ای در سند HTML ندارد.

دستور پیش فرض CSS تگ هدر

معمولا مرورگرها تگ header را بصورت پیش فرض یک تگ بلاکی در نظر گرفته و با دستورات CSS پیش فرض زیر نمایش می دهند. اگر در مورد مفهوم display: block اطلاعی ندارید حتما مقاله ویژگی display در css و مقاله تگ های بلاکی را مطالعه کنید.