Kas ir semantika tīmekļa izstrādes kontekstā…

Sēmanātika tīmekļa izstrādē nozīmē HTML tagu lietošanu atbilstoši to nozīmīgajai funkcijai, ne tikai stilizācijai. Tā palīdz aprakstīt satura struktūru un nozīmi, padarot tīmekļa lapu saprotamāku pārlūkprogrammām, meklētājprogrammām, ekrāna lasītājiem un citiem parsētājiem.

Galvenās priekšrocības semantiskajai marķēšanai:

Pieejamība: Uzlabo mijiedarbību ar vietni cilvēkiem ar ierobežotām iespējām, kuri izmanto ekrāna lasītājus.
SEO: Palīdz meklētājprogrammām labāk saprast lapas struktūru un saturu, kas pozitīvi ietekmē rangu.
Uzturēšana: Padara kodu lasāmāku un saprotamāku citiem izstrādātājiem.
Saderība: Nodrošina pareizu satura attēlojumu dažādās ierīcēs un pārlūkprogrammās.

HTML5 piemēri ar semantiskajām tagiem:

<header>: Apzīmē ievadu vai navigāciju visam dokumentam vai noteiktai sadaļai.
<nav>: Apzīmē saiteņu grupu navigācijai.
<main>: Apzīmē galveno dokumenta saturu.
<article>: Apzīmē pabeigtu, patstāvīgu satura fragmentu, ko var neatkarīgi izplatīt (piemēram, bloga ieraksts, ziņa).
<section>: Apzīmē patstāvīgu satura sadaļu dokumentā.
<aside>: Apzīmē saturu, kas netieši saistīts ar galveno saturu (piemēram, sānu panelis).
<footer>: Apzīmē dokumenta vai noteiktas sadaļas apakšdaļu.
<figure> un <figcaption>: Apzīmē multimediju elementu (attēlu, diagrammu utt.) un tā aprakstu.
<time>: Apzīmē datumu un laiku.

Salīdzinājums starp semantisko un nesemantisko pieeju:

Nesemantiska pieeja	Semantiska pieeja
Izmanto `<div>` un `<span>` visam	Izmanto specifiskas tagus (`<header>`, `<nav>`, `<article>`)
Struktūras apraksts ar klasēm (`class="header"`)	Tagu izmantošana, kas inherentiski apraksta struktūru
Atkarība no CSS struktūras sapratnei	Struktūra ir saprotama no HTML koda

Nesemantiskas marķēšanas piemērs:

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

Semantiskās marķēšanas piemērs:

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

Semantiskā marķēšana ne aizstāj CSS stilu veidošanu, bet padara HTML dokumentu informatīvāku un noderīgāku dažādiem satura lietotājiem.

Kas ir semantika tīmekļa izstrādes kontekstā?