Умение правильно писать семантический HTML-код - одна из важнейших составляющих отличного веб-разработчика. В этой статье рассмотрим, что такое семантический HTML и почему вы должны его использовать, предоставив несколько примеров того, как он выглядит и как он работает!

Что такое семантический HTML?

Самый простой способ выяснить значение «семантического HTML» - взглянуть на слово «семантический». «Семантический» - это, по сути, способ сказать, что что-то имеет смысл, поэтому семантический HTML - это способ сказать, что есть группа элементов, которые существуют только для обеспечения значимых контейнеров, а не куча <div> и <span> .

Зачем нужен семантический HTML?

Есть две действительно веские причины для использования семантического HTML. Во-первых, это дает более точное представление о структуре вашего сайта таким программам, как браузеры, поисковые системы или программы чтения с экрана, а во-вторых, это делает ваш HTML более читабельным.

Правильное представление

Проблема с использованием <div>  и <span> повсюду в том, что они по определению бессмысленны. Другими словами, использование этих элементов ничего не говорит компьютеру о том, что они содержат, тогда как использование соответствующих семантических элементов наоборот.

Представьте себе непомеченный непрозрачный кувшин с жидкостью и прозрачный кувшин с жидкостью, который четко обозначен как «вода». Из каково вы бы предпочли пить?

Лучшая читаемость

Читаемость HTML не часто обсуждается, но это важно. Чтобы продемонстрировать, насколько большое значение может иметь семантический HTML в удобочитаемости кода рассмотрим примеры.

Вот как может выглядеть базовая карта с семантическим HTML.

<article class="card-wrapper">
  <header>
    <h2>Hello, I'm Cole</h2>
  </header>
  <div class="content">
    <p>This is an example of a card component with semantic html!</p>
  </div>
  <footer>
    <a href="https://www.google.com">This is a link</a>
  </footer>
</article>

Вот та же самая карта без семантического HTML:

<div class="card-wrapper">
  <div class="header">
    <h2>Hello, I'm Cole</h2>
  </div>
  <div class="content">
    <p>This is an example of a card component with semantic html!</p>
  </div>
  <div>
    <a href="https://www.google.com">This is a link</a>
  </div>
</div>

Как видите, легче читать код , когда он использует семантический HTML. Все определено в теги, и вам не нужно сканировать классы, чтобы выяснить, что происходит. Это значительно упростит обновление вашего HTML в будущем, как для вас, так и для ваших коллег, с дополнительным преимуществом лучшей доступности и поисковой оптимизации!