HTML attribute-ууд
Attribute нь HTML элементэд нэмэлт мэдээлэл өгдөг. Зарим attribute зөвхөн тодорхой элементэд хамаарна (src зөвхөн <img>-д), харин global attribute-ууд нь дурын элементэд ашиглаж болдог.
id — өвөрмөц таних тэмдэг
<!-- Нэг хуудсанд давтагдахгүй байна -->
<section id="about">...</section>
<h2 id="pricing-title">Үнийн мэдээлэл</h2>
Хэрэглэгдэх газрууд:
- CSS-д
#about { ... }хэлбэрээр нэг элемент сонгоход - JavaScript-д
document.getElementById('about')хэрэглэхэд - Anchor link-д
href="#about"хэлбэрээр
Нэг хуудсанд ижил id хоёр удаа ашиглах нь HTML-ийн дүрмийг зөрчнө — JavaScript, CSS хоёулаа зөвхөн эхнийхийг олдог.
class — бүлгийн нэр
<!-- Олон элементэд ижил class байж болно -->
<button class="btn btn-primary">Нэвтрэх</button>
<button class="btn btn-secondary">Бүртгүүлэх</button>
<!-- Нэг элементэд олон class — зайгаар тусгаарлана -->
<article class="card card-featured card-html">...</article>
CSS-д .btn { ... }, .card-featured { ... } хэлбэрээр сонгоно. id-ийн эсрэгээр class давтагдаж болно — энэ нь зориудын зохион байгуулалт.
style — дотоод CSS
<!-- Шууд CSS бичих — туршилтад л ашиглана -->
<p style="color: #f87171; font-weight: bold;">Анхааруулга</p>
<div style="display: flex; gap: 1rem;">...</div>
style attribute нь тухайн элементэд шууд CSS тохируулна. Specifiity хамгийн өндөр тул override хийхэд хэцүү — ерөнхий кодонд ашиглахгүй байх нь дээр. Туршилт эсвэл маш тусгай тохиолдолд л хэрэглэнэ.
title — tooltip текст
<!-- Хулганы cursor дээр байхад popup харагдана -->
<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Профайлын тохируулга нээх">⚙</button>
<img src="logo.svg" alt="Лого" title="ulaanbaatar.app нүүр хуудас руу буцах" />
title нь хулгана дээр байхад tooltip харуулна. Screen reader заримдаа уншдаг боловч aria-label илүү найдвартай.
lang — хэлний тодорхойлолт
<!-- Бүх хуудасны хэл -->
<html lang="mn">
<!-- Хуудасны дотор өөр хэлтэй хэсэг -->
<p>
HTML гэдэг нь
<span lang="en">HyperText Markup Language</span>
гэсэн үгийн товчлол юм.
</p>
<blockquote lang="ja">日本語のテキスト</blockquote>
lang attribute нь screen reader-т зөв хэл дуудуулахад болон хайлтын системд хэрэгтэй.
hidden — нуух
<!-- Хэрэглэгчид харагдахгүй, DOM-д байна -->
<div hidden>Одоохондоо нуугдмал агуулга</div>
<!-- JavaScript-ээр харуулах -->
<div id="success-msg" hidden>
Амжилттай хадгалагдлаа!
</div>
hidden нь display: none-тэй тэнцүү боловч HTML-ийн семантик арга. display: none CSS-ийн арга — хоёулаа ажилладаг боловч hidden тохиромжтой тохиолдолд ашиглах нь илүү семантик.
tabindex — гарны навигаци
<!-- Tab товчоор дарах дарааллыг тохируулна -->
<input tabindex="1" type="text" name="name" />
<input tabindex="2" type="email" name="email" />
<button tabindex="3" type="submit">Илгээх</button>
<!-- Tab-аар хүрэхгүй болгох -->
<div tabindex="-1">Tab-аар хүрэхгүй</div>
<!-- Дарааллын гадна боловч Tab-аар хүрнэ -->
<div tabindex="0" role="button">Товч маягийн div</div>
Ихэнх тохиолдолд tabindex тавихгүй байх нь дээр — хөтөч HTML-ийн дарааллаар автоматаар Tab зохицуулдаг. Зөвхөн тусгай хэрэгцээтэй үед ашиглана.
contenteditable — засварлагдах агуулга
<!-- Хэрэглэгч шууд засварлаж болно -->
<div contenteditable="true">
Энэ текстийг дарж засварлаж болно.
</div>
<!-- Rich text editor хийх үндэс -->
<article contenteditable="true" id="editor">
<h2>Гарчгаа энд бичнэ</h2>
<p>Агуулгаа энд бичнэ...</p>
</article>
spellcheck — үг зөв бичгийн шалгалт
<!-- Хөтчийн үг зөв бичгийн шалгалт асаах -->
<textarea spellcheck="true"></textarea>
<!-- Унтраах — кодын редактор гэх мэт -->
<textarea spellcheck="false" id="code-editor"></textarea>
data-* — өгөгдлийн attribute
data- угтвартай дурын attribute нэмж болно — JavaScript-т дамжуулах өгөгдөл хадгалахад хэрэгтэй:
<!-- data-[нэр]="[утга]" хэлбэрээр бичнэ -->
<button data-course-id="html" data-lesson="01-intro" data-xp="10">
Хичээл эхлэх
</button>
<article
data-id="42"
data-category="frontend"
data-published="2024-03-15"
>
...
</article>
JavaScript-д dataset property-ээр унших:
const btn = document.querySelector('button');
// data-course-id → dataset.courseId (camelCase болно)
console.log(btn.dataset.courseId); // "html"
console.log(btn.dataset.lesson); // "01-intro"
console.log(btn.dataset.xp); // "10"
data-* нь HTML-д өгөгдөл хадгалах стандарт арга — id эсвэл class-д нэмэлт мэдээлэл шахахаас илүү цэвэр.
Дараагийн хичээлд:
<head> дотор байрлах meta tag-уудыг дэлгэрэнгүй үзнэ. charset, viewport, description, robots болон <title> tag-ийн SEO-д нөлөөлөх байдлыг тайлбарлана.