Типовая структура страницы в 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. Это тоже может быть интересно:

19 Комментарии

  1. a

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> в HTML5:

    <meta charset="UTF-8">

    1. Administrator (Автор записи)

      Можно и так, но на <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> валидатор лучше реагирует.

      1. GreLI

        Браузер — лучший валидатор.

        1. Administrator (Автор записи)

          Браузер в обоих случаях отобразит одинаково.

          1. Илья

            А если не видно разницы, зачем писать больше?

      2. Илья

        Уважающему себя валидатору должно быть пофиг. Бывают лжевалидаторы-самозванцы, но это их проблемы)

  2. Sergey

    http://blog.paciellogroup.com/2013/10/using-html5-section-element/

    Section должен иметь заголовок — "Последние новости" например.
    Если в дизайне заголовка нету, то его все равно нужно добавить и скрыть через позиционирование. Тоже относится и к элементу nav. Google и скринридеры будут в восторге.

    1. Administrator (Автор записи)

      Не обязательно, но не помешает. Но это уже совсем другая история…

  3. Maxim

    А почему все article начинаются с h2? Разве в html5 не правильнее было бы использовать для этого h1?

    1. Administrator (Автор записи)

      Для главной страницы h2, для внутренней h1. А что, в HTML5 <h1> — <h6> имеют какой-то другой смысл?

      1. Николай Громов

        сами заголовки — нет, не имеют.

        но вот section и article внутри себя формируют свою иерархию заголовков. то есть, внутри каждого article заголовки должны начинаться с h1.

        1. Илья

          Уточнение: не «должны», а «могут». При наличии секционных (структурных) элементов — section, article, aside и nav — ранг заголовка определяется не цифрой, а вложенностью этих элементов, независимо от цифры. По крайней мере, в теории, на практике многие анализаторы работают по-старому, по цифрам.

  4. ZEOS

    Как можно связатся с администратором сайта? Пишу уже несколько месяцев и меня игнорят :)

    1. Administrator (Автор записи)

      На этой странице указан наш адрес электронной почты: http://css-live.ru/about

  5. Денис

    А в этом примере элемент <section> можно заменить элементом <main> или обернуть <section> и <aside> в main? Как будет лучше?

  6. parmactep

    Как-то совсем нелогично наличие h2 и отсутствие h1 заголовка

    Зачем nav в шапке завернут в header, если там помимо навигации ничего нет?

    Зачем дата и автор публикации завернуты в абзац?

  7. Administrator (Автор записи)

    Друзья, в данном сниппете показан общий рабочий момент применения новых тегов, которые используются в HTML5 и это не значит, что все этим и ограничивается. Если разварачивать все на полную катушку, то можно указать в коде и различные уровни вложенности, иерархию и т.д. и т.п. Для этого можно представить данный код в уже совершенно другом виде.

    1. parmactep

      В таком случае было бы логично назвать статью "общий рабочий момент применения новых тегов, которые используются в HTML5"

      1. Administrator (Автор записи)

        Можно было, но думаю, что как статью не назови, каждый будет воспринимать ее по-своему ии глядеть на нее с высоты свой колокольни.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.