На первый взгляд написание HTML может показаться незатейливым делом - всего несколько div, таблица и заголовок. Однако построение семантического скелета страницы может быть затруднено, особенно если вы хотите выполнить эту задачу в соответствии со спецификацией языка. Сегодня я пишу о том, почему стоит заморачиваться с его правильным использованием и привожу примеры из жизни и из взятой документации.
Семантический HTML
Из его документации ясно, что HTML является языком семантической разметки. В спецификации HTML LS мы можем прочитать:
«Элементы, атрибуты и значения атрибутов в HTML определены (этой спецификацией) как имеющие определенные значения (семантика). Например, элемент ol представляет собой упорядоченный список, а атрибут lang — язык содержимого».
Вышеизложенное в кратком изложении означает, что теги HTML и их атрибуты предназначены для передачи семантического значения. Для перевода: элемент <ol> открывает упорядоченный список, а элемент <lang> представляет язык, используемый на странице.
Основные теги HTML
Поскольку мы уже знаем, что теги несут смысл (в большинстве случаев), давайте проверим, какие теги HTML предлагает на выбор. Скажу сразу, что их так много, что перечислить все невозможно в одной статье. Ниже я расскажу только о тех, которые используются чаще всего.
HTML-элементы можно разделить на блочные и линейные элементы. Блочные элементы отображаются на новой строке и занимают всю ширину строки, что означает, что последующие элементы также будут отображаться на новой строке под блочным элементом. С другой стороны, линейные элементы никоим образом не нарушают организацию других элементов, а ширина пространства, необходимого для линейного элемента, равна ширине содержимого элемента.
Абзац <p>
Это блок текста, отделенный по вертикали полями от других блоков. Его можно использовать как дочерний элемент, например, в статье <article> или разделе <section>. Поскольку он на самом деле не всегда определяет содержащийся в нем контент, его стоит иногда заменять другим тегом, если это возможно, например, указав дату публикации контента в блоге, заменить <p>2022-01-20 09:00:00</p> на <time>2022-01-20 09:00:00</time>.
Заголовки <h1>, <h2>,…, <h6>
Как и здесь, в статье, вы можете расположить заголовки на каждой странице. Если на страницу не добавлены внешние стили, браузеры все равно будут отличать обычный текст от заголовка, заголовок первого уровня от заголовка второго уровня и т.д. и будут отображать их, например, другим размером шрифта или полужирным шрифтом. Следует отметить, что заголовки должны указывать на важность данного заголовка, т.е. недопустимо использовать тег <h3> только для того, чтобы выделить текст жирным шрифтом.
Ссылки <a>
Гиперссылки или якоря — это ворота в другие виртуальные места. Поместите адрес назначения в атрибут [href] и... вуаля! Также стоит обратить внимание на атрибут [target], который предлагает, прежде всего, возможность заставить браузер открыть ссылку в новой вкладке. Элемент <a> является линейным элементом.
Упорядоченные и неупорядоченные списки <ol> и <ul>
Упорядоченный список и неупорядоченный список — это два способа упорядочить содержимое путем его перечисления. Упорядоченный список представляет свои дочерние элементы в пронумерованной форме, а неупорядоченный список отображает точки. Внутренние теги, которые должен содержать каждый список, это <li>, то есть элемент списка.
Картинки <img>
Картинки обычно встраиваются с помощью тега <img>, для чего необходимо указать значение атрибута [src], т.е. source с путем к файлу изображения. Важным атрибутом также является [alt], то есть текст, который отображается, когда изображение не загружается и читается программами чтения с экрана.
Навигация <nav>
Элемент, содержащий ссылки, используемые для навигации между содержимым на странице (или за ее пределами), представленные в виде списка.
Заголовок <header>
Элемент заголовка часто включает в себя тег с заголовком определенной степени <h1> - <h6>, но не обязательно. Его можно использовать для упаковки оглавления раздела, формы или логотипа.
Нижний колонтитул <footer>
Колонтитул можно использовать в качестве завершающего элемента для всего HTML-документа, но он также может быть в любом разделе или статье.
Блочный элемент <div>
Это универсальный контейнер содержимого, который не влияет на отображение содержимого (до тех пор, пока оно не будет оформлено). Если возможно, замените его другим значимым тегом.
Линейный элемент <span>
Как и <div>, <span> — это контейнер для содержимого, который не влияет на способ его отображения, за исключением того, что span является линейным элементом. Однако это может быть полезно, например, для целей стилизации.
Комментарии в коде <!- Текст комментария ->
Комментарии невидимы для посетителя сайта (пока он не откроет исходный код страницы), но это полезный элемент для других людей, которым будет интересен исходный код.
Тег имеет значение
Как видно из приведенного выше абзаца, всегда имеет значение, какие теги мы будем использовать. На базовом уровне это означает, что, если я хочу разместить статью на своем веб-сайте (например, содержание сообщения в блоге), я буду использовать тег <article> вместо тега <div>, который не имеет особого значения.
Элемент <div> описан авторами спецификации HTML как тег, который следует использовать в крайнем случае, когда вы не можете использовать другой тег со значением, такой как <nav> или <section> для элементов навигации. Точно так же сам элемент <span> ничего не значит, он просто оборачивает некоторый контент или дочерние элементы.
Бывает, что элементы имеют определенные ограничения, например ограничение количества его вхождений в структуру документа до одного. Примером таких тегов является <main> - тэг, указывающий основное содержимое страницы, который можно использовать только один раз на странице. То же самое относится и к заголовку верхнего уровня, т. е. <h1>, но здесь ситуация довольно запутанная, поэтому заголовкам ниже я посвящаю отдельный абзац.
Картинка стоит тысячи слов
Использование правильных тегов — это только начало. Оказывается, эти подходящие теги иногда нужно оборачивать в другие подходящие теги. Так обстоит дело, когда в структуру документа включена иллюстрация (картинка, которая что-то значит и выполняет не только эстетическую роль). Тег <img> должен быть окружен элементом <figure>, который также может содержать <figcaption> с описанием рисунка. В этом случае структура фрагмента, отвечающего за отображение изображения, будет выглядеть так:
<figure>
<img src='/content/img.jpg' alt='Название картинки'>
<figcaption>Надпись под изображением</figcaption>
</figure>
В таком случае может показаться, что одновременное использование [alt] и <figcaption> будет излишним. Если содержимое дублируется, атрибут [alt] можно оставить пустым.
Заголовки
Заголовки могут быть проблемой для веб-разработчиков - за прошедшие годы было несколько интерпретаций того, как правильно размещать их в HTML, но в конечном итоге и официально применяется единственная правильная директива. В ней говорится, что заголовки ранжируются от <h1> до <h6>, где <h1> является основным заголовком сайта и может появляться на странице только один раз, а каждый последующий семантически менее важен, чем заголовок более высокого уровня. Заголовки оцениваются последовательно, поэтому за <h3> должен следовать <h4>, а не, например, <h6> или <h2>.
Самый простой способ представить структуру заголовков — это оглавление, где заголовки <h3> являются подразделами для <h2> и т.д. Также следует помнить, что каждая статья или раздел должны иметь собственный заголовок.
Для чего все это нужно?
Я мог бы бесконечно перечислять правила для каждого элемента, потому что в основном написание семантического HTML сводится к использованию его в соответствии со спецификацией. Только это и многое другое. У меня впереди долгий путь, наполненный изучением HTML, хотя до недавнего времени мне казалось, что я буду изучать только тонкости JavaScript. Вопрос о правомерности правильного использования HTML возникает сам собой. Так почему же?
- Позиционирование.
Индексирующие роботы, которые используются для сбора информации о веб-сайтах, обращают внимание на семантику веб-сайта. В дополнение к тому, что было описано выше, вы также можете добавить на страницу дополнительные семантические метаданные, чтобы положительно повлиять на правильное позиционирование. Как известно, чем выше позиция в результатах поиска, тем больше посетителей получает сайт. - Доступность.
Семантический HTML чрезвычайно важен для людей, использующих программы чтения с экрана. Экранные считыватели — это программы, которые читают вслух элементы страницы и позволяют перемещаться с помощью клавиатуры между определенными элементами страницы. Считыватели получают свои знания о содержании страницы из тегов, используемых в ее структуре. Поэтому, если деление на статьи или структура заголовков описаны неправильно, человек, использующий читалку, не сможет перейти в нужное место на странице.
Стоит отметить, что все больше людей используют вспомогательные технологии и поэтому, пренебрегая правильным использованием семантики HTML, вы можете значительно сократить количество людей, которые дойдут до вашего контента. Как видите, правильное написание окупается. Поэтому стоит рассмотреть вопрос изучения и применения семантического HTML.
