Какво е семантика в контекста на уеб разработката…

Семантиката в уеб разработката означава използването на 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 документа по-информативен и полезен за различните потребители на съдържание.

Какво е семантика в контекста на уеб разработката?