HTML / Character encoding

Character encoding

Вэб хуудасны файлд тэмдэгтүүд хэрхэн хадгалагддаг талаар ойлгох нь Монгол кирилл үсэг болон бусад Unicode тэмдэгтийг зөв харуулахад зайлшгүй мэдлэг юм.

Компьютер тэмдэгтийг хэрхэн хадгалдаг вэ?

Компьютер зөвхөн 0 ба 1 буюу бит мэднэ. Тэмдэгт бүрийг тоон кодоор дүрсэлдэг — жишээ нь A үсгийн код нь 65. Character encoding нь тэмдэгт ба тоон код хоёрын хооронд хөрвүүлэх дүрмийн систем юм.

Encoding буруу тохируулагдвал текст mojibake (мохибаке) болж эвдэрнэ — жишээ нь Ñîëèñòûí гэх мэт ойлгомжгүй тэмдэгтүүд гарна.

Encoding-ийн түүхэн товч

ASCII (1963) — зөвхөн 128 тэмдэгт: латин үсэг, тоо, тэмдэгт. Монгол, Кирилл, Хятад зэрэг бусад хэлний тэмдэгт огт байхгүй.

ISO-8859 — ASCII-г өргөтгөсөн 256 тэмдэгтийн систем. ISO-8859-5 Кирилл, ISO-8859-1 Баруун Европ гэх мэт хэлтэрхий стандартууд. Файл ямар encoding-тэй болохыг урьдчилан мэдэх шаардлагатай байсан.

Windows-1251 — Microsoft-ийн Кирилл encoding. Олон жилийн турш Монголын вэбсайтуудад ашиглагддаг байсан.

UTF-8 (1993–өдийг хүртэл) — Unicode-ийн бүх 1.1 сая гаруй тэмдэгтийг дэмждэг орчин үеийн стандарт.

UTF-8 яагаад стандарт болов?

UTF-8 хэд хэдэн давуу талтай:

Бүх хэлийг нэгэнт дэмждэг — Монгол, Хятад, Арабаас эхлээд emoji хүртэл нэг файлд зэрэг ашиглаж болно:

html

<p>Сайн уу 🇲🇳 — Монгол Улс</p>
<p>你好 — Хятад хэл</p>
<p>مرحبا — Арабын хэл</p>

ASCII-тэй нийцтэй — энгийн латин тэмдэгтүүд UTF-8-д ASCII-тэй яг ижил байтаар хадгалагдана. Энэ нь шилжилтийг хялбаршуулсан.

Өргөн дэлгэрсэн — 2024 оны байдлаар интернетийн 98 гаруй хувийн вэбсайт UTF-8 ашигладаг.

HTML-д encoding тохируулах

<meta charset> tag нь хөтчид файлыг ямар encoding-оор унших ёстойг хэлнэ. Заавал <head>-ийн хамгийн эхэнд байрлана:

html

<!DOCTYPE html>
<html lang="mn">
  <head>
    <!-- Эхний мөрт байх ёстой — аль болох эрт тохируулна -->
    <meta charset="UTF-8" />
    <title>Миний хуудас</title>
  </head>
  <body>
    <p>Монгол үсэг: АБВГДЕЁЖЗИЙКЛМНОӨПРСТУҮФХЦЧШЩЪЫЬЭЮЯ</p>
    <p>Emoji: 🎉 🚀 ✅</p>
  </body>
</html>

charset="UTF-8" байхгүй бол хөтөч өөрөө таамаглан encoding-г сонгоно — энэ нь буруу үр дүнд хүргэж болно.

Файлыг UTF-8-оор хадгалах

HTML файлын <meta charset> тохируулахаас гадна файл өөрөө UTF-8 encoding-тэй хадгалагдсан байх ёстой. Редактор бүр үүнийг тохируулах боломжтой:

VS Code — доод баруун буланд encoding харагдана, дарж өөрчилж болно (UTF-8 байхыг шалгана)
Notepad (Windows) — File → Save As → Encoding: UTF-8
Sublime Text — File → Save with Encoding → UTF-8

BOM гэж юу вэ?

BOM (Byte Order Mark) нь файлын эхэнд байх тусгай невидимо тэмдэгт бөгөөд encoding-г заана. UTF-8 BOM нь EF BB BF гурван байт юм.

код

UTF-8 BOM-тэй:    EF BB BF 3C 21 44 4F 43 ...
UTF-8 BOM-гүй:          3C 21 44 4F 43 ...

Вэбт UTF-8 BOM ашиглахгүй байхыг зөвлөдөг — зарим серверийн тохиргоо болон хөгжүүлэлтийн хэрэгслүүд BOM-тэй файлыг буруу зохицуулдаг. VS Code-д UTF-8 (BOM-гүй) болон UTF-8 with BOM хоёрыг ялгаж харуулдаг.

lang attribute

<html> tag дахь lang attribute нь хөтөч болон screen reader-т хуудасны хэлийг мэдэгдэнэ:

html

<!-- Монгол хэл -->
<html lang="mn">

<!-- Кирилл монгол — дэлгэрэнгүй заавал биш ч болно -->
<html lang="mn-Cyrl">

<!-- Англи -->
<html lang="en">

<!-- Хэлтэй хэсгийг тусгайлан зааж болно -->
<p>Сайн уу! <span lang="en">Hello!</span></p>

lang тохируулснаар:

Screen reader зөв хэлээр уншина
Хөтчийн автомат орчуулга зөв ажиллана
SEO-д тус болно

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

HTML form-ийн баталгаажуулалтыг судлана — required, pattern, minlength зэрэг attribute-уудаар браузерийн validation хэрхэн тохируулж, серверийн validation-тай ямар ялгаатайг үзнэ.

← Өмнөх хичээлHTML entity-ууд Дараах хичээл →Form баталгаажуулалт (validation)