Структура html5 страницы: Структура кода | htmlbook.ru

Содержание

Типовая структура страницы в HTML5 — CSS-LIVE

Дополнение от 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>
				<h3>Заголовок статьи</h3>
				<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>
				<h3>Заголовок статьи</h3>
				<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>
		<h3>Об авторе</h3>
		<p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p>
	</aside>

	<footer>
           <p>Copyright 2014 Ваш сайт</p>
	</footer>

</body>

</html>
P.S. Это тоже может быть интересно:

Структура html5 страницы (документа): чем она отличается?

От автора: я вновь приветствую вас на блоге webformyself. А может вы здесь и впервые. Сегодня мы рассмотрим, из чего состоит структура html5 страницы и как она поменялась с выходом этой новой спецификации.

Как изменилась структура

Прежде всего, я хотел бы сказать, что до появления html5 явной структуры как таковой вообще не существовало. Как верстались все шаблоны? В большинстве случаев использовался метод блочной верстки, ставший сегодня стандартным. В качестве контейнеров для элементов использовались обычные div с разными идентификаторами.

Например, шапка обычно обозначалась как div с идентификатором header, блок с основной информацией называли main или content, боковая колонка получила идентификатор sidebar.

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

В связи с этим, в html5 назревало появление новых элементов – семантических блоков, которые были призваны заменить обычные div, придать разметке больше смысла.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Собственно говоря, историю их происхождения вы также можете узнать в первом уроке премиум-курса по основам html5. Я советую вам ознакомиться с ним, если вы пока очень мало знаете об этой спецификации. Ну а я расскажу вам теперь о некоторых из этих новых элементов.

Новые семантические блоки в разметке

Стоит отметить, что подходящий тег придумали практически для любого элемента на веб-странице. Например, для шапки. По стандарту ее всегда делали так: div id = “header”. Теперь необходимость в этом отпала – появился контейнер header. Да, это парный тег и в него помещается все содержимое шапки.

Впрочем, это не означает, что к нему нельзя привязать класс или идентификатор. Конечно, можно, и так и будут делать. Header имеет немного большую роль, чем только контейнер для главной шапки сайта.

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

Так вот, к чему это я? У статьи (новости, обзора и т.д.) тоже может быть своя шапка, своя заключительная часть и т.д. Соответственно, на странице может быть несколько header-ов, каждый со своим классом.

К слову, подвал сайта, самая нижняя его часть, формируется в html5 тегом footer. Для вас это будет очевидным, если вы сверстали хотя бы несколько типичных макетов – именно такой класс обычно дают этому блоку.

Теперь о меню. Раньше оно тоже не имело своего собственного, уникального контейнера, который мог бы его отличать. Оно тоже формировалось в помощью div. Естественно, для такого важного элемента на странице тоже придумали свой тег – nav (navigation). Он тоже не обязательно должен быть одним на странице – на некоторы веб-ресурсах можно наблюдать несколько разных меню и все же по своему смыслу в него рекомендуется заключать самые важные ссылки на странице.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вы наверное, замечали, как сильно может отличаться основное содержимое от того, что показывается в боковой колонке? Если подумать, то это вообще разные секции шаблона. Вот именно – секции! Наверняка подобным образом думали и разработчики спецификации html5, поэтому они создали тег – section. Его общий смысл заключается в том, что он содержит в себе часть документа (секцию), в целом независимую от других, у которой может быть свой заголовок и т.д.

Пример новой разметки

Хорошо, мы с вами уже узнали о некоторых новых элементах, давайте попробуем сделать разметку c их помощью.

<header>Шапка</header>
<nav>Главное меню</nav>
<section id = “sidebar”>Сайдбар</section>
<section id = “content”>
<h2>Заголовок</h2>
<aside>Второстепенная информация о статье</aside>
<article>Сама статья</article>
</section>
<footer>Подвал</footer>

<header>Шапка</header>

<nav>Главное меню</nav>

<section id = “sidebar”>Сайдбар</section>

<section id = “content”>

<h2>Заголовок</h2>

<aside>Второстепенная информация о статье</aside>

<article>Сама статья</article>

</section>

<footer>Подвал</footer>

Конечно, это очень простой пример. В реальности еще к этим элементам добавляются какие-то стилевые классы. Здесь мы с вами применили два абсолютно новых тега – article и aside. Как вы понимаете, тег article обозначает основную информацию на странице, причем исключительно ее текст.

Такие важные вещи, как дату публикации или количество комментариев, лучше вынести отдельно в блок aside. Он создан для того, чтобы помещать в него информацию, которая не является главной, имеет второстепенное значение, по сравнению с основной.

