Рубрики и разделы

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

В этом разделе вы познакомитесь со структурой документа; повторите элементы разделения на разделы из предыдущего раздела; и составите план вашего заявления.

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

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

Сайт <header>

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

Если вы не будете слишком задумываться над семантикой нашего заголовка, вы можете использовать такой код:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS позволяет (почти) любой разметке выглядеть правильно. Но использование несемантического тега <div> для всего на самом деле создает дополнительную работу. Чтобы с помощью CSS обращаться к нескольким тегам <div> , приходится использовать идентификаторы или классы для идентификации содержимого. Код также включает комментарий для каждого закрывающего </div> , указывающий, какой открывающий тег закрывал каждый </div> .

Хотя атрибуты id и class предоставляют возможности для стилизации и JavaScript, они не добавляют никакой семантической ценности для программ чтения с экрана и (по большей части) для поисковых систем.

Вы можете добавить атрибуты role для обеспечения семантики, необходимой для создания качественной объектной модели доступности (AOM) для программ чтения с экрана:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Это, по крайней мере, обеспечивает семантику и позволяет использовать селекторы атрибутов в CSS, но всё равно добавляет комментарии, указывающие, какой <div> закрывает каждый </div> .

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

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

В этом коде используются две семантические точки отсчета: <header> и <nav> .

Это основной заголовок. Элемент <header> не всегда является ориентиром. Его семантика зависит от места вложения. Когда <header> находится на верхнем уровне, он является banner сайта, играющим роль ориентира, что вы могли заметить в блоке кода role . Когда <header> вложен в <main> , <article> или <section> , он просто идентифицирует себя как заголовок для этого раздела и не является ориентиром.

Элемент <nav> идентифицирует контент как навигацию. Поскольку этот элемент <nav> вложен в заголовок сайта, он является основной навигацией для всего сайта. Если бы он был вложен в элемент <article> или <section> , он был бы внутренней навигацией только для этого раздела. Используя семантические элементы, вы создали осмысленную объектную модель доступности (AOM). AOM позволяет программе чтения с экрана информировать пользователя о том, что этот раздел представляет собой основной блок навигации, по которому он может либо перемещаться, либо пропускать его.

Использование закрывающих тегов </nav> и </header> устраняет необходимость в комментариях, указывающих, какой элемент закрывал каждый закрывающий тег. Кроме того, использование разных тегов для разных элементов устраняет необходимость в хуках id и class . Селекторы CSS могут иметь низкую специфичность ; вы, вероятно, можете использовать селекторы <header> для ссылок в header nav a без опасений конфликта.

Вы написали заголовок, содержащий очень мало HTML-кода, без классов и идентификаторов. При использовании семантического HTML в этом нет необходимости.

Сайт <footer>

Напишите код для нижнего колонтитула сайта.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Аналогично <header> , является ли нижний колонтитул ориентиром, зависит от того, где он вложен. Если это нижний колонтитул сайта, он является ориентиром и должен содержать необходимую информацию для каждой страницы, например, заявление об авторских правах, контактную информацию и ссылки на политику конфиденциальности и использования файлов cookie. Неявная role нижнего колонтитула сайта — contentinfo . В противном случае нижний колонтитул не имеет неявной роли и не является ориентиром, как показано на следующем скриншоте AOM в Chrome (где находится <article> с <header> и <footer> между <header> и <footer> ).

На этом скриншоте показаны два нижних колонтитула: один в <article> и один верхнего уровня. Нижний колонтитул верхнего уровня является ориентиром с неявной ролью contentinfo . Другой нижний колонтитул не является ориентиром. Chrome отображает его как FooterAsNonLandmark ; Firefox — как section .

Это не значит, что не следует использовать <footer> . Например, если у вас есть блог, вы можете использовать нижний колонтитул сайта с неявной ролью contentinfo . Каждая запись в блоге также может иметь <footer> . На главной странице вашего блога браузер, поисковая система и программа чтения с экрана знают, что основной нижний колонтитул является нижним колонтитулом верхнего уровня, и что все остальные нижние колонтитулы связаны с записями, в которые они вложены.

Если элемент <footer> является потомком элемента <article> , <aside> , <main> , <nav> или <section> , он не является ориентиром. Если же сообщение отображается отдельно, то в зависимости от разметки, этот элемент <footer> может быть выдвинут на более высокий уровень.

В нижних колонтитулах часто размещается контактная информация, заключенная в элемент <address> , содержащий адрес контактной информации. Название этого элемента не очень удачное; он используется для размещения контактной информации отдельных лиц или организаций, а не физических почтовых адресов.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Структура документа

Этот модуль начинается с элементов <header> и <footer> , поскольку они лишь иногда используются в качестве ориентиров (или «разделительных элементов»). Существует несколько более часто встречающихся разделительных элементов.

Макет, состоящий из заголовка, двух боковых панелей и нижнего колонтитула, известен как «святой Грааль» макета . Существует множество способов разметки такого контента, в том числе:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Если вы создаёте блог, у вас может быть серия статей в <main> :

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

