Перейти к содержанию

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

Как правильно использовать элементы секционирования для придания смысловой нагрузки контенту.

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

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- 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) для устройств чтения с экрана:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- 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 -->
    </div>
</div>

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

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

1
2
3
4
5
6
7
8
9
<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 в этом нет необходимости.

Закодируем футер сайта.

1
2
3
4
5
6
<footer>
    <p>
        &copy;2022 Machine Learning Workshop, LLC. All
        rights reserved.
    </p>
</footer>

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

Объектная модель доступности в Chrome.

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>, поскольку они уникальны тем, что лишь иногда являются значащими, или "секционирующими", элементами. Давайте рассмотрим элемент секционирования "по полной программе", обсудив наиболее распространенные макеты страниц:

Макет с верхним колонтитулом, тремя колонками и нижним колонтитулом

Макет с верхним колонтитулом, двумя боковыми колонками и нижним колонтитулом называется holy grail layout. Существует множество способов разметки этого содержимого, в том числе:

1
2
3
4
5
6
7
<body>
    <header>Header</header>
    <nav>Nav</nav>
    <main>Content</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
</body>

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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> является ориентиром с неявной ролью complementary.

<article>

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

Статья <article> представляет собой законченный, или самодостаточный, раздел содержимого, который, в принципе, можно использовать независимо друг от друга. Думайте о статье так же, как о статье в газете. В печатном виде статья о Джасинде Ардерн, премьер-министре Новой Зеландии, может появиться только в одном разделе, возможно, в разделе мировых новостей. На сайте газеты эта же статья может появиться на главной странице, в разделе "Политика", в разделе новостей Oceana или Asia Pacific, а также, в зависимости от темы новости, в разделах "Спорт", "Стиль жизни" или "Технологии". Статья может появиться и на других сайтах, например, на 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

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

Обратите внимание

Этот фрагмент кода включает только содержимое <body>. Ранее были рассмотрены <!doctype>, <html>, <body> и метаинформация.

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

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

Комментарии