Конечно, дата публикации это важно, но она никак не связана с самой статьей по смыслу. Именно поэтому рекомендуется обрамлять ее в другой тег. Собственно, эти рекомендации не являются обязательными к выполнению. Например, если вы в тег article включите всю статью с датой, кол-вом просмотров и другой побочной информацией, ничего страшного не случится. Я бы даже сказал, что вообще ничего не случится, просто нужно стремиться делать более правильно.

Наконец, если говорить о времени (дате), то ее желательно заключать в новый тег time. Это позволит браузеру действительно считать это датой, а не просто каким-то случайным элементом на странице.

Конечно, представленный выше вариант разметки является лишь одним из примеров, на каждом реальном сайте по-разному. Например, в любой section можно добавить header и footer – они будут обозначать начало и конец секции, второстепенная информация может находиться ниже самой статьи, а не выше. Тут много разных вариантов, причем вы разбираем только структуру блога, на других типах веб-ресурсов все может быть совсем по-другому. Например, вот другой вариант разметки, и он тоже имеет право на жизнь:

Итак, вот так быстро мы с вами прошлись по структуре html5 – новым тегам этой спецификации, которые помогают сделать разметку веб-страницы куда более понятной. Подписывайтесь на наш блог, если вы хотите продолжать изучение сайтостроения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML5 — Основы создания структуры документа

Статья, которая повествует об основах создания структуры документа в HTML 5.

Семантика и структура документа в HTML 5

Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.

Создание структуры документа до HTML 5

Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.

Как образуется структура документа в HTML 4

Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h2, h3, h4, h5, h5, h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.

Проблемы при реализации структуры документа

Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h2, h3, h4, h5, h5 и h6. С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.

Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.

Создание структуры документа в HTML 5

Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.

Элементы, предназначенные для создания структуры в HTML 5

Для создания структуры документа в HTML 5 используются заголовочные элементы (h2, h3, h4, h5, h5 и h6) и элементы nav, aside, section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.

Процесс создания структуры документа в HTML5

Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body, nav, aside, section и article создают секции (явные разделы), а элементы h2, h3, h4, h5, h5 и h6 — обычные разделы (неявные разделы).

Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.

В HTML 5 создание структуры документа начинается с элемента body. Данный элемент создаёт основную секцию (раздел на уровне документа).


<body>
</body>

--> Вышеприведённый пример будет создавть следующую структуру документа:
[document] Untitled

После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.


<body>
  <nav></nav>
  <section></section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
  [nav] Untitled
  [section] Untitled
  [aside] Untitled

Каждая из секций (nav, aside, section, article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body, имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.

Например, создадим в section 3 секции article.


<body>
  <nav></nav>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
  [nav] Untitled
  [section] Untitled
     [article] Untitled
     [article] Untitled
     [article] Untitled
  [aside] Untitled

Элементы h2, h3, h4, h5, h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).

Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body, nav, aside, section, article). В HTML 4 нет элементов для создания секций.

Например, создадим названия для всех секций кроме nav.


<body>
  <h2>A</h2>
  <nav></nav>
  <section>
    <h2>B</h2>
    <article>
      <h2>C</h2>
    </article>
    <article>
      <h2>D</h2>
    </article>
    <article>
      <h2>E</h2>
    </article>
  </section>
  <aside>
    <h2>F</h2>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
  [aside] F

Например, создадим неявные разделы в секции section и aside:


<body>
  <h2>A</h2>
  <nav></nav>
  <section>
    <h2>B</h2>
    <article>
      <h2>C</h2>
    </article>
    <article>
      <h2>D</h2>
    </article>
    <article>
      <h2>E</h2>
    </article>
    <h3>B-R1</h3>
    <h4>B-R2</h4>
    <h3>B-R3</h3>
  </section>
  <aside>
    <h2>F</h2>
    <h3>F-R1</h3>
    <h4>F-R2</h4>
    <h5>F-R3</h5>
    <h4>F-R4</h4>
    <h4>F-R5</h4>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
     [h3] B-R1
       [h4] B-R2
     [h3] B-R3
  [aside] F
    [h3] F-R1
      [h4] F-R2
        [h5] F-R3
      [h4] F-R4
      [h4] F-R5

Правильная структура страницы на HTML5, новые семантические теги

06.07.18 HTML 1464

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,

  • Заголовочное,

  • Текстовое,

  • Потоковое,

  • Секционное,

  • Встроенное,

  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address, а также в сам тег header.

