Šta je semantika u kontekstu veb razvoja?

Семантика у веб-разработци означава коришћење HTML тагова у складу са њиховим смисленим намерама, а не само за стилизацију. Она помаже да се опише структура и смисао садржаја, чинећи веб страницу разумљивијом за прегледаче, претраживаче, читаоце екрана и друге парсере.

Главне предности семантичке маркирања:

• Доступност: Побољшава интеракцију са сајтом за особе са ограниченим могућностима, користећи читаоце екрана.
• SEO: Помаже претраживачима да боље разумеју структуру и садржај странице, што позитивно утиче на рангирање.
• Одрживост: Чини код лакшим за читање и разумевање за друге програмере.
• Компатибилност: Обезбеђује правилно приказивање садржаја на различитим уређајима и у различитим прегледачима.

Примери семантичких тагова у HTML5:

• <header>: Представља увод или навигацију за цео документ или одређену секцију.
• <nav>: Представља групу линкова за навигацију.
• <main>: Представља главни садржај документа.
• <article>: Представља завршен, самодовољан фрагмент садржаја који може бити независно ширен (нпр. блог запис, вест).
• <section>: Представља самосталну секцију садржаја у документу.
• <aside>: Представља садржај који је индиректно повезан са главним садржајем странице (нпр. бочна трака).
• <footer>: Представља доњу страну документа или одређене секције.
• <figure> и <figcaption>: Представљају медијални елемент (слика, дијаграм итд.) и његов опис.
• <time>: Представља датум и време.

Поређење семантичког и несемантичког приступа:

Не семантички приступ	Семантички приступ
Коришћење <div> и <span> за све	Коришћење специфичних тагова (<header>, <nav>, <article>)
Опис структуре преко класа (class="header")	Коришћење тагова који по подразумеваној намени описују структуру
Зависност од CSS-а за разумевање структуре	Структура је разумљива из HTML кода

Пример несемантичке маркировке:

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

Пример семантичне маркировке:

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

Семантична маркировка не замењује CSS за стилизовање, али чини HTML документ информативнијим и кориснијим за различите кориснике садржаја.