CSS-live.ru

Типовая структура страницы в 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. Можно и так, но на <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> валидатор лучше реагирует.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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