HTML / Гарчиг ба параграф

Гарчиг ба параграф

Вэб хуудасны хамгийн үндсэн агуулга бол текст. HTML нь текстийг бүтэцтэйгээр илэрхийлэх олон tag-тай — гарчиг, параграф, мөр таслалт гэх мэт.

Гарчгийн шатлал: h1–h6

HTML-д зургаан түвшний гарчиг байна:

html
<h1>Хамгийн том гарчиг — хуудасны нэр</h1>
<h2>Хэсгийн гарчиг</h2>
<h3>Дэд хэсгийн гарчиг</h3>
<h4>Дөрөвдүгээр түвшний гарчиг</h4>
<h5>Тавдугаар түвшний гарчиг</h5>
<h6>Хамгийн жижиг гарчиг</h6>

Хөтчид h1 хамгийн том, h6 хамгийн жижиг үсгээр харагдана. Гэхдээ харагдах хэмжээгээр биш, утгын ач холбогдлоор сонгох хэрэгтэй. Хэмжээг CSS-ээр тохируулна.

Дүрмүүд:

  • Нэг хуудсанд ганцхан <h1> байна — энэ нь хуудасны үндсэн гарчиг
  • Шатлалыг алгасахгүй байх: h2-ийн дараа h4 биш h3 ирнэ
  • Гарчгийг зөвхөн том үсгээр харуулахын тулд ашиглахгүй — тэр зорилгоор CSS хэрэглэнэ

Параграф: <p>

Энгийн текст бичихэд <p> tag ашиглана:

html
<p>
  Монгол хэл бол Монгол Улсын албан ёсны хэл юм.
  Дэлхийд хоёр сая гаруй хүн ярьдаг.
</p>

<p>
  HTML-д хэдэн ч хоосон мөр орхисон хамаагүй,
  хөтөч зөвхөн нэг зайгаар харуулна.
</p>

<p> tag дотор мөр таслалт (Enter) хийсэн ч хөтөч нэг зайгаар харуулна. Хоёр <p> хооронд автоматаар зай үүснэ.

Мөр таслалт: <br>

Параграфын дотор тодорхой газар мөр таслах шаардлагатай үед — жишүүлбэл шүлэг эсвэл хаяг бичихэд:

html
<p>
  Монгол Улс<br />
  Улаанбаатар хот<br />
  Сүхбаатар дүүрэг
</p>

<br> нь self-closing tag тул хаалтын хос байхгүй. Параграф тусгаарлахад <br><br> ашиглахгүй — тэр зорилгоор шинэ <p> нээнэ.

Хэвтээ шугам: <hr>

Агуулгын хэсгүүдийг тусгаарлах хэвтээ шугам:

html
<h2>Нэгдүгээр бүлэг</h2>
<p>Бүлгийн агуулга...</p>

<!-- Агуулгын хэсэг тусгаарлана -->
<hr />

<h2>Хоёрдугаар бүлэг</h2>
<p>Бүлгийн агуулга...</p>

<hr> нь зөвхөн харагдах шугам биш — утгын хувьд "сэдвийн өөрчлөлт" гэсэн утга агуулна.

Агуулгын иерархийн жишээ

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Монгол хоол</title>
  </head>
  <body>
    <!-- Хуудасны нэр — зөвхөн нэг h1 -->
    <h1>Монгол үндэсний хоол</h1>

    <p>
      Монгол хоол мах, гурилан бүтээгдэхүүн голлодог.
      Малын аж ахуйн уламжлалтай холбоотой.
    </p>

    <!-- Хэсгийн гарчиг -->
    <h2>Махан хоол</h2>

    <p>Монголчуудын хамгийн дуртай хоолнуудын нэг.</p>

    <!-- Дэд хэсэг -->
    <h3>Бууз</h3>
    <p>Уурт жигнэсэн мах, гурилан хоол. Цагаан сард заавал идэх ёстой.</p>

    <h3>Хуушуур</h3>
    <p>Тосонд шарсан мах, гурилан хоол. Наадмаар иддэг.</p>

    <hr />

    <h2>Цагаан идээ</h2>
    <p>Сүү, тараг, ааруул зэрэг сүүн бүтээгдэхүүн.</p>
  </body>
</html>

Accessible heading structure

Screen reader ашиглагчид гарчгийн шатлалыг навигацид ашигладаг — ном дахь гарчгийн жагсаалт шиг. Тиймээс:

  • h1 → хуудасны нэр (нэг л байна)
  • h2 → үндсэн хэсгүүд
  • h3 → дэд хэсгүүд
  • Шатлал алгасахгүй байна

Google болон бусад хайлтын систем ч гарчгийн шатлалыг унших тул SEO-д нөлөөтэй.

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

<a> tag ашиглан хуудас хоорондын болон гадаад холбоос үүсгэж сурна. Relative болон absolute URL-ийн ялгаа, anchor link (#id) хэрхэн ажилладаг талаар үзнэ.

← Өмнөх хичээлХуудасны бүтэцДараах хичээл →Холбоос (a tag)