آموزش و يادگيري تگ header در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <header> آشنا مي‌شويم. اين تگ براي تعريف بخش بالايي صفحات يا بخش‌هاي معنايي سايت استفاده مي‌شود و معمولاً شامل لوگو، منو و عنوان صفحه است.

تگ header در HTML چيست؟

تگ <header> بخش بالايي صفحه يا يک بخش معنايي مانند <article> يا <section> را مشخص مي‌کند. اين تگ مي‌تواند شامل لوگو، عنوان، منوهاي ناوبري و ساير اطلاعات ابتدايي باشد.

مثال ساده از تگ header

<header>
  <h1>آموزش دون</h1>
  <nav>
    <a href="/home">خانه</a>
    <a href="/about">درباره ما</a>
    <a href="/contact">تماس با ما</a>
  </nav>
</header>

در اين مثال، بخش بالاي صفحه شامل عنوان سايت و منوي ناوبري ساخته شده است.

ويژگي‌هاي مهم تگ header

ويژگي	توضيح
class	اعمال استايل CSS به header
id	شناسه يکتا براي ارجاع يا استايل‌دهي
style	اعمال استايل مستقيم به header

مثال با استايل CSS

<style>
  header {
    background-color: #2196f3;
    color: white;
    padding: 20px;
    text-align: center;
  }
  header nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bold;
  }
  header nav a:hover {
    text-decoration: underline;
  }
</style>

<header>
  <h1>آموزش دون</h1>
  <nav>
    <a href="/home">خانه</a>
    <a href="/about">درباره ما</a>
    <a href="/contact">تماس با ما</a>
  </nav>
</header>