Практическое использование структурных элементов HTML5
Взглянем на примеры использования этих новых элементов. Думаю, элементы <header>, <nav> и <footer> говорят сами за себя, поэтому для начала возьмем текущую разметку домашней страницы сайта And the winner isn’t. и изменим области <header>, <nav> и <footer> (см. выделенные области в приведенном далее фрагменте кода):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>And the winner isn’t…</title>
<script>document. cookie=’resolution=’+Math. max(screen. width, screen. height)+’; path=/’;</script>
<link href="css/main. css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!— верхний колонтитул и навигация —>
<header>
<div id="logo">And the winner is<span>n’t…</span></div>
<nav>
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
</header>
<!— содержимое —>
<div id="content">
<img class="oscarMain" src="img/oscar. png" alt="atwi_oscar" />
<h1>Every year <span>when I watch the Oscars I’m annoyed…</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We’re here to put things right. </p>
<a href="#">these should have won »</a>
</div>
<!— врезка —>
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes…</h4>
<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense…</h4>
<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>
</div>
</div>
<!— нижний колонтитул —>
<footer>
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>
</footer>
</div>
</body>
</html>
Однако, как вы уже видели ранее, когда в рамках страницы используются <article> и <section>, их может быть больше чем по одному на страницу. Каждый элемент <article> или <secti on> может включать свой собственный <header>, <footer> и <nav>. Например, если мы добавим в разметку элемент <article>, то код будет выглядеть следующим образом:
<body>
<div id="wrapper">
<!— верхний колонтитул и навигация —>
<header>
<div id="logo">And the winner is<span>n’t…</span></div>
<nav>
<ul>
<li><a href="#">Why?</a></li>
</ul>
</nav>
</header>
<!— содержимое —> <div id="content">
<article>
<header>An article about HTML5</header>
<nav>
<a href="1.html">related link 1</a>
<a href="2.html">related link 2</a>
</nav>
>это содержимое статьи</p>
<footer>This was an article by Ben Frain</footer>
</article>
Как видно, мы используем <header>, <nav> и <footer> как для страницы, так и для статьи, которая на ней располагается.
Изменим нашу область <sidebar>. Вот что у нас имеется на текущий момент в разметке на HTML 4.01:
<!— врезка —>
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes…</h4>
<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense…</h4>
<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>
</div>
</div>
Содержимое нашей врезки, несомненно, является второстепенным по отношению к основному содержимому, поэтому первым делом удалим <div id="sidebar"> и заменим его элементом <aside>:
<!— врезка —>
<aside>
<div class="sideBlock unSung">
<h4>Unsung heroes…</h4>
<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense…</h4>
<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>
</div>
</aside>
Отлично! Однако взглянем на страницу в браузере (рисунок 4.2). Неудивительно, если после этого у вас вырвется бранное словечко.
Страница с внесенными изменениями.
Получается, мы сделали один шаг вперед и два назад! Причина этого заключается в том, что мы не внесли изменения в CSS-код в соответствии с новыми элементами. Сделаем это перед тем, как двигаться дальше. Необходимо изменить все ссылки на #header, написав их как header, все ссылки на #navigation, написав их как nav, и все ссылки на #footer, написав их как footer. Например, первое CSS-правило, относящееся к верхнему колонтитулу, изменится с такого:
#header { background-position: 0 top; background-repeat: repeat-x;
Background-image: url(../img/buntingSlice3Invert. png); margin-right: 1.0416667%; /* 10×960 */ margin-left: 1.0416667%; /* 10×960 */ width: 97.9166667%; /* 940×960 */
}
На такое:
Header {
Background-position: 0 top; background-repeat: repeat-x;
Background-image: url(../img/buntingSlice3Invert. png); margin-right: 1.0416667%; /* 10×960 */ margin-left: 1.0416667%; /* 10×960 */ width: 97.9166667%; /* 940×960 */
}
Это было очень легко сделать для верхнего и нижнего колонтитулов, а также навигации, поскольку идентификаторы были такими же, как элементы, на которые мы их заменяли, — мы просто убрали символ #. С врезкой дело обстоит немного по-другому: нам необходимо изменить ссылки с #sidebar на aside. Однако здесь поможет функция поиска и замены в вашем любимом редакторе кода. Чтобы было ясно, правила вроде такого:
#sidebar {
}
Изменятся следующим образом:
Aside {
}
Даже если вы написали очень большую таблицу стилей CSS, замена всех идентификаторов HTML 4.01 HTML5-элементами будет довольно безболезненной процедурой.
БУДЬТЕ БДИТЕЛЬНЫ В ОТНОШЕНИИ МНОЖЕСТВЕННЫХ ЭЛЕМЕНТОВ В HTML5.
Знайте, что в HTML5 в рамках одной страницы разрешено использовать множественные элементы <header>, <footer> и <aside>, поэтому может потребоваться написать более специфические стили для отдельных экземпляров.
После изменения соответствующим образом всех стилей для сайта And the winner isn’t, наша страница приобретет надлежащий вид (рисунок 4.3).
Теперь, хотя мы и сообщаем пользовательским агентам, какой раздел страницы является врезкой (элемент <aside>), у нас имеется два разных раздела: UNSUNG HEROES и OVERHYPED NONSENSE. Следовательно, для семантического определения этих областей потребуется внести дополнительные изменения в наш код:
<!— врезка —>
<aside>
<section>
<div class="sideBlock unSung">
<h4>Unsung heroes…</h4>
<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>
</div>
</section>
<section>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense…</h4>
<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a> <a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>
</div>
</section>
</aside>
Страница выглядит так, как задумывалось.
Важно помнить, что элемент <section> не предназначен для стилизации, а служит для идентификации определенного фрагмента содержимого. Обычно у разделов также имеются заголовки, что нам очень подходит. Из-за алгоритма определения иерархической структуры HTML5 мы также можем заменить теги <h4> тегами <h1>, и он все равно будет выдавать точную структуру нашего документа (рисунок 4.4).
Отображение структуры документа инструментом HTML5 Outliner.
Как насчет основного содержимого сайта? Вас может удивить то, что нет.
Определенного элемента для разметки основного содержимого страниц. Однако логика подсказывает, что, если есть способ отделить все второстепенное, то оставшееся должно быть основным содержимым страницы.
Добавить комментарий