Новые семантические HTML5-элементы
В имеющемся у меня словаре семантике дается следующее определение: «раздел языкознания, изучающий содержание, информацию, передаваемые языковыми единицами». В нашем случае семантика — это процесс придания значения нашей разметке. Почему это важно? Я рад, что вы спросили. Взгляните на структуру текущей разметки сайта And the winner isn’t.:
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="navigation">
<ul>
<li><a href="#">Why?</a></li>
</ul>
</div>
</div>
<!— содержимое —>
<div id="content">
</div>
<!— врезка —>
<div id="sidebar">
</div>
<!— нижний колонтитул —>
<div id="footer">
</div>
</div>
</body>
Большинство специалистов, занимающихся написанием разметки, заметят общие соглашения по идентификационным именам используемых элементов <div> — header, content, sidebar и т. д. Однако, взглянув на сам код, любой пользовательский агент (браузер, экранный диктор, поисковый робот и др.) не сможет наверняка сказать, в чем заключается назначение каждого раздела <div>. HTML5 стремится решить эту проблему с помощью новых семантических элементов.
Элемент <section>
Элемент <section> используется для определения универсального раздела документа или приложения. Например, вы можете захотеть разбить на части имеющееся у вас содержимое; один раздел будет служить для контактных данных, другой — для новостных лент и т. д. Важно понимать, что элемент <section> не предназначен для использования в целях стилизации. Если вам потребуется заключить тот или иной элемент во что-то просто для стилизации, то продолжайте использовать <di v>, как делали это раньше.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#thesection-element вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <section>.
Элемент <nav>
Элемент <nav> используется для определения главных навигационных блоков — ссылок на другие страницы или части в рамках конкретной страницы. Этот элемент не предназначен для использования лишь в нижних колонтитулах (хотя может) и т. п., где группы ссылок на другие страницы являются обычным делом.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#the-navelement вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <nav>.
Элемент <article>
Элемент <article> вместе с <section> могут легко привести к путанице. Мне, в частности, пришлось прочитать, а затем перечитать спецификации, касающиеся каждого из этих элементов, прежде чем до меня все дошло. Элемент <article> используется для обособленной части содержимого. При структурировании страницы задайтесь вопросом: можно ли будет взять все содержимое целиком, которое вы намереваетесь поместить в тег <article>, и вставить его в другой сайт, чтобы при этом оно осталось абсолютно понятным? Здесь можно рассуждать и по-другому: будет ли содержимое, расположенное в <article>, в действительности представлять собой отдельную статью в RSS-ленте? Наглядным примером содержимого, которое следует заключать в элемент <article>, является блог-пост. Знайте, что при вложении элементов <article> предполагается, что такие вложенные элементы будут связаны с внешним <article>.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#thearticle-element вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <article>.
Элемент <aside>
Элемент <aside> используется для второстепенного по значению контента. На практике я часто применяю его для добавления врезок (когда они включают соответствующее содержимое). Он также считается подходящим для размещения цитат, рекламы и групп навигационных элементов (вроде списков ссылок на другие блоги и т. д.).
СОВЕТ:
Что еще говорится в спецификации HTML5 консорциума W3C об элементе <aside>, вы сможете узнать по адресу http://dev. w3.org/html5/spec/Overview. html#theaside-element.
Элемент <hgroup>
Если у вас имеется несколько заголовков, слоганов и подзаголовков в <h1>, <h2>, <h3> и последующих тегах, то рассмотрите возможность заключить их в тег <hgroup>. Сделав это, вы скроете вторичные элементы от алгоритма определения иерархической структуры HTML5, в результате чего только первый заголовочный элемент в <hgroup> будет «участвовать» в иерархической структуре документа.
Алгоритм определения иерархической структуры HTML5. HTML5 позволяет каждому контейнеру иметь свою отдельную иерархическую структуру. Это означает, что больше не нужно постоянно думать о том, на каком уровне тега <header> вы находитесь. Например, в блоге я могу сделать так, чтобы для размещения названий моих постов использовался тег <h1>, как и для размещения названия самого блога. В качестве примера взгляните на следующую структуру:
<hgroup>
<h1>Ben’s blog</h1>
<h2>All about what I do</h2>
</hgroup>
<article>
<header>
<hgroup>
<h1>A post about something</h1>
<h2>Trust me this is a great read</h2>
<h3>No, not really</h3>
<p>See. Told you.</p>
</hgroup>
</header>
</article>
Несмотря на наличие нескольких заголовков <h1> и <h2>, иерархическая структура по-прежнему будет выглядеть так:
О Ben’s blog
• A post about something
Вам не нужно отслеживать тег <header>, который требуется использовать. Вы можете просто выбрать любой уровень тега <header> в каждом из разделов, и алгоритм определения иерархической структуры HTML5 выполнит соответствующее упорядочение.
Можете проверить иерархическую структуру своих документов с помощью специальных инструментов, располагающихся по следующим адресам:
О http://gsnedders. html5.org/outliner/;
О http://hoyois. github.com/html5outliner/.
На рисунке 4.1 показана страница HTML5 Outliner.
Страница HTML5 Outliner
СОВЕТ:
Что еще говорится в спецификации HTML5 консорциума W3C об элементе <hgroup>, вы сможете узнать по адресу http://dev. w3.org/html5/spec/Overview. html#thehgroup-element.
Элемент <header>
Элемент <header> не задействуется при выполнении алгоритма определения иерархической структуры, поэтому не может использоваться для секционирования содержимого. Вместо этого его следует применять для введения в содержимое. На практике элемент <header> может использоваться в «шапке» верхнего колонтитула сайта, а также для введения в другое содержимое, например то, что располагается в элементе <article>.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#theheader-element вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <header>.
Элемент <footer>
Как и <header>, элемент <footer> не задействуется при выполнении алгоритма определения иерархической структуры, поэтому не может использоваться для секционирования содержимого. Вместо этого его следует применять для размещения информации о разделе, в котором он располагается. Элемент <footer> может содержать, например, ссылки на другие документы или информацию об авторских правах. Как и <header>, он может неоднократно задействоваться в рамках страницы, если потребуется. Скажем, его можно использовать для размещения нижнего колонтитула блога, а также нижнего колонтитула в <article> блог-поста. Однако в спецификации HTML5 отмечается, что контактные данные автора того или иного блог-поста следует заключать в элемент <address>.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#thefooter-element вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <footer>.
Элемент <address>
Элемент <address> предназначен конкретно для размещения контактных данных для своего ближайшего предшествующего элемента <article> или <body>. Чтобы не запутаться, помните, что элемент <address> не используется для размещения почтовых адресов и т. п., если только они в действительности не являются контактными адресами, которые относятся к соответствующему содержимому. Вместо этого почтовые адреса и прочие произвольные контактные данные следует заключать в старые добрые теги <p>.
СОВЕТ:
По адресу http://dev. w3.org/html5/spec/Overview. html#theaddress-element вы сможете узнать, что говорится в спецификации HTML5 консорциума W3C об элементе <address>.
Добавить комментарий