Kas yra semantika interneto kūrimo kontekste…

Sėmenatika interneto kūrime reiškia HTML žymių naudojimą pagal jų prasminę paskirtį, o ne tik stiliui. Ji padeda aprašyti turinio struktūrą ir prasmę, darant tinklalapį aiškesnį naršyklėms, paieškos sistemoms, ekrano skaitytuvams ir kitiems analizatoriams.

Pagrindiniai semantinio žymėjimo privalumai:

Prieinamumas: Pagerina sąveiką su svetaine žmonėms su ribotomis galimybėmis, naudojantiems ekrano skaitytuvus.
SEO: Padeda paieškos sistemoms geriau suprasti puslapio struktūrą ir turinį, teigiamai veikia reitingą.
Priežiūra: Kodą daro lengviau skaitomą ir suprantamą kitiems kūrėjams.
Suderinamumas: Užtikrina teisingą turinio rodymą įvairiuose įrenginiuose ir naršyklėse.

HTML5 pavyzdžiai su semantinėmis žymėmis:

<header>: Atstovauja įvadą arba navigaciją visam dokumentui ar tam tikrai sekcijai.
<nav>: Atstovauja nuorodų grupę navigacijai.
<main>: Atstovauja pagrindinį dokumento turinį.
<article>: Atstovauja užbaigtą, savarankišką turinio fragmentą, kuris gali būti nepriklausomai platinamas (pvz., tinklaraščio įrašas, naujiena).
<section>: Atstovauja savarankišką turinio sekciją dokumente.
<aside>: Atstovauja turinį, kuris netiesiogiai susijęs su pagrindiniu turiniu (pvz., šoninė juosta).
<footer>: Atstovauja dokumento arba tam tikros sekcijos apatinę dalį.
<figure> ir <figcaption>: Atstovauja medijos elementą (paveikslėlį, diagramą ir kt.) ir jo aprašymą.
<time>: Atstovauja datą ir laiką.

Sąlyginis palyginimas tarp semantinio ir nesemantinio požiūrio:

Nesemantinis požiūris	Semantinis požiūris
Naudojimas `<div>` ir `<span>` viskam	Naudojimas specifinių žymių (`<header>`, `<nav>`, `<article>`)
Struktūros aprašymas per klases (`class="header"`)	Žymių naudojimas, kurie iš esmės apibūdina struktūrą
Priklausomybė nuo CSS struktūros supratimui	Struktūra aiški iš HTML kodo

Nesemantinio žymėjimo pavyzdys:

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

Sėmenatinės žymėjimo pavyzdys:

<!-- 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ėmenatinė žymėjimas nesuteikia CSS stiliaus, bet padaro HTML dokumentą informatyvesnį ir naudingesnį įvairiems turinio vartotojams.

Kas yra semantika interneto kūrimo kontekste?