Čo je to sémantika v kontexte vývoja webu?

Sémantika vo webovej výstavbe znamená používanie HTML značiek v súlade s ich významovým určením, nie len na štýlovanie. Pomáha popísať štruktúru a zmysel obsahu, čím robí webovú stránku zrozumiteľnejšou pre prehliadače, vyhľadávacie systémy, čítačky obrazovky a ďalšie parsere.

Hlavné výhody sémantického označovania:

• Prístupnosť: Zlepšuje interakciu so stránkou pre ľudí so zníženou schopnosťou, ktorí používajú čítačky obrazovky.
• SEO: Pomáha vyhľadávacím systémom lepšie pochopiť štruktúru a obsah stránky, čo pozitívne ovplyvňuje hodnotenie.
• Údržba: Uľahčuje čitateľnosť a pochopenie kódu pre iných vývojárov.
• Kompatibilita: Zabezpečuje správne zobrazenie obsahu na rôznych zariadeniach a v rôznych prehliadačoch.

Príklady sémantických značiek v HTML5:

• <header>: Predstavuje úvod alebo navigáciu pre celý dokument alebo určitú sekciu.
• <nav>: Predstavuje skupinu odkazov na navigáciu.
• <main>: Predstavuje hlavný obsah dokumentu.
• <article>: Predstavuje uzavretý, samostatný fragment obsahu, ktorý môže byť nezávisle šírený (napríklad blogový zápis, správa).
• <section>: Predstavuje samostatnú sekciu obsahu v dokumente.
• <aside>: Predstavuje obsah, ktorý je nepriamo spojený s hlavným obsahom stránky (napríklad bočný panel).
• <footer>: Predstavuje dolnú časť dokumentu alebo určitej sekcie.
• <figure> a <figcaption>: Predstavujú mediálny prvok (obrázok, schéma atď.) a jeho popis.
• <time>: Predstavuje dátum a čas.

Porovnanie sémantického a nesémantického prístupu:

Nesémantický prístup	Sémantický prístup
Použitie <div> a <span> pre všetko	Použitie špecifických značiek (<header>, <nav>, <article>)
Popis štruktúry cez triedy (class="header")	Použitie značiek, ktoré inherentne opisujú štruktúru
Závislosť od CSS na pochopenie štruktúry	Štruktúra je zrozumiteľná z HTML kódu

Príklad nesémantickej značkovania:

<!-- 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>

Príklad sémantickej značkovania:

<!-- 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émantická značka ne nahrádza CSS na štýlovanie, ale robí HTML dokument informatívnejším a užitočnejším pre rôznych používateľov obsahu.