В последнем разделе вы узнали, как, даже если вы не знаете, что означают слова на странице, когда семантические элементы придают документу осмысленную структуру, другие — поисковая система, вспомогательные технологии, будущий сопровождающий, новый член команды — поймете суть документа.
В этом разделе вы познакомитесь со структурой документа; вы повторите элементы секционирования из предыдущего раздела; и разметьте схему вашего приложения.
Выбор правильных элементов для работы во время написания кода означает, что вам не придется рефакторить или комментировать 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>©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>©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> также является ориентиром, подразумевая, что он играет 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. Если вы хотите подчеркнуть текст, для этого есть семантические элементы. Мы рассмотрим это и заполним большую часть содержимого страницы, обсуждая основы работы с текстом; после более глубокого погружения в атрибуты.
Проверьте свое понимание
Проверьте свои знания рубрик и разделов.
Какой элемент используется для размещения области вашего сайта, включающей логотип или заголовок сайта, а также основную навигацию.
<heading><header><title> Сколько элементов <main> разрешено на странице?