Семантика HTML-элементов.

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

Что такое "Семантика"

Согласно Википедии семантика - раздел лингвистики, изучающий смысловое значение единиц языка. Когда мы говорим о семантике HTML-элементов страницы имеется ввиду дополнительный смысл этого элемента.

В стандарте HTML существует большое количество семантических элементов, т.е. элементов которые добавляют дополнительный смысл содержащемуся внутри контенту. Эти элементы используются не для оформления внешнего вида страницы, а для описания структуры и роли контента. Благодаря этому HTML-документ становится понятнее не только для разработчиков, но и для программ, которые его анализируют: браузеров, поисковых систем и вспомогательных технологий (например, экранных читалок).

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

Рассмотрим простой пример. Заголовок страницы можно оформить так:

<div style="font-size: 32px; font-weight: bold;">
  Заголовок страницы
</div>
html

Визуально результат будет похож на заголовок. Однако с точки зрения семантики это всего лишь обычный контейнер <div>, который не сообщает никакой информации о роли этого текста. Для правильного, семантического варианта, необходимо использовать тег <h1>:

<h1>Заголовок страницы</h1>
html

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

Зачем нужна семантическая верстка

Использование семантических элементов даёт сразу несколько важных преимуществ:

• Читаемость кода - по HTML-разметке легко понять структуру страницы.
• Поисковая оптимизация (SEO) - поисковые системы лучше понимают содержимое страницы и его иерархию.
• доступность (accessibility) - людям, использующим скрин-ридеры и другие устройства, гораздо проще ориентироваться на странице.
• Поддержка и развитие проекта - семантически правильный код легче изменять и масштабировать.

Семантические и несемантические элементы

Мы уже встречались с семантическими и несемантическими элементами.

Несемантические элементы не описывают смысл контента, а служат универсальными контейнерами. Это известные нам <div> и <span>.

Семантические элементы явно указывают роль содержимого:

• <header> - хедер страницы, как правило переиспользуемый блок, содержаший навигацию и какие-либо другие общие для всех страниц элементы
• <nav> - блок с навигацией - ссылками на другие страницы сайта.
• <main> - основной контент страницы.
• <section> - используется для обозначения логического раздела контента внутри страницы или другого блока
• <article> - предназначен для логически завершённого блока контента, который может существовать независимо от остальной страницы.
• <aside> - используется для контента, который связан с основным, но не является его ключевой частью.
• <footer> - футер страницы - переиспользуемый блок со ссылками, правовой информацией и т.д.
• <h1>–<h6> - заголовки различного уровня с 1 по 6.
• <p> - параграф внутри блока
• <strong>, <em> и другие

Таким образом, семантическая верстка — это подход, при котором HTML-элементы выбираются не по принципу «как удобнее стилизовать», а по принципу «какой смысл несёт этот контент». Другими словами, при создании HTML документов нужно стремиться к тому, чтобы если убрать все стили CSS, структура и смысл страницы всё равно должны быть понятны.

Это заключительный урок модуля. Мы рассмотрели только самые базовые основы HTML. Мы не углублялись во многие аспекты, но этих знаний достаточно, чтобы пойти дальше. Теперь перейдем к следующему модулю, где подробнее поговорим о CSS.