Основы HTML | Часть 2

В продолжении первой части данной статьи (https://teletype.in/@frontend_team/B_xm6TOEwxc), сегодня ты узнаешь про семантику HTML-тэгов и различные подходы к вёрстке веб-страниц. Данная статья является продолжением обучающего материала по HTML, однако, легко читается как самостоятельный материал. Если вдруг тебе будет непонятен материал, изложенный здесь - советую обратиться к первой части данной статьи по ссылке выше.

Семантика

Итак, семантика. Что же это ?
Семантика - смысловая нагрузка отдельной языковой единицы. Ранее, это понятие было актуально исключительно для лингвистики, но теперь - применимо и в сфере Frontend-разработки. Самое интересное, что в HTML семантика имеет тот же смысл, только в качестве языковой единицы выступает отдельно взятый тэг. Как и всегда, рассмотрим на примере:

<html> 
  <head>   
    <title>
      My first page
    </title>
  </head>
  <body> 
    <div> 
      <div class="text">Hello, world!</div>
              
      <div class="button">SignIn</div> 
    </div> 
  </body>
</head>

Казалось бы, а что здесь не так ? У нас есть текст и кнопка, всё же замечательно!
Но нет. Дело в том, что данный фрагмент кода не является семантически правильным.

Скорее всего, если ты достаточно любопытный, ты уже посмотрел, какие вообще бывают HTML-тэги и сколько их всего. Даже если не смотрел - отвечу: их больше сотни. Сто разных HTML-тэгов !!!
А раз нам предоставили такое разнообразие - то, наверное, для этого есть причина... И она кроется, опять же, в семантике. Забегая вперёд скажу - многие из этих тэгов ты вообще не будешь использовать, или будешь, но крайне редко. Однако, необходимо понимать, что у каждого из них есть своя специфическая роль и нельзя всю веб-страницу собирать из одного единственного тэга.

Всё дело в том, что любой браузер воспринимает и обрабатывает HTML-тэги по разному. Тэг - это инструкция, как браузер должен работать с его содержимым. Именно по этому, приведенный выше фрагмент разметки является невалидным. Мы пытаемся сделать всё с помощью div, что является неверным подходом.

Возникает логичный вопрос: а как же тогда правильно ?

Пишем семантический код

Давай вернемся к нашему примеру и посмотрим, что же у нас должно быть на нашей страничке:

И именно здесь заключается наша ошибка. Текст и кнопка должны быть обернуты в соответствующие тэги:

<p> - параграф (абзац), служит для отображения одного абзаца текста.
<button> - кликабельная кнопка, необходима, как ни странно, для добавления кнопки на веб-страничку.
<div> - блочный элемент, элемент-контейнер для контента в вёрстке.

То есть, наш код после всех исправлений будет выглядеть примерно вот так:

<html> 
  <head>   
    <title>
      My first page
    </title>
  </head>
  <body> 
    <div> 
      <p class="text">Hello, world!</p>
              
      <button class="button">SignIn</button> 
    </div> 
  </body>
</head>

Зачем это нужно ?

Справедливый вопрос.
В программировании есть такой важный принцип, который применим в любой области - принцип KISS (Keep It Simple, Stupid), что в переводе означает "делай это проще, идиот". Данный принцип говорит нам о том, что для любой задачи необходимо выбирать самое простое и лаконичное решение.

Тогда зачем нам 100 с лишним HTML-тэгов ?
Ответ прост - потому что это самое простое решение проблемы. А проблема в следующем - браузер должен по разному отображать и обрабатывать содержимое каждого тэга. Даже если это не видно, даже если это не оказывает влияния на вёрстку - каждый тэг нужен для конкретной задачи и для каждого тэга у браузера свой алгоритм обработки содержимого.

К примеру, к уже знакомому нам тэгу <p> браузер автоматически добавляет отступы сверху и снизу (margin-top и margin-bottom) высотой в 1em, только если ты не укажешь ему этого не делать.

К тэгу <button> браузер автоматически добавит целую кучу стилей и сам отобразит содержимое, как кнопку:

<button>Кликни меня!</button>

И это без всяких CSS-стилей!

Так же, существуют менее заметные, но не менее важные функциональные аспекты семантических тэгов:

Корректная обработка сайта роботами.
Поисковые роботы автоматически понимают, что в тэге <nav> у нас располагается навигация сайта, и, поэтому, могут корректно и красиво это обрабатывать в виде меню прямо на странице поиска.
Адаптивность сайта для людей с ограниченными возможностями.
Человек, к примеру, с плохим зрением часто при веб-серфинге пользуется голосовыми помощниками, которые так же "смотрят" на семантику и определяют, что находится у человека под курсором в данный момент.
Организация кода.
Ну и конечно же, чистый код - наше всё. Код, в котором каждый тэг отвечает за определённый контент легче читать и поддерживать, поэтому настоящие трушные разработчики всегда уделяют этому внимание.

Итог

В этой статье ты познакомился с семантическими тэгами и теперь, в следующий раз, будешь писать более красивый, аккуратный и семантически валидный код. Как бы ни казалось, что статья необязательная для изучения, однако, многие разработчики, которые доросли до уровня Middle и даже Middle+ не всегда пользуются семантикой. Гораздо чаще на неё забивают, хотя это один из важнейших аспектов в вёрстке в наше время.

Надеюсь, статья была тебе полезна, подписывайся на канал, ставь лайки - это ускоряет выход следующей статьи и мотивирует меня!