HTML шилдэг туршлага
Зөв ажиллах HTML бичихэд хангалтгүй — уншихад хялбар, дэмжихэд хялбар HTML бичих нь чухал. Энэ хичээлд мэргэжлийн хөгжүүлэгчдийн баримтлах HTML дүрмүүдийг үзнэ.
1. Жижиг үсэг ашиглах
HTML tag ба attribute-г үргэлж жижиг үсгээр бич. Том үсэг ажиллах боловч стандарт биш.
<!-- ❌ Буруу -->
<DIV CLASS="container">
<P>Текст</P>
</DIV>
<!-- ✓ Зөв -->
<div class="container">
<p>Текст</p>
</div>
2. Attribute утгыг үргэлж хашилтад бич
Attribute утгыг хашилтгүй бичих тохиолдол ажиллаж болох ч алдаа гарах эрсдэлтэй.
<!-- ❌ Буруу — хашилтгүй, хоосон зай агуулсан утгад алдаа гарна -->
<img src=зураг.jpg alt=Миний зураг />
<!-- ✓ Зөв — давхар хашилт стандарт -->
<img src="зураг.jpg" alt="Миний зураг" />
3. Indent — 2 хоосон зай
Үүрлэсэн элементийг 2 хоосон зайгаар (эсвэл tab-аар, нэг стандарт бариад) indent хий. Нийтлэг 2 хоосон зай.
<!-- ❌ Indent байхгүй — уншихад хэцүү -->
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<!-- ✓ 2 хоосон зай — бүтэц тодорхой харагдана -->
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<!-- Гүнзгий үүрлэлт -->
<nav>
<ul>
<li><a href="/courses">Сургалтууд</a></li>
<li><a href="/profile">Профайл</a></li>
</ul>
</nav>
4. Closing tag орхихгүй
HTML зарим tag-д closing tag заавал биш боловч орхивол алдаагүй хэдий ч хөтчийн задлан шинжилгээнд хийц муудаж болно.
<!-- ❌ Closing tag байхгүй — алдаа гарахгүй ч муу -->
<ul>
<li>Нэгдүгээр зүйл
<li>Хоёрдугаар зүйл
</ul>
<!-- ✓ Бүрэн closing tag -->
<ul>
<li>Нэгдүгээр зүйл</li>
<li>Хоёрдугаар зүйл</li>
</ul>
5. Void element-д self-closing зураас
<img>, <input>, <br>, <hr>, <meta>, <link> зэрэг void element-д closing tag байхгүй. HTML5-д / шаардлагагүй ч бичих нь уншихад илүү тодорхой.
<!-- HTML5-д аль аль нь хүчинтэй -->
<img src="photo.jpg" alt="Зураг">
<img src="photo.jpg" alt="Зураг" />
<!-- input, br, hr, meta, link -->
<input type="text" name="username" />
<br />
<hr />
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
6. Alt текст — зураг бүрт
alt байхгүй бол screen reader зурагны файлын нэрийг уншдаг. Чимэглэлийн зурагт хоосон alt="" өг.
<!-- ✓ Агуулга бүхий зураг — тайлбарлах alt -->
<img src="css-box-model.png" alt="CSS box model диаграм: content, padding, border, margin" />
<!-- ✓ Чимэглэлийн зураг — хоосон alt (screen reader алгасна) -->
<img src="divider-wave.svg" alt="" />
<!-- ❌ alt байхгүй — accessibility дутагдалтай -->
<img src="photo.jpg" />
7. Утга бүхий class ба id нэр
Class ба id нэр нь харагдах байдал биш, утга/зорилго-г илэрхийлэх ёстой.
<!-- ❌ Харагдах байдал дээр үндэслэсэн — CSS өөрчлөгдвөл нэр утгагүй болно -->
<div class="red-box">Анхааруулга</div>
<div class="left-panel">Навигаци</div>
<!-- ✓ Утга дээр үндэслэсэн -->
<div class="alert">Анхааруулга</div>
<nav class="sidebar">Навигаци</nav>
8. Boolean attribute-д утга өгөхгүй
required, disabled, checked, readonly зэрэг boolean attribute-д утга өгөх шаардлагагүй — байгаа нь л идэвхжүүлнэ.
<!-- ❌ Хэрэггүй утга -->
<input type="text" required="required" disabled="disabled" />
<!-- ✓ Зөв — байгаа нь л хангалттай -->
<input type="text" required disabled />
9. lang attribute
<html> tag-д заавал lang attribute оруул. Screen reader зөв хэлээр унших, SEO-д тустай.
<!-- Монгол хэл -->
<html lang="mn">
<!-- Англи -->
<html lang="en">
<!-- Хуудасны нэг хэсэг өөр хэлтэй бол -->
<p lang="en">This part is in English.</p>
10. Тайлбар (comment) зохистой ашиглах
Тайлбар их байх нь муу биш ч хэт олон тайлбар кодыг дүүргэнэ. Код өөрөө ойлгомжтой байвал тайлбар шаардахгүй.
<!-- ✓ Хэрэгтэй тайлбар — яагаад ийм хийснийг тайлбарлана -->
<!-- Хуудасны navbar хэсэг дуусав -->
</nav>
<!-- ❌ Хэрэггүй тайлбар — кодоос нь мэдэгдэж байна -->
<!-- Энэ параграф -->
<p>Текст</p>
Нэгтгэсэн жишээ
<!DOCTYPE html>
<html lang="mn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="HTML шилдэг туршлага — ulaanbaatar.app" />
<link rel="stylesheet" href="style.css" />
<title>HTML шилдэг туршлага</title>
</head>
<body>
<header>
<nav aria-label="Үндсэн навигаци">
<ul>
<li><a href="/">Нүүр</a></li>
<li><a href="/courses">Сургалтууд</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>HTML шилдэг туршлага</h1>
<img src="html-tips.png" alt="HTML шилдэг туршлагын тойм зураг" width="800" height="400" />
<p>Энэ хичээлд HTML-г мэргэжлийн түвшинд бичих дүрмүүдийг үзнэ.</p>
</article>
</main>
<footer>
<p>© 2024 ulaanbaatar.app</p>
</footer>
<script defer src="main.js"></script>
</body>
</html>
Дараагийн хичээлд:
Эцсийн төсөл — HTML-ийн сурсан бүх зүйлийг ашиглан personal portfolio хуудас бүтээнэ. Semantic markup, form, зураг, холбоос, accessibility бүгдийг нэгтгэнэ.