При использовании семантических элементов браузеры могут создавать осмысленные деревья доступности. Это помогает улучшить навигацию для программ чтения с экрана. Здесь banner и contentinfo предоставляются через элементы <header> и <footer> сайта. Новые добавленные элементы включают <main> , <aside> и <article> ; а также <h1> и <nav> , которые вы использовали ранее, и <section> , который вы еще не использовали.

<main>

Имеется единственный элемент <main> , определяющий основное содержимое документа. На каждой странице должен быть только один <main> <main> .

<aside>

Раздел <aside> предназначен для контента, косвенно или опосредованно связанного с основным содержанием документа. Например, этот документ посвящен HTML. Для раздела о специфичности селекторов CSS для трех примеров заголовков сайта (div, role и semantic) косвенно связанный раздел <aside> может быть заключен в <aside> ; и, как и в большинстве случаев, <aside> скорее всего, будет представлен в боковой панели или всплывающем окне. Раздел <aside> также является ориентиром, выполняющим неявную роль complementary .

<article>

Вложенные в <main> элементы <article> были добавлены. В первом примере это не было необходимо, поскольку основное содержимое состояло всего из одного слова, или, в реальной жизни, представляло собой один раздел контента. Но если вы ведете блог, как во втором примере, каждая запись должна находиться в элементе <article> вложенном в <main> .

<article> Статья> представляет собой полный, или самодостаточный, раздел контента, который, в принципе, может быть использован повторно независимо. Представьте себе статью так же, как статью в газете. В печатном виде новостная статья о Джасинде Ардерн, премьер-министре Новой Зеландии, может появиться только в одном разделе, например, в разделе мировых новостей. На веб-сайте газеты та же новостная статья может появиться на главной странице, в разделе политики, в разделе новостей Океании или Азиатско-Тихоокеанского региона, а также, в зависимости от темы новостей, в разделах спорта, образа жизни или технологий. Статья также может появиться на других сайтах, таких как Pocket или Yahoo News!

<section>

Элемент <section> используется для обозначения общих, самостоятельных разделов документа, когда нет более конкретного семантического элемента для его обозначения. Разделы должны иметь заголовок, за редкими исключениями.

Возвращаясь к примеру с Джасиндой Ардерн, на главной странице газеты баннер будет содержать название газеты, за которым следует один элемент <main> , разделенный на несколько элементов <section> , каждый с заголовком, например, «Мировые новости» и «Политика»; и в каждом разделе вы найдете серию элементов <article> . Внутри каждого <article> вы также можете найти один или несколько элементов <section> . Если вы посмотрите на эту страницу, вся часть «заголовки и разделы» — это элемент <article> . Этот <article> затем разделен на несколько элементов <section> , включая site header , site footer и структуру документа. Сама статья имеет заголовок, как и каждый из разделов.

<section> не является ориентиром, если у него нет доступного имени; если оно есть, то неявная роль — region . Роли ориентиров следует использовать экономно, для идентификации более крупных разделов документа в целом. Использование слишком большого количества ролей ориентиров может создавать «шум» в программах чтения с экрана, затрудняя понимание общей структуры страницы. Если ваш <main> содержит два или три важных подраздела, включение доступного имени для каждого <section> может быть полезным.

Заголовки: <h1> - <h6>

Существует шесть элементов заголовков разделов: <h1> , <h2> , <h3> , <h4> , <h5> и <h6> . Каждый из них представляет один из шести уровней заголовков разделов, при этом <h1> является самым высоким или наиболее важным уровнем раздела, а <h6> самым низким.

Когда заголовок вложен в баннер документа <header> , он является заголовком приложения или сайта. Если он вложен в <main> , независимо от того, вложен ли он в <header> внутри <main> , он является заголовком этой страницы, а не всего сайта. Если он вложен в <article> или <section> , он является заголовком соответствующего подраздела страницы.

Рекомендуется использовать уровни заголовков аналогично уровням заголовков в текстовом редакторе: начиная с <h1> в качестве основного заголовка, с <h2> в качестве заголовков для подразделов и <h3> , если эти подразделы содержат разделы; избегайте пропуска уровней заголовков. Хорошая статья о заголовках разделов находится здесь.

Некоторые пользователи программ чтения с экрана используют заголовки для понимания содержимого страницы. Изначально заголовки предназначались для структурирования документа, подобно тому как MS Word или Google Docs могут создавать структуру на основе заголовков, но браузеры так и не реализовали эту структуру. Хотя браузеры отображают вложенные заголовки с постепенно уменьшающимся размером шрифта, как показано в следующем примере, они фактически не поддерживают структурирование.

Теперь у вас достаточно знаний, чтобы составить план сайта MachineLearningWorkshop.com:

Описание <body> сайта MLW.com

Это схема видимого контента сайта семинара по машинному обучению:

Поскольку ни один контент не является самостоятельным, завершенным произведением, <section> более уместен, чем <article> ; хотя у каждого есть заголовок, ни один раздел не достоин <footer> .

К этому моменту, наверное, и так понятно, но не используйте заголовки для выделения текста жирным шрифтом или крупным шрифтом; вместо этого используйте CSS. Если вы хотите выделить текст, для этого тоже есть семантические элементы. Мы рассмотрим это и заполним большую часть содержимого страницы по мере обсуждения основ работы с текстом, после более подробного изучения атрибутов.

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

Проверьте свои знания о заголовках и разделах.