Mis on semantika veebiarenduse kontekstis?

Sümbantika veebiarenduses tähendab HTML-märkide kasutamist nende tähendusliku otstarbe järgi, mitte ainult stiilimise eesmärgil. See aitab kirjeldada sisu struktuuri ja tähendust, muutes veebilehe arusaadavamaks brauseritele, otsingumootoritele, ekraanilugejatele ja teistele parseritele.

Sümbantilise märgistamise peamised eelised:

• Juurdepääsetavus: Parandab suhtlust veebilehega inimestele, kellel on piiratud võimalused, kasutades ekraanilugejaid.
• SEO: Aitab otsingumootoritel paremini mõista lehe struktuuri ja sisu, mis mõjutab positiivselt järjestust.
• Hooldus: Muudab koodi lihtsamini loetavaks ja arusaadavaks teiste arendajate jaoks.
• Ühilduvus: Tagab sisu õige kuvamise erinevatel seadmetel ja brauserites.

HTML5 näited sümbantiliste märkide kasutamisest:

• <header>: Esindab sissejuhatust või navigatsiooni kogu dokumendi või kindla sektsiooni jaoks.
• <nav>: Esindab linkide gruppi navigatsiooniks.
• <main>: Esindab dokumendi põhisisu.
• <article>: Esindab lõpetatud, iseseisvat sisu fragmenti, mida saab sõltumatult levitada (näiteks blogipostitus, uudis).
• <section>: Esindab iseseisvat sisu sektsiooni dokumendis.
• <aside>: Esindab sisu, mis on kaudselt seotud põhisisuga (näiteks külgpaneel).
• <footer>: Esindab kogu dokumendi või kindla sektsiooni alumist osa.
• <figure> ja <figcaption>: Esindavad meediaelementi (pilt, diagramm jne) ja selle kirjeldust.
• <time>: Esindab kuupäeva ja aega.

Sümbantilise ja mitte-sümbantilise lähenemise võrdlus:

Mitte-sümbantiline lähenemine	Sümbantiline lähenemine
Kasutamine <div> ja <span> kõiges	Kasutamine spetsiifilisi täge (<header>, <nav>, <article>)
Struktuuri kirjeldamine klasside (class="header") kaudu	Tägid, mis inherentse tähendusega kirjeldavad struktuuri
Sõltuvus CSS-ist struktuuri mõistmiseks	Struktuur on HTML-koodist arusaadav

Näide mitte-sümbantilisest märgistamisest:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Title</h2>
    <p>Content...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Näide sümbantilisest märgistamisest:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Title</h2>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Sümbantiline märgistamine ei asenda CSS-i stiilide jaoks, kuid muudab HTML-dokumendi informatiivsemaks ja kasulikumaks erinevate sisu tarbijate jaoks.