HTML'da Semantik Elementlar — Advanced

Semantik HTML nima?

Semantik elementlar — bu HTML elementlari bo’lib, ular o’z mazmunini va vazifasini aniq ifodalaydi. Bu nafaqat accessibility va SEO uchun, balki kodni o’qish va rivojlantirish uchun ham muhim.

1. Asosiy semantik elementlar

<header>
  <h1>Blog sarlavhasi</h1>
  <nav>
    <a href="/">Bosh sahifa</a>
    <a href="/about">Men haqimda</a>
  </nav>
</header>
<main>
  <article>
    <h2>Maqola sarlavhasi</h2>
    <p>Matn...</p>
  </article>
  <aside>
    <h3>Qo'shimcha ma'lumot</h3>
    <p>...</p>
  </aside>
</main>
<footer>&copy; 2024</footer>

2. Semantik va no-semantik farqi

<!-- Yaxshi: semantik -->
<section>
  <h2>Yangiliklar</h2>
  <p>So'nggi yangiliklar...</p>
</section>

<!-- Yomon: div bilan -->
<div class="section">
  <h2>Yangiliklar</h2>
  <p>So'nggi yangiliklar...</p>
</div>

3. SEO va accessibility uchun foydasi

Qidiruv tizimlari sahifa tuzilmasini to’g’ri tushunadi.
Ekran o’quvchilar foydalanuvchiga to’g’ri navigatsiya beradi.
Kodni boshqa dasturchilar tez tushunadi.

4. Real hayotdan misol

<article>
  <header>
    <h2>HTML'da Semantik Elementlar</h2>
    <p>Muallif: Hayotbek</p>
  </header>
  <section>
    <h3>Kirish</h3>
    <p>Semantik HTML haqida...</p>
  </section>
  <footer>
    <p>Oxirgi yangilanish: 2024-05-01</p>
  </footer>
</article>