HTML / header, nav, main, footer

header, nav, main, footer

Вэб хуудасны ерөнхий бүтцийг semantic элементүүдээр зохиох нь орчин үеийн HTML-ийн суурь мэдлэг. Энэ хичээлд хуудасны гол бүтцийг бүрдүүлдэг дөрвөн элементийг үзнэ.

<header> — толгой хэсэг

<header> нь хуудас эсвэл хэсгийн танилцуулга агуулгыг бүлэглэнэ. Ихэвчлэн лого, гарчиг, навигаци агуулдаг.

html
<header>
  <a href="/">
    <img src="/logo.svg" alt="ulaanbaatar.app лого" />
  </a>
  <h1>ulaanbaatar.app</h1>
  <nav>
    <a href="/courses">Сургалт</a>
    <a href="/projects">Төсөл</a>
  </nav>
</header>

Нэг хуудсанд хэдэн <header> байж болох вэ?

Олон байж болно. <header> нь хуудасны дээд хэсгийн зориулалттай биш — <article>, <section> дотор ч байж болно:

html
<body>
  <!-- Хуудасны үндсэн header -->
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <!-- Нийтлэлийн өөрийн header -->
      <header>
        <h2>Нийтлэлийн гарчиг</h2>
        <p>Огноо: 2024-01-15 | Зохиолч: Бат</p>
      </header>
      <p>Нийтлэлийн агуулга...</p>
    </article>
  </main>
</body>

<nav> нь хуудас хоорондын навигацийн холбоосуудын бүлэг. Гол цэс, breadcrumb, хуудасны дотоод холбоосуудад ашиглана.

html
<!-- Үндсэн цэс -->
<nav aria-label="Үндсэн цэс">
  <ul>
    <li><a href="/">Нүүр</a></li>
    <li><a href="/courses">Сургалт</a></li>
    <li><a href="/projects">Төсөл</a></li>
    <li><a href="/profile">Профайл</a></li>
  </ul>
</nav>

<!-- Breadcrumb навигаци -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Нүүр</a></li>
    <li><a href="/courses">Сургалт</a></li>
    <li>HTML</li>
  </ol>
</nav>

Нэг хуудсанд олон <nav> байж болно — aria-label ашиглан ялгаж өгнө. Хөлийн жижиг холбоос бүлэг (privacy policy, terms) заавал <nav> болохгүй.

<main> — үндсэн агуулга

<main> нь хуудасны голлох, давтагдахгүй агуулгыг агуулна. Нэг хуудсанд ганц л <main> байна.

html
<body>
  <header>...</header>

  <!-- Хуудас бүрт давтагддаг зүйл биш — энэ хуудасны өөрийн агуулга -->
  <main>
    <h1>HTML сургалт</h1>
    <p>Хуудасны үндсэн агуулга энд...</p>
  </main>

  <footer>...</footer>
</body>

<main> нь <header>, <footer>, <nav>, <aside> дотор байж болохгүй — эдгээрийн ах дүү мөн байр суурьтай.

<footer> нь хуудас эсвэл хэсгийн хөл агуулгыг бүлэглэнэ. Зохиогчийн эрх, холбоо барих, туслах холбоосуудыг ихэвчлэн агуулдаг.

html
<footer>
  <p>© 2024 ulaanbaatar.app — Бүх эрх хуулиар хамгаалагдсан.</p>
  <nav aria-label="Хөлийн холбоос">
    <a href="/privacy">Нууцлалын бодлого</a>
    <a href="/terms">Үйлчилгээний нөхцөл</a>
  </nav>
</footer>

<header> шиг <footer> ч <article>, <section> дотор байж болно:

html
<article>
  <header>
    <h2>Нийтлэлийн гарчиг</h2>
  </header>
  <p>Нийтлэлийн агуулга...</p>
  <!-- Нийтлэлийн хөл -->
  <footer>
    <p>Зохиолч: Бат | <a href="#comments">12 сэтгэгдэл</a></p>
  </footer>
</article>

Хуудасны бүтэн жишээ

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ulaanbaatar.app — HTML сургалт</title>
  </head>
  <body>

    <!-- Хуудасны толгой — бүх хуудсанд давтагдана -->
    <header>
      <a href="/">
        <strong>ulaanbaatar.app</strong>
      </a>
      <nav aria-label="Үндсэн цэс">
        <a href="/courses">Сургалт</a>
        <a href="/projects">Төсөл</a>
        <a href="/profile">Профайл</a>
      </nav>
    </header>

    <!-- Энэ хуудасны өөрийн агуулга -->
    <main>
      <h1>HTML сургалт</h1>
      <p>Вэбийн бүтцийг эхнээс нь сур.</p>
    </main>

    <!-- Хуудасны хөл — бүх хуудсанд давтагдана -->
    <footer>
      <p>© 2024 ulaanbaatar.app</p>
      <nav aria-label="Хөлийн холбоос">
        <a href="/about">Бидний тухай</a>
        <a href="/contact">Холбоо барих</a>
      </nav>
    </footer>

  </body>
</html>

Элементүүдийн үүргийн хураангуй

| Элемент | Үүрэг | Тоо | |---------|-------|-----| | <header> | Толгой хэсэг | Олон байж болно | | <nav> | Навигацийн холбоос | Олон байж болно | | <main> | Үндсэн агуулга | Зөвхөн нэг | | <footer> | Хөл хэсэг | Олон байж болно |

Дараагийн хичээлд:

<article>, <section>, <aside> элементүүдийг үзнэ. Агуулгын бүтцийг зохион байгуулахад эдгээр гурвыг хэрхэн ялгаж ашиглах талаар тайлбарлана.

← Өмнөх хичээлSemantic HTML гэж юу вэ?Дараах хичээл →article, section, aside