Давайте станем... семантическими!

СЕРИЯ HTML: Семантический HTML

Что такое HTML?

HTML расшифровывается как HyperText Markup Language. Мне потребовалось некоторое время, чтобы понять, что HTML на самом деле НЕ является языком программирования. Это язык разметки.

Вот как MDN Web Docs определяет HTML:

В наших HTML-файлах мы структурируем страницу, оборачивая HTML-теги вокруг содержимого, как в примере с MDN Web Docs. Имея на месте структуру HTML, мы можем затем сделать суперкрутые стили в CSS (каскадные таблицы стилей) и добавить функциональность и пользовательскую интерактивность с помощью JavaScript.

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

Это приводит меня к тому, что называется Semantic HTML. Звучит модно, да? Но что значит "семантический"? Для этого я обращусь к словарю. Вот как Merriam-Webster определяет семантический:

Семантика - это все о СМЫСЛЕ! Смысл жизни! Смысл любви! Или, в нашем случае, смысл содержимого, которое мы заворачиваем в наши HTML-теги. Мы можем и должны использовать семантические теги HMTL для описания содержимого, которое мы помещаем между открывающими (< >) и закрывающими (</>) тегами.

Ладно, хватит разговоров. Давайте разберем пример!

Вот простой макет страницы, который я создал о растении-змее.

А вот HTML-код, который я написал для создания этой страницы.

Как вы можете видеть, большая часть моего содержимого обернута в очень популярные теги div, а также некоторое содержимое обернуто в теги h1-h3 и p.

Мой код технически исправен, работает и создал веб-страницу, которую я показал вам выше, но есть одна маленькая проблема.

Что не так с моим кодом?

Если вы догадались, что моему коду не хватает семантического HTML (ака смысла), то вы угадали правильно!

Несмотря на то, что теги div - это привычный и простой способ обернуть содержимое, <div> </div> на самом деле не имеет семантического смысла.

Вот как MDN Web Docs описывает div:

GENERIC. Мы не хотим, чтобы наш контент был завернут в "универсальность". Давайте вместо этого добавим несколько семантических тегов.

Вот как я переписал свой код. Тот же контент, но с семантическим HTML.

Вместо того чтобы обернуть нужные мне элементы, сгруппированные вместе, в теги div, я обернул связанное содержимое в семантические HTML-теги, такие как: header, article, figure, ul (неупорядоченный список), li (элемент списка) и footer, чтобы добавить смысл в структуру моего HTML-файла.

Теперь мой код не только звучит, работает и отображается на странице точно так же, как мой предыдущий код, но и наполнен смыслом.

Вот 4 преимущества использования семантического HTML:

1. Он помогает вам быть организованным: Теперь, когда вы обращаетесь к своему HTML-документу, вам не нужно просматривать море div'ов, чтобы найти конкретное содержимое. Вы знаете, что содержимое заголовка находится в заголовке, содержимое статьи - в статье, а содержимое нижнего колонтитула - в нижнем колонтитуле.
2. Это помогает другим разработчикам понять ваш код: Когда ваш код структурирован со смыслом, другой разработчик может легко понять ваш код.
3. Это помогает тем, кому нужны программы для чтения с экрана: Мы хотим сделать нашу веб-страницу доступной для всех. Семантический HTML помогает программам для чтения с экрана разбивать структуру вашей веб-страницы, чтобы передать ее содержание людям с нарушениями зрения.

4. Это делает нашу страницу более привлекательной с точки зрения SEO (поисковой оптимизации): Поисковые системы смогут понять смысл нашей страницы, что сделает ее более привлекательной и открываемой для пользователей. (*Больше об этом в другой статье блога).

Существует множество семантических HTML-тегов, которые необходимо изучить. Узнайте больше на Mozilla Web Docs.

Продолжая свой путь кодирования, не забывайте наполнять HTML смыслом. Счастливого кодирования!