آموزش تگ header در HTML

9 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ header در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ header در HTML به صورت کامل آشنا بشید.

تگ header در HTML

تگ header یکی از مهم ترین تگ های html است که برای ایجاد بخش هدر وبسایت که به آن سربرگ هم میگویند، از این تگ استفاده میشود.

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

بنابراین میتوانیم بدین شکل نتیجه گیری کنیم که، به بالایی ترین بخش هر وبسایت یا یک صفحه هدر میگوییم.

دو مثال برای تگ header در HTML

در ادامه دوره آموزشی html css پروژه محور به چند تا از مثال های تگ هدر میپردازیم تا بهتر با این تگ آشنا شوید.

مثال اول : استفاده از تگ های header و footer در وبسایت ها

<div class="my-box">
  <section>
    <article class="my-content">
       <header class="my-header">
         <h1>آموزش HTML</h1>
      </header>
         <p>آموزش قدم به قدم زبان HTML را میتوانید در سایت وردپرس پوش.</p>
         <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p>
       <footer class="my-footer">
          <p>توسط : میلاد علیزاده در سال 1401</p>
       </footer>
    </article>
  </section>
</div>

راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

مثال دوم : در این مثال از تگ header برای ایجاد سربرگ سایت و از تگ main برای ایجاد بخشی که محتواهای سایت در ان قرار میگیرد و از تگ footer نیز برای ایجاد فوتر سایت استفاده کرده ام.

<body>

<header>
     <h2>اینجا میشه هدر</h2>
     <p>کلا بخش هدر سایتبالاترین بخش سایت است</p>
     <p>مثلا منو ها و... در این قسمت قرار میگیرند</p>
</header>

<main>
     <h2>اینجا هم میشه بخش محتوا یا مطالب سایت</h2>
</main>

<footer>
 <h2>اینجا میشه فوتر</h2>
     <p>مثلا  لینک های مهم و... در این قسمت قرار میگیرند</p>
</footer>

</body>

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

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

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

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

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

  • میتوانیم از چندین تگ header بصورت همزمان استفاده کنیم و با این حال هیچ مشکلی پیش نیاید.
  • توجه داشته باشید که نباید از تگ header داخل تگ هایی مثل footer یا تگ address استفاده کنیم
  • تگ header را نمیتوانیم داخل تگ header دیگری قرار دهیم.

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

اغلب مرورگرها تگ header را بشکل کد های CSS مانند کد های زیر نمایش میدهند.

header {
    display: block;
}
برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید