Какви са семантичните елементи в HTML и за какво служат?

Семантичните елементи в HTML са тагове (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), които описват семантичното предназначение на съдържанието, което обграждат, а не само неговия външен вид.

Основна цел:

• Достъпност: Помагат на помощните технологии (като екранни четци) да разберат структурата и съдържанието на страницата, правейки съдържанието достъпно за потребители с ограничения.
• SEO (Оптимизация за търсачки): Страниците с семантична маркировка се индексират и класират по-добре от търсачките, тъй като могат по-точно да определят основното съдържание и неговата релевантност към заявките.
• Разработка и поддръжка: Подобряват четливостта и поддръжката на кода, правейки структурата на страницата по-разбираема за други разработчици (и за вас в бъдеще).
• По-добро разбиране на структурата: Позволяват ясно да се разделят логическите блокове на страницата (навигация, основно съдържание, футър и т.н.).

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

<div>
  <h2>Заглавие на статията</h2>
  <p>Съдържание на статията...</p>
</div>
<div>
  <h3>Боксов панел</h3>
  <p>Информация за боксовия панел...</p>
</div>

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

<article>
  <h2>Заглавие на статията</h2>
  <p>Съдържание на статията...</p>
</article>
<aside>
  <h3>Боксов панел</h3>
  <p>Информация за боксовия панел...</p>
</aside>

Използването на семантични елементи допринася за създаването на по-структурирани, достъпни и оптимизирани за търсачки уеб страници.