Тег nav (потоковое, секционное)

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

Тег article (потоковое, секционное)

Тег предназначен для группирования статей на странице, его стоит применять если на одной странице размещено несколько статей, если же всего лишь одна статья, тогда можно не использовать данный тег.

Тег section (потоковое, секционное)

Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.

Тег aside (потоковое, секционное)

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

Тег footer (потоковое)

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

Тег address (потоковое)

Тег полезен для создания блока с адресной информацией, особенно важно для продвижения в поисковых системах. Содержимое в данном теге обычно выделяется браузерами курсивом.

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

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

Тег figcaption (-)

Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.

Тег time (потоковое, текстовое)

Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.

Тег mark (потоковое, текстовое)

Тег позволяет выделить контент на странице цветом, как маркером на бумаге. Обычно это желтый цвет, но можно изменить цвет стилями.

Тег bdi (потоковое, текстовое)

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

Тег wbr (потоковое, текстовое)

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

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

Структура (скелет) сайта на HTML5 . Основная структура сайта

Структура сайт на HTML5 немногим отличается от обычной структуры. В новой версии языка разметки введены новые семантические элементы которые позволяют лучше структурировать страницу сайта и придать каждому блоку определенный смысл.

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

Семантические элементы HTML5 помогают упростить работу с этими частями. Итак давайте рассмотрим какие элементы HTML нам необходимы для создания структуры сайта

1. Основная стандартная структура сайта, которая имеет заголовок страницы и тело страницы:

<!DOCTYPE html>
<html>
<head>
   <title> Структура сайта на HTML5 </title>
</head>
<body>
</body>
</html>

2. Теперь добавим в тело страницы (внутрь тега BODY) элемент которые будет отвечать за заголовок страницы в новом HTML5 это тег HEADER

<body>
   <header> 
     <h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
   </header>
</body>

3. Часть HEADER обычно включает в себя часть меню. Меню создается с помощью парного тега NAV

<body>
   <header> 
     <h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
     <nav>
       <ul>
         <li> <a> Пункт меню 1 </a></li>
         <li> <a> Пункт меню 2 </a></li>
       </ul>
     </nav>
</header> </body>

4. Следующий элемент который используется для создания структуры сайта это ARTICLE. Он используется для группировки записей, статей и прочего на странице. В большинстве своем используется для разделения частей сайта на различные блоки. Может содержать внутри себя другие элементы ARTICLE.

<body>
 <article>
   <header> 
     <h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
     <nav>
       <ul>
         <li> <a> Пункт меню 1 </a></li>
         <li> <a> Пункт меню 2 </a></li>
       </ul>
     </nav>
 </article>
</header> </body>

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

<aside> 
  <h4> Рекламные блоки </h3>
  <p> Какая то реклама </p>
</aside>

6. И последний часто используемый элемент это подвал FOOTER. Представляет собой нижнюю часть страницы сайта, обычно эта часть всегда одинакова на всех страницах сайта. Но каждая страницы или статья может иметь свой собственный footer.

<footer> 
  <adress> Ул.Новая д.43, г.Большой </adress>
  
</footer>

Подведя итог можно сделать окончательную структуру сайта на HTML5, который будет иметь следующий вид:

<!DOCTYPE html>
<html>
<head>
   <title> Структура сайта на HTML5 </title>
</head>
<body>
<header> 
     <h2>Это структура сайта с использованием семантических тегов HTML5 </h2>
     <nav>
       <ul>
         <li> <a> Пункт меню 1 </a></li>
         <li> <a> Пункт меню 2 </a></li>
       </ul>
     </nav>
</header>
<aside> 
  <h4> Рекламные блоки </h3>
  <p> Какая то реклама </p>
</aside>
<footer> 
  <adress> Ул.Новая д.43, г.Большой </adress>
  
</footer>
</body>
</html>

 

Семантическая структура для HTML5 страницы | Бортовой журнал Ктулху

В этой статье описывается структура HTML5 страницы с примером создания.

 

Заголовок и метатеги

Заголовок HTML5 документа и теги meta в head:

———— CODE ————

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Заголовок страницы</title>
<meta name=»keywords» content=»Ключевые слова, и, фразы, через, запятую»>
<meta name=»description» content=»Описание контента страницы, 1-2 предложения.»>
</head>
<body>

———— /CODE ————

Тег <meta name=»keywords» content=»»> отвечает за ключевые слова, <meta name=»description» content=»»> — описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

Заголовок страницы

Шапка страницы оформляется в тег header. Заголовок страницы обязательно пишем тегом h2.

