خانه آموزش HTML آموزش تگ های HTML آموزش تگ header در HTML

آموزش تگ header در HTML

توسط

۱۳۹۸-۰۱-۱۵

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

آموزش تگ header در HTML

Free-Learn

در این جلسه میخوانیم

1 تگ Header در HTML
2 مثال از تگ header در HTML
3 پشتیبانی مرورگرها
4 پشتیبانی از صفات و رویدادهای عمومی
5 نکات و توضیحات
6 دستورات CSS پیش فرض

تگ Header در HTML

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

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

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

برای مثال در سایت خودم هدرش (header) میشه تصویر زیر :

برای مشاهده در اندازه اصلی روی عکس کلیک کنید

Free-Learn

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

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : استفاده از تگ header در تگ body – برای ساخت هدر سایت

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

<body>

<header>
<h2>اینجا میشه هدر سایتم</h2>
</header>

<main>
<h2>اینجا هم محتوای سایتمو قرار میدم</h2>
</main>

<footer>
<h2>اینجا میشه فوتر سایتم</h2>
</footer>

</body>

<body>

<h2>اینجا میشه هدر سایتم</h2>

</header>

<main>

<h2>اینجا هم محتوای سایتمو قرار میدم</h2>

</main>

<h2>اینجا میشه فوتر سایتم</h2>

</footer>

</body>

امتحان کنید

مثال شماره ۲ : استفاده از تگ header در تگ article – برای ایجاد هدر پست های سایت

<body dir="rtl">

<article>
  <header>
    <h2>آموزش زبان html</h2>
    <p>این مطلب توسط صادق در 12 فروردین 98 ارسال شده است</p>
  </header>
  <p>زبان html یک زبان مادر برای طراحی صفحات وب می باشد. آموزش این زبان را میتونی در سایت من بصورت رایگان ببینید.</p>
  <p>زبان html یک زبان مادر برای طراحی صفحات وب می باشد. آموزش این زبان را میتونی در سایت من بصورت رایگان ببینید.</p>
</article>

</body>

<h2>آموزش زبان html</h2>

<p>این مطلب توسط صادق در 12 فروردین 98 ارسال شده است</p>

</header>

<p>زبان html یک زبان مادر برای طراحی صفحات وب می باشد. آموزش این زبان را میتونی در سایت من بصورت رایگان ببینید.</p>

</article>

</body>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ header در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۶٫۰	۴٫۰	۱۱٫۱	۵٫۰	۹٫۰

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

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

Free-Learn

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

تگ header یک تگ جدید/اضافه شده در HTML5 می باشد.

از چندین تگ header بصورت همزمان میتوان در یک صفحه استفاده کرد و هیچ مشکلی ندارد.

از تگ header نباید درون تگ footer و تگ address استفاده نمود و همچنین تگ header را نمیتوان درون تگ header دیگری قرار داد.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ header را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

header {
  display: block;
}

header {

display: block;

}