HTML / Хуудасны бүтэц

Хуудасны бүтэц

HTML файл бүр тодорхой бүтэцтэй байдаг. Энэ бүтцийг сайн ойлговол хөтөч таны кодыг зөв уншиж, харуулна.

Файлын хамгийн эхний мөр:

html

<!DOCTYPE html>

Энэ нь tag биш — хөтчид зориулсан мэдэгдэл юм. "Би HTML5 стандартаар бичигдсэн" гэж хэлж байна. Энэ мөргүй бол хөтөч "quirks mode" горимд орж, хуудсыг буруу харуулж болно. Үргэлж эхний мөрт бичнэ.

<html> — үндсэн элемент

html

<html lang="mn">
  ...
</html>

Бүх HTML агуулга <html> tag-ийн дотор байна. lang attribute нь хуудасны хэлийг заана:

lang="mn" — Монгол
lang="en" — Англи
lang="zh" — Хятад

Энэ attribute screen reader болон хайлтын системд чухал. Монгол хуудас бүртээ lang="mn" бичих нь зөв дадал.

<head> — далд мэдээлэл

html

<head>
  <!-- Хөтчид зориулсан тохируулга — хэрэглэгч харахгүй -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Миний хуудас</title>
</head>

<head> дотор хэрэглэгч шууд харахгүй боловч маш чухал мэдээлэл байна:

charset="UTF-8" — Кирилл, хятад, арабаас эхлээд emoji хүртэл бүх тэмдэгтийг зөв харуулдаг encoding. Энэ мөргүй Монгол үсэг эвдэрч харагдана.

viewport — Гар утсанд хуудас зөв масштабтай харагдахад зориулагдсан. width=device-width нь дэлгэцийн өргөнийг ашиглана, initial-scale=1.0 нь анхны томруулалтыг 1x байлгана.

<title> — Хөтчийн tab дээр харагдах нэр. Google хайлтын үр дүнд ч энэ гарчиг харагдана.

<body> — харагдах агуулга

html

<body>
  <!-- Хэрэглэгч харах бүх зүйл энд -->
  <h1>Сайн уу, дэлхий!</h1>
  <p>Энэ бол миний вэб хуудас.</p>
</body>

<body> дотор хэрэглэгч харах бүх зүйл байна: текст, зураг, товч, форм гэх мэт. HTML сурахдаа цагийн ихэнхийг <body> дотор ажиллахад зарцуулна.

Бүрэн жишээ

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <!-- Кирилл үсэг зөв харуулахад зайлшгүй -->
    <meta charset="UTF-8" />
    <!-- Гар утсанд зөв харагдуулах -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Tab дээр харагдах гарчиг -->
    <title>Миний анхны хуудас</title>
  </head>
  <body>
    <h1>Монгол вэб хуудас</h1>
    <p>Кирилл үсэг зөв харагдаж байна!</p>
  </body>
</html>

Developer Tools ашиглах

Хөтчийн Elements tab нь HTML-ийг бодитоор харах, туршиж үзэх хамгийн хүчирхэг хэрэгсэл.

Нээх арга:

Windows/Linux: F12 эсвэл Ctrl + Shift + I
Mac: Cmd + Option + I
Хуудасны дурын газар баруун товч → Inspect

Elements tab дээр:

HTML бүтцийг мод хэлбэрээр харна
Tag дарж задлах, хаах боломжтой
Шууд засварлаж үр дүнг нэн даруй харж болно (хадгалагддаггүй — туршилтад л зориулна)
Computed хэсэгт box model харагдана

Нийтлэг алдаа

html

<!-- БУРУУ — charset байхгүй, Монгол үсэг эвдэрнэ -->
<!DOCTYPE html>
<html>
  <head>
    <title>Хуудас</title>
  </head>
  <body>...</body>
</html>

<!-- ЗӨВ -->
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Хуудас</title>
  </head>
  <body>...</body>
</html>

Шинэ HTML файл үүсгэх бүрт энэ бүтцийг template болгон ашиглаарай. Ихэнх код редакторт html:5 бичиж Tab дарвал автоматаар үүсгэж өгнө.

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

<body> дотор агуулга бичиж эхэлнэ — гарчиг (h1–h6) болон параграф (p) tag-уудыг хэрхэн зөв ашиглах, агуулгын иерархийг хэрхэн зохион байгуулах талаар үзнэ.

← Өмнөх хичээлHTML гэж юу вэ?Дараах хичээл →Гарчиг ба параграф