(обн. )
Типовая структура страницы в HTML5
Дополнение от 1.03.2016: у нас есть более свежая статья на эту же тему (перевод заметки редактора спецификации W3C HTML5).
Типовая структура страницы в HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ваш сайт</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Ваше меню</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Заголовок статьи</h2>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>
</article>
<article>
<header>
<h2>Заголовок статьи</h2>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
</article>
</section>
<aside>
<h2>Об авторе</h2>
<p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p>
</aside>
<footer>
<p>Copyright 2014 Ваш сайт</p>
</footer>
</body>
</html>
P.S. Это тоже может быть интересно:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> в HTML5:
<meta charset="UTF-8">
Можно и так, но на <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> валидатор лучше реагирует.
Браузер — лучший валидатор.
Браузер в обоих случаях отобразит одинаково.
А если не видно разницы, зачем писать больше?
Уважающему себя валидатору должно быть пофиг. Бывают лжевалидаторы-самозванцы, но это их проблемы)
http://blog.paciellogroup.com/2013/10/using-html5-section-element/
Section должен иметь заголовок — "Последние новости" например.
Если в дизайне заголовка нету, то его все равно нужно добавить и скрыть через позиционирование. Тоже относится и к элементу nav. Google и скринридеры будут в восторге.
Не обязательно, но не помешает. Но это уже совсем другая история…
А почему все article начинаются с h2? Разве в html5 не правильнее было бы использовать для этого h1?
Для главной страницы h2, для внутренней h1. А что, в HTML5 <h1> — <h6> имеют какой-то другой смысл?
сами заголовки — нет, не имеют.
но вот section и article внутри себя формируют свою иерархию заголовков. то есть, внутри каждого article заголовки должны начинаться с h1.
Уточнение: не «должны», а «могут». При наличии секционных (структурных) элементов — section, article, aside и nav — ранг заголовка определяется не цифрой, а вложенностью этих элементов, независимо от цифры. По крайней мере, в теории, на практике многие анализаторы работают по-старому, по цифрам.
Как можно связатся с администратором сайта? Пишу уже несколько месяцев и меня игнорят :)
На этой странице указан наш адрес электронной почты: http://css-live.ru/about
А в этом примере элемент <section> можно заменить элементом <main> или обернуть <section> и <aside> в main? Как будет лучше?
Как-то совсем нелогично наличие h2 и отсутствие h1 заголовка
Зачем nav в шапке завернут в header, если там помимо навигации ничего нет?
Зачем дата и автор публикации завернуты в абзац?
Друзья, в данном сниппете показан общий рабочий момент применения новых тегов, которые используются в HTML5 и это не значит, что все этим и ограничивается. Если разварачивать все на полную катушку, то можно указать в коде и различные уровни вложенности, иерархию и т.д. и т.п. Для этого можно представить данный код в уже совершенно другом виде.
В таком случае было бы логично назвать статью "общий рабочий момент применения новых тегов, которые используются в HTML5"
Можно было, но думаю, что как статью не назови, каждый будет воспринимать ее по-своему ии глядеть на нее с высоты свой колокольни.