Заголовки и разделы

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

В этом разделе вы узнаете о структуре документа, повторите элементы разделов из предыдущего раздела и разметите макет для своего приложения.

Выбор правильных элементов для работы при написании кода означает, что вам не придется рефакторить или комментировать свой 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> для всего на самом деле создает дополнительную работу. Чтобы настроить таргетинг на несколько элементов <div> с помощью CSS, вам нужно использовать идентификаторы или классы для определения контента. Код также содержит комментарий для каждого закрывающего тега </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 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>, он не считается ориентиром. Если запись показывается отдельно, то в зависимости от разметки нижний колонтитул может быть продвинут.

В нижнем колонтитуле часто размещается контактная информация, заключенная в элемент <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 и семантический) косвенно связанная врезка может содержаться в <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 Документах, но браузеры так и не реализовали эту структуру, и предложенный алгоритм был удален из спецификации HTML. Раньше браузеры показывали элементы <h1>, вложенные в элементы разделов, меньшим шрифтом, но в современных браузерах эти стили по умолчанию удалены и автоматическое структурирование документов не поддерживается.

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

Обрисовка <body> MLW.com

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

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

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

Проверьте себя

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