Semantic HTML гэж юу вэ?
HTML tag-ууд хоёр ангилалд хуваагдана: утга агуулсан (semantic) ба утгагүй (non-semantic). Энэ ялгааг ойлгох нь сайн HTML бичихийн үндэс.
Non-semantic элементүүд
<div> ба <span> нь хамгийн нийтлэг non-semantic элементүүд. Тэд ямар ч утга агуулдаггүй — зөвхөн бүлэглэх зориулалттай.
<!-- div — block-level бүлэглэгч -->
<div class="header">
<div class="nav">
<div class="nav-item">Нүүр</div>
<div class="nav-item">Сургалт</div>
</div>
</div>
<div class="main-content">
<div class="article">
<div class="article-title">Мэдээний гарчиг</div>
<div class="article-text">Мэдээний текст...</div>
</div>
</div>
<div class="footer">
<span class="copyright">© 2024</span>
</div>
Хөтөч энэ кодыг харахад: "Зарим div байна" — тэр болоо. Юу нь header, юу нь навигац, юу нь нийтлэл болохыг ойлгохгүй.
Semantic элементүүд
HTML5-д нэмэгдсэн semantic элементүүд нь агуулгын утгыг тодорхойлдог:
<!-- Семантик хувилбар -->
<header>
<nav>
<a href="/">Нүүр</a>
<a href="/courses">Сургалт</a>
</nav>
</header>
<main>
<article>
<h1>Мэдээний гарчиг</h1>
<p>Мэдээний текст...</p>
</article>
</main>
<footer>
<p>© 2024</p>
</footer>
Хөтөч, screen reader, хайлтын систем бүгд "Энэ header, энэ навигац, энэ үндсэн агуулга, энэ footer" гэдгийг ойлгодог.
Semantic элементүүдийн жагсаалт
<header> — хуудас эсвэл хэсгийн толгой хэсэг</header>
<nav> — навигацийн холбоосуудын бүлэг</nav>
<main> — хуудасны үндсэн агуулга (нэг л байна)</main>
<article> — бие даасан нийтлэл, блог пост, мэдээ</article>
<section> — сэдвийн хэсэг</section>
<aside> — гол агуулгатай хамааралтай боловч хажуугийн агуулга</aside>
<footer> — хуудас эсвэл хэсгийн хөл хэсэг</footer>
<figure> — зураг, диаграм, код жишээ бүхий бие даасан блок</figure>
<time> — огноо ба цаг</time>
<address> — холбоо барих мэдээлэл</address>
<mark> — онцлох текст</mark>
<summary> — details-ийн харагдах гарчиг</summary>
<details> — нугалж/задлах агуулга</details>
Яагаад semantic HTML хэрэгтэй вэ?
1. Accessibility
Дэлхийд 300 сая гаруй хүн харааны бэрхшээлтэй — тэд screen reader ашиглан вэб хэрэглэдэг. Screen reader нь semantic HTML-г ашиглан хуудсын бүтцийг хэрэглэгчид дуут байдлаар дамжуулдаг.
<!-- Screen reader: "Navigation landmark" гэж мэдэгдэнэ -->
<nav>
<a href="/">Нүүр</a>
</nav>
<!-- Screen reader: зөвхөн "link" гэж уншина — навигац гэж мэдэхгүй -->
<div class="nav">
<a href="/">Нүүр</a>
</div>
2. SEO
Google-ийн crawler хуудсыг "унших" үед semantic элементүүдийг ашиглан агуулгын чухлыг тогтоодог. <h1> дотрох текст <div> дотрохоос илүү чухал гэж үзнэ. <article> нь бие даасан нийтлэл гэдгийг мэддэг.
<!-- Google-д илүү ойлгомжтой -->
<article>
<h1>Монгол хэлний түүх</h1>
<p>...</p>
</article>
<!-- Google-д утга багатай -->
<div class="post">
<div class="title">Монгол хэлний түүх</div>
<div class="content">...</div>
</div>
3. Код уншигдах чанар
Баг хамтран ажиллах үед semantic HTML нь кодыг тайлбаргүйгээр ойлгомжтой болгодог:
<!-- Нэн даруй ойлгомжтой -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
<!-- Юу юу болохыг class уншихгүйгээр мэдэхгүй -->
<div class="top-wrapper">
<div class="menu-container">...</div>
</div>
<div class="content-area">
<div class="post-box">...</div>
<div class="side-box">...</div>
</div>
<div class="bottom-section">...</div>
Харьцуулалт
| Зорилго | Non-semantic | Semantic |
|---------|-------------|---------|
| Хуудасны дээд хэсэг | <div class="header"> | <header> |
| Цэс | <div class="nav"> | <nav> |
| Үндсэн агуулга | <div class="content"> | <main> |
| Нийтлэл | <div class="article"> | <article> |
| Хөл хэсэг | <div class="footer"> | <footer> |
div ба span-ийг хэзээ ашиглах вэ?
Semantic элемент байхгүй тохиолдолд л <div> ба <span> ашиглана:
<!-- CSS зорилгоор бүлэглэх — semantic элемент байхгүй -->
<div class="card-grid">
<article>...</article>
<article>...</article>
</div>
<!-- Текстийн нэг хэсгийг style хийх -->
<p>Үнэ: <span class="price">15,000₮</span></p>
<div> ба <span> нь буруу биш — зөвхөн semantic хувилбар байхгүй үед л ашиглана.
Дараагийн хичээлд:
<header>, <nav>, <main>, <footer> элементүүдийг практикаар ашиглан хуудасны бүтэн semantic layout хэрхэн зохиох талаар үзнэ.