———— CODE ————

<!— Header страницы —>
<header>
<h2>Site title</h2>
</header>
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!— Header страницы —>
<header>
<h2>Site title</h2>
<p>site slogan</p>
</header>

———— /CODE ————
В HTML5 тег h2 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.).

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок h2. Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) h3 использовался для подзаголовков, или для разделов главной статьи. h4 для под разделов и так далее.

Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги <article> и <section> создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег <h2>. 

То есть, в верстке HTML5 можно использовать несколько тегов h2, главное, разделять блоки по структуре, например теги h2 помещать в блоки <section>.

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

———— CODE ————

<!— Главная Навигация по сайту —>
<nav>
<ul>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>Portfolio</a></li>
<li><a href=»#»>Gallery</a></li>
<li><a href=»#»>Contacts</a></li>
</ul>
</nav>

———— /CODE ————

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

———— CODE ————

<!— Основное содержимое страниц —>
<main>

…основной контент страницы…

</main>

———— /CODE ————

Оформление статьи

Тег article служит для обертки статей. Тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″. Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

———— CODE ————

<main>
…
<!— Статья —>
<article>

<!— Шапка статьи если в шапке у нас больше чем заголовок —>
<header>

<!— Заголовок статьи —>
<h2>Article title</h2>

<!— Дата публикации статьи —>
<time datetime=»2015-09-30T15:25:55″ pubdate>30 Сентября</time>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>

<!— Подзаголовок страницы —>
<h3>Article sub-title</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p>

<footer>
<a href=»#»>Читать далее</a>
<a href=»#»>Комментарии</a>
</footer>

</article>
…
</main>

———— /CODE ————
Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Боковой блок

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h2. Так колонка с сайдбаром может выглядеть следующим образом:

———— CODE ————

<!— Боковой блок —>
<div>

<!— Виджет в сайдбаре —>
<aside>
<h2>Widget title</h2>
…
</aside>

<!— Виджет в сайдбаре —>
<aside>
<h2>Последние записи</h2>
…
</aside>

<!— Виджет в сайдбаре —>
<aside>
<h2>Популярные комментарии</h2>
…
</aside>

</div>

———— /CODE ————

Тег section

Тег section — используется для представления группы или секции тематически связанного контента. Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h2> – <h6>) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section>. Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section, наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

———— CODE ————

<h2>An Event Apart</h2>

<section>

<header>
<h3>Cities</h3>
</header>
<p>Join us in these cities in 2010.</p>

<section>
<header>
<h4>Seattle</h4>
</header>
<p>Follow the yellow brick road.</p>
</section>

<section>
<header>
<h4>Boston</h4>
</header>
<p>That’s Beantown to its friends.</p>
</section>

<section>
<header>
<h4>Minneapolis</h4>
</header>
<p>It’s so <em>nice</em>.</p>
</section>

</section>

<small>Accommodation not provided.</small>

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

<!— Подвал сайта —>
<footer>
<p>© 2015 Rightblog.ru Copyright</p>
</footer>

———— /CODE ————

Сжижено с rightblog.ru и дополнено своими комментариями.

Правильный «скелет» HTML-страницы для сайта, пример по стандарту HTML5

Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
    <meta name="description" content="Описание страницы" />
    
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    <link rel="icon" href="/img/favicon.png">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      Шапка
      <nav>
        Навигация
      </nav>
    </header>

    <main>
      <section>
        <h2>Заголовок страницы</h2>
        Основная часть
      </section>
    </main>

    <aside>
      Боковая колонка (сайдбар)
    </aside>

    <footer>
      Подвал
    </footer>
  </body>
</html>

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

Теги и атрибуты

Разберем основные теги и атрибуты, примененные в примере:

  • <!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
  • <html lang=”ru”> – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
  • <head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
    • <meta charset=”UTF-8″> – кодировка сайта.
    • <title> – название страницы. Придерживайтесь правильного заполнения тега Title.
    • <meta name=”description” content=”” /> – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
    • <link rel=”stylesheet” type=”text/css” href=”” /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
    • <link rel=”icon” href=””> – иконка сайта, отображаемая в браузере.
    • <script type=”text/javascript” src=””> – подключение внешней библиотеки JQuery последней версии.
    • <!–[if lt IE 9]><script src=””> – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
  • <body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
    • <header> – шапка сайта.
    • <nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
    • <main> – основной контент документа.
    • <section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
    • <h2> – заголовок страницы.
    • <aside> – боковая колонка, также именуемая как «сайдбар».
    • <footer> – подвал сайта.

Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.