Co je to sémantika v kontextu webového vývoje…

Sémantika ve webové výstavbě znamená používání HTML značek v souladu s jejich významovým určením, nikoli pouze pro stylizaci. Pomáhá popsat strukturu a smysl obsahu, čímž činí webovou stránku srozumitelnější pro prohlížeče, vyhledávací systémy, čtečky obrazovky a další parsery.

Hlavní výhody sémantického označení:

Přístupnost: Zlepšuje interakci se stránkou pro osoby se zdravotním postižením používající čtečky obrazovky.
SEO: Pomáhá vyhledávacím systémům lépe pochopit strukturu a obsah stránky, což pozitivně ovlivňuje hodnocení.
Udržovatelnost: Zpřehledňuje a zpřístupňuje kód pro ostatní vývojáře.
Kompatibilita: Zajišťuje správné zobrazení obsahu na různých zařízeních a v různých prohlížečích.

Příklady sémantických značek v HTML5:

<header>: Představuje úvod nebo navigaci celého dokumentu nebo určité sekce.
<nav>: Představuje skupinu odkazů pro navigaci.
<main>: Představuje hlavní obsah dokumentu.
<article>: Představuje uzavřený, samostatný fragment obsahu, který může být nezávisle šířen (například blogový zápis, zpráva).
<section>: Představuje samostatnou sekci obsahu v dokumentu.
<aside>: Představuje obsah, který je nepřímo spojen s hlavním obsahem stránky (například postranní panel).
<footer>: Představuje spodní část dokumentu nebo určité sekce.
<figure> a <figcaption>: Představují mediální prvek (obrázek, schéma atd.) a jeho popis.
<time>: Představuje datum a čas.

Porovnání sémantického a nesémantického přístupu:

Nesémantický přístup	Sémantický přístup
Použití `<div>` a `<span>` pro vše	Použití specifických značek (`<header>`, `<nav>`, `<article>`)
Popis struktury přes třídy (`class="header"`)	Použití značek, které inherentně popisují strukturu
Závislost na CSS pro pochopení struktury	Struktura je srozumitelná z HTML kódu

Příklad nesémantického označení:

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

Příklad sémantického označení:

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

Szemantikus jelölés nem helyettesíti a CSS-t a stílus kialakításában, de informatívabbá és hasznosabbá teszi a HTML-dokumentumot különböző tartalomfogyasztók számára.

Co je to sémantika v kontextu webového vývoje?