У меня в школе был весьма придирчивый (но все же очень хороший) учитель ма-тематики. Случалось, что он не приходил на занятия, и тогда весь класс облегчен-но вздыхал, поскольку те, кто подменял «Мистера Придирчивость», обычно ока-зывались покладистыми и добродушными людьми, которые ладили с нами без
криков и постоянной нервотрепки. Они не настаивали на тишине, пока мы зани-мались делом, и не очень беспокоились насчет того, насколько аккуратно выгля -дели наши решения задач в тетрадях. Для них были важны лишь ответы. Если бы
1
Для русскоязычных сайтов подходящей будет кодировка windows-1251. — Примеч. ред.
4.2. Как писать HTML5-страницы 119
HTML5 был учителем математики, то его можно было представить вот таким до-бродушным временным заместителем постоянного учителя. Я поясню эту причуд-ливую аналогию…
Если вы обратите внимание на то, как пишете код, то заметите, что в основном
используете нижний регистр, заключаете значения атрибутов в кавычки и объяв -ляете type для сценариев и таблиц стилей. Например, вы могли бы указать ссылку
на таблицу стилей так:
<link href="CSS/main.css" rel="stylesheet" type="text/css" />
HTML5 не требует такой детальности и позволяет указать все это следующим
образом:
<link href=CSS/main.css rel=stylesheet >
Знаю, знаю. Мне это тоже кажется странным. Нет закрывающего тега/слеша,
кавычек вокруг значений атрибутов и объявления type. Однако добродушному
HTML5 все равно. Второй пример будет таким же валидным, как и первый.
Подобный нестрогий синтаксис допускается во всем документе, а не только
в отношении привязываемых CSS -файлов и JavaScript -элементов. Например, если
хотите, можете указать <div> следующим образом:
<div id=wrapper>
Это абсолютно валидный HTML5-код. Аналогичным образом дело обстоит и со
вставкой изображений:
<img SRC=frontCarousel.png aLt=frontCarousel>
Это тоже валидный HTML5-код. Никакого закрывающего тега/слеша, кавычек
и комбинации символов в верхнем и нижнем регистрах. Вы даже можете пренебречь
открывающим тегом <head>, и ваша страница все равно сможет пройти валидацию.
Что обо всем этом «сказал» бы XHTML 1.0!
Разумный подход к написанию HTML 5-разметки
Несмотря на то что при работе с нашими адаптивными веб-страницами и дизайна -ми мы стремимся придерживаться принципа «сперва проектируем для мобильной
платформы», я не могу перестать думать о создании наиболее оптимальной раз-метки (здесь я руководствовался стандартами разметки XHTML 1.0, которые под- XHTML 1.0, которые под- 1.0, которые под -разумевают XML-синтаксис). Да, мы можем сделать наши страницы чуть меньше
по объему благодаря эффекту экономии, который достигается при использовании
HTML5, однако, откровенно говоря, если потребуется, то я лучше уберу из дизай- 5, однако, откровенно говоря, если потребуется, то я лучше уберу из дизай -на то или иное изображение, чтобы добиться экономии!
Мне кажется, что ради удобочитаемости кода все же стоит печатать дополни -тельные символы (слеши в конце и кавычки вокруг значений атрибутов). Поэтому
при написании HTML5-документов я стремлюсь выбирать нечто среднее между
старомодным стилем создания разметки (который обеспечивает валидную разметку
с точки зрения HTML5, хотя валидаторы/инструменты для проверки соответствия
120 Глава 4. HTML5 для адаптивных веб-дизайнов
могут выдавать предупреждающие со общения) и эффектом экономии, который
дает HTML5. Например, если говорить о ссылке на таблицу стилей CSS , которая
приводилась чуть ранее, то для нее я бы написал следующий код:
<link href="CSS/main.css" rel="stylesheet"/>
Я сохранил закрывающий тег и кавычки, но исключил атрибут type. Здесь
важно подчеркнуть, что вы можете сами определить, какой именно уровень вас
устраивает. HTML5 не станет кричать на вас, демонстрировать вашу разметку
перед всем классом и ставить вас в угол за то, что она не проходит валидацию.
Приветствуем великий тег <a>
Еще одна особенность HTML5, которая обеспечивает реальную экономию, состо- HTML5, которая обеспечивает реальную экономию, состо- 5, которая обеспечивает реальную экономию, состо-ит в том, что теперь мы наконец-то можем заключать в тег <a> множественные эле -менты. Раньше, если вы хотели, чтобы ваша разметка смогла пройти валидацию,
приходилось заключать каждый элемент в его собственный тег <a> . Например,
взгляните на следующий фрагмент кода:
<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the home page</a></p>
<a href="index.html"><img src="home-image.png" alt="home-slice" /></a>
Однако мы можем убрать все индивидуальные теги <a> и взамен расположить
группу элементов так, как показано в приведенном далее фрагменте кода:
<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="home-slice" />
</a>
Однако следует иметь в виду, что, как вполне понятно, нельзя заключать один
тег <a> в другой тег <a>, а также нельзя заключать <form> в тег <a>.
Устаревшие HTML -функции
Существуют атрибуты HTML, к использованию которых вы, возможно, привыкли,
но теперь они считаются устаревшими в HTML5. Важно осознавать, что есть два
«лагеря» устаревших параметров в HTML5: соответствующие и не соответству -ющие требованиям. Соответствующие требованиям элементы по-прежнему смогут
работать, однако валидаторы будут генерировать предупреждающие сообщения.
Вам следует избегать их применения на практике, если это возможно, однако не-беса не рухнут, если вы все же добавите их в разметку. В определенных браузерах
параметры, не соответствующие требованиям, будут обработаны, однако их ис-пользование считается весьма скверной практикой и может иметь отрицательные
последствия!
Примером устаревшего, но соответствующего требованиям параметра является
атрибут border, который указывается в теге <img>. Исторически он применялся для
4.3. Новые семантические HTML5-элементы 121
того, чтобы вокруг изображений не выводилась рамка синего цвета, если они вло -жены в ссылку. Например, взгляните на следующий код:
<img src="frontCarousel.png" alt="frontCarousel" border="0" />
Вместо этого для обеспечения аналогичного эффекта я рекомендую вам исполь-зовать CSS .
Устаревших и не соответствующих требованиям параметров довольно много.
Признаюсь, мне не доводилось использовать многие из них (а с некоторыми
я даже ни разу не сталкивался!). Возможно, в вашем случае все сложится похожим
образом. Однако если вам интересно, то вы сможете найти полный список уста -ревших и не соответствующих требованиям элементов и атрибутов по адресу
http://dev.w3.org/html5/spec/Overview.html#non-conforming-features. К числу примеча -тельных не соответствующих требованиям элементов относятся strike , center , font ,
acronym, frame и frameset.
4.3. Новые семантические HTML 5-элементы
В имеющемся у меня словаре семантике дается следующее определение: «раздел
языкознания, изучающий содержание, информацию, передаваемые языковыми еди-ницами». В нашем случае семантика — это процесс придания значения нашей раз-метке. Почему это важно? Я рад, что вы спросили. Взгляните на структуру текущей
разметки сайта 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 и т. д. Однако, взглянув на сам код, любой
122 Глава 4. HTML5 для адаптивных веб-дизайнов
пользовательский агент (браузер, экранный диктор, поисковый робот и др.) не смо -жет наверняка сказать, в чем заключается назначение каждого раздела <div>. HTML5
стремится решить эту проблему с помощью новых семантических элементов.
Элемент <section >
Элемент <section> используется для определения универсального раздела доку-мента или приложения. Например, вы можете захотеть разбить на части имеющее-ся у вас содержимое; один раздел будет служить для контактных данных, другой —
для новостных лент и т. д. Важно понимать, что элемент <section> не предназначен
для использования в целях стилизации. Если вам потребуется заключить тот или
иной элемент во что-то просто для стилизации, то продолжайте использовать <div>,
как делали это раньше.
СОВЕТ
По адресу 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>.
4.3. Новые семантические HTML5-элементы 123
СОВЕТ
По адресу 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>
124 Глава 4. HTML5 для адаптивных веб-дизайнов
Несмотря на наличие нескольких заголовков <h1> и <h2>, иерархическая струк -тура по-прежнему будет выглядеть так:
Ben ’s blog
y A post about something
Вам не нужно отслеживать тег <header> , который требуется использовать. Вы мо -жете просто выбрать любой уровень тега <header> в каждом из разделов, и алгоритм
определения иерархической структуры HTML5 выполнит соответствующее упо- HTML5 выполнит соответствующее упо- 5 выполнит соответствующее упо -рядочение.
Можете проверить иерархическую структуру своих документов с помощью
специальных инструментов, располагающихся по следующим адресам:
http://gsnedders.html5.org/outliner/;
http://hoyois.github.com/html5outliner/.
На рис. 4.1 показана страница HTML5 Outliner.
Рис. 4.1. Страница HTML5 Outliner
4.3. Новые семантические HTML5-элементы 125
СОВЕТ
Что еще говорится в спецификации 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 отмечается, что контактные данные автора того или ино- HTML5 отмечается, что контактные данные автора того или ино- 5 отмечается, что контактные данные автора того или ино -го блог-поста следует заключать в элемент <address>.
СОВЕТ
По адресу http://dev.w3.org/html5/spec/Overview.html#thefooter-element вы сможете узнать,
что говорится в спецификации HTML5 консорциума W3C об элементе <footer>.
Элемент <address >
Элемент <address> предназначен конкретно для размещения контактных данных
для своего ближайшего предшествующего элемента <article> или <body>. Чтобы
не запутаться, помните, что элемент <address> не используется для размещения поч -товых адресов и т. п., если только они в действительности не являются контактными
126 Глава 4. HTML5 для адаптивных веб-дизайнов
адресами, которые относятся к соответствующему содержимому. Вместо этого
почтовые адреса и прочие произвольные контактные данные следует заключать
в старые добрые теги <p>.
СОВЕТ
По адресу http://dev.w3.org/html5/spec/Overview.html#theaddress-element вы сможете узнать,
что говорится в спецификации HTML5 консорциума W3C об элементе <address>.
|