Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Теперь, когда мы рассмотрели основы структуры страницы и элементы HTML5, которые помогут в этой области, пришло время приступить к созданию частей нашей страницы, которые будут содержать содержимое.
Начнем сверху, с элемента header Здесь имеет смысл включить логотип и название The Herald , а также слоган. Мы также можем добавить элемент nav
После header Хотя у вас может возникнуть соблазн использовать для них элементы section Если бы каждый столбец содержал отдельный «раздел» информации (например, раздел о спорте и раздел о развлечениях), это имело бы смысл. Тем не менее, в действительности разделение на столбцы — это только визуальное расположение, поэтому мы будем использовать простой старый div
Внутри этих div это, конечно, идеальные кандидаты на элемент article
Тем не менее, в крайнем правом столбце в дополнение к статье содержатся три объявления. Мы будем использовать дополнительный элемент, чтобы обернуть рекламу, при этом каждое объявление будет размещено внутри элемента aside Это может показаться странным, но оглянитесь на описание article
Далее мы добавим еще один элемент article Эта последняя статья будет исключена из дополнительного элемента, который содержит три объявления. Чтобы быть в articleaside Это не так: эта статья является частью основного контента страницы, поэтому было бы неправильно включать ее в aside
Теперь третий столбец состоит из двух элементов: articleaside Чтобы удержать их вместе и сделать их проще в стиле, мы завернем их в aside Мы не используем articledivsection Это не так — это просто особенность нашего дизайна, когда они оказываются в одной колонке вместе.
Новый article
На данный момент, вероятно, самое время представить еще один важный структурный элемент, который был представлен в HTML5: aside Этот элемент изначально не был частью спецификации HTML5, но был добавлен с момента публикации первого издания этой книги.
К сожалению, определить main Но давайте начнем с того, откуда возник этот элемент. В некоторых HTML-документах разработчики оборачивали свой основной контент в общий элемент, например так:
main
Обратите внимание на общий элемент main<body> <header> ... </header>
<div id="main"> ... </div>
<footer> ... </footer>
</body>div Обратите также внимание на атрибут ID со значением header В дополнение к этому многие разработчики добавили footer
"main"
Мы не будем вдаваться в подробности ARIA здесь — это описано в Приложении B — но в основном новый role
Спецификация W3C определяет <div id="main" role="main"> ... «
</div>main Основная область контента состоит из контента, который напрямую связан с центральной темой документа или центральной функциональностью приложения ».
Спецификация WHATWG определяет его аналогично; однако, у этих двух спецификаций очень разные определения. Спецификация WHATWG гласит :
«Нет ограничений по количеству
mainДействительно, во многих случаях было бы целесообразно иметь несколькоmainНапример, странице с несколькими элементамиmain
Но нехарактерно, в полном противоречии с этим, спецификация W3C гласит:
«Авторы не должны включать в документ более одного
mainАвторы не должны включатьarticlemainmainarticleasidefooter
Кроме того, спецификация W3C добавляет рекомендацию использовать атрибут headernavrole="main" Обладая этими знаниями, мы собираемся принять рекомендацию W3C и использовать только один main
Возвращаясь к нашей разметке Herald , вот как это будет выглядеть после того, как мы добавили mainmain
main
Как видите, body<body> <header> ... </header> <main role="main">
</main> <footer> ... </footer> <script src="js/scripts.js"></script>
</body>main Внутри headerHTML5 Herald .
Последняя часть нашего макета, которую мы рассмотрим здесь, это нижний колонтитул, который вы можете увидеть на скриншоте The Herald в его традиционном расположении — внизу страницы. Поскольку нижний колонтитул содержит несколько различных фрагментов контента, каждый из которых образует автономную и тематически связанную единицу, мы разделили их на элементы footer Информация об авторе будет формироваться в одном mainsection Тогда есть еще один section
Давайте добавим новые элементы на нашу страницу, чтобы мы могли видеть, где находится наш документ:
sectionвsectionв<body> <header> <nav></nav> </header> <main role="main"> <div class="primary"> <article></article> </div> <div class="secondary"> <article></article> </div> <div class="tertiary"> <aside> <article></article> </aside> <article> </article> </div> </main><!-- main --> <footer> <section id="authors"> <section></section> </section> <section id="copyright"> </section> </footer> <script src="js/scripts.js"></script> </body>
На рисунке ниже показан снимок экрана, на котором показана наша страница с некоторыми метками, обозначающими основные структурные элементы, которые мы использовали.
Теперь у нас есть структура, которая может служить прочной основой для содержания нашего веб-сайта.
Примечание: что делать, если я использую не тот элемент?
Хотя иногда бывает сложно запоминать, какие элементы использовать в каких ситуациях, мы рекомендуем вам избегать стрессов или тратить слишком много времени на принятие решений по семантике. Хотя хорошо быть последовательным, есть несколько последствий от использования неправильных элементов. Если ваши страницы доступны, вот что важно. Конечно, есть случаи, когда правильный семантический элемент будет полезен для доступности, поэтому мы рекомендуем вам изучить это и убедиться, что ваш выбор элемента не сделает ваши страницы недоступными. Хорошее место для начала может быть HTML5 Accessibility или The Accessibility Project.
Завершение дела
Вот именно для этой главы. Мы изучили некоторые основы структуры контента в HTML5 и начали создавать наш пример проекта, используя полученные знания.
В следующей главе мы более подробно рассмотрим содержимое HTML5 и продолжим добавлять семантику на нашу страницу, когда будем иметь дело с некоторыми другими элементами, доступными в HTML5.