Header html5

Тег <header>html5 (верхний колонтитул) является признаком верхнего колонтитула или баннера верхней части страницы, которая обычно содержит логотип (иконка), навигацию, относящуюся ко всему сайту, форму поиска по сайту, заголовок страницы с подзаголовком, авторскую информацию и так далее. Допускается размещать несколько элементов <header>html5 в одном документе.

 <header> 		<img src = "logo.png" alt = "logo"> <!-- изображение с логотипом --> 		<h1>Заголовок первого уровня</h1> <!-- заголовок первого уровня --> </header> 
Пример размещения тега <header> на странице.
Пример размещения тега <header> на странице.

Обращаю Ваше внимание, что запрещается помещать элемент <header>html5 внутрь таких элементов, как <footer>html5 (нижний колонтитул), <address>html5 (определяет контактную информацию) или внутрь другого элемента <header>html5.


Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.
Рис. 43 Человек, который использует только тег <div>.

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

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

 <!DOCTYPE html> <html> 	<head> 		<title>Разметка страницы</title> 	</head> 	<body> 		<header style = "background-color:khaki; height:100px"> 			<p>Верхний колонтитул (тег <header>)</p> 		</header> 		<nav style = "background-color:coral; height:75px"> 			<a href = "#">Ссылка 1</a> | 			<a href = "#">Ссылка 2</a> | 			<a href = "#">Ссылка 3</a> | 		<p>Панель навигации (тег <nav>)</p> 		</nav> 		<aside style = "float:right; width:200px; height:250px; background-color:tan"> 			<p>Справа мы разместили тег <aside></p> 		</aside> 		<main style = "height:250px"> 			<h1>Главный заголовок сайта</h1> 			<p>Основное содержимое (тег <main>)</p> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 1 (тег <section>)</p> 			</section> 			<section style = "background-color:grey; height:75px"> 				<h2>Заголовок второго уровня</h2> 				<p>Раздел 2 (тег <section>)</p> 			</section> 		</main> 		<footer style = "background-color:khaki; height:80px"> 			<p>Нижний колонтитул (подвал) тег <footer></p>  			<address>Пример с сайта basicweb.ru</address> 		</footer> 	</body> </html> 

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

  • Для элемента <header>html5 (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
  • Следующим на странице мы разместили элемент <nav>html5 (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
  • Далее мы разместили элемент <aside>html5, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
  • Добавили на страницу элемент <main>html5 в который мы добавили заголовок первого уровня (тег <h1>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
  • Внутри элемента <main>html5 мы добавили два тематических раздела (тег <section>html5), поместили внутри этих элементов заголовки второго уровня (тег <h2>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
  • После основного содержимого мы разместили элемент <footer>html5 (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5

Разметка страницы на HTML 5.

Значение CSS по умолчанию

 header { display: block; } 

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

basicweb.ru

HTML5 новые тэги time, figure, video, audio, canvas

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.

Тэги header и footer

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:

<div id="header">
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</div>

переписать по-новому так:

<header>
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</header>

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:

header, footer, nav, article {display: block;}

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

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

<section>
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
</article>
</section>

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

<hgroup>
<h1>Самый сайт</h1>
<h3>Здесь описание Самого сайта</h3>
</hgroup>

UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

www.websovet.com

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

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

Еще по теме:   Как в HTML выровнять текст по центру

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

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

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

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

  1. Владимир Кузнецов 27 июля 2011 в 19:37

    Быстро проверить корректность структуры документа мне помогает инструмент h5o http://code.google.com/p/h5o/

    Когда article, section, nav остается без заголовка (а это сразу выявляется в структуре), то нужно либо дать блоку осмысленный заголовок, либо заменить его на div. Памятуя об этом правиле, можно избежать неуместного использования новых тегов, мне кажется.

  2. Лев Солнцев 27 июля 2011 в 19:43

    Стоить отметить комментарии к оригинальной статье, в которых говорится, что Internet Explorer не распознает атрибут required. Так, используя jQuery, запрос вида $('input[required]') при наличии <input required/> ничего не вернёт в Internet Explorer 8 и ниже. Но $('input[required=""]') при <input required=""/> даст результат.

  3. [email protected]> 27 июля 2011 в 22:31

    Забавно, я перевел эту же статью для Хабра, но эту заметил только сейчас (после обновления RSS фида).

  4. Вадим Макеев 27 июля 2011 в 22:33

    B@rmaley, статья хорошая — понятное дело, хочется перевести.

  5. Антон Платонов 28 июля 2011 в 0:22
      <script href="js/scripts"></script>  

    Атрибут href тут правильно указан вместо привычного src, или это ошибка?

  6. Вадим Макеев 28 июля 2011 в 0:30

    Антон, спасибо — это была опечатка в оригинальной статье, поправил.

  7. Петр 28 июля 2011 в 4:19

    Не «экстра-элементы div», а «дополнительные элементы div». То же самое насчёт «экстра-разметки вокруг картинок» (лучше: «избыточной разметки вокруг картинок»). В остальном перевод хороший.

  8. Сергей 28 июля 2011 в 8:22

    Кажется пропущен предлог «с» в предложении «Правильным использованием этого элемента вместе подельником не так-то просто овладеть.»

  9. Вадим Макеев 28 июля 2011 в 10:37

    Петр, что касается «экстра-элементов div», то согласен — там смысл немного другой, поправил. А вот что касается экстра-разметки, то это уже профессиональная лексика, ничего не поделаешь, все говорят именно экстра-разметка.

    Сергей, поправил, спасибо.

  10. crwin 28 июля 2011 в 10:53

    Не планируете перевести статьи html5doctor? Отпала бы необходимость в подобных «разоблачениях».

  11. Вадим Макеев 28 июля 2011 в 10:56

    crwin, у нас уже переведены статьи «Элементы small и hr», «Элементы i, b, em и strong» и ещё две (про hgroup и figure) лежат в черновиках. Доктор HTML5 — это самое интересное из того, что сейчас можно переводить, так что всё будет.

  12. Петр 28 июля 2011 в 12:33

    Точно также программисты раньше говорили «аппликация» вместо «приложение» — теперь, слава богу, перестали 🙂 В любом случае, спасибо за перевод.

  13. Павел Ловцевич 28 июля 2011 в 12:36

    Не согласен с автором по поводу неуместности использования nav для постраничной разбивки. Зачем «дробить» и ветвить код разные типы навигации?

  14. Роман Комаров 28 июля 2011 в 14:52

    Обожемой, они советуют вместо одного враппера использовать <body>. У такого решения слишком много проблем. Ну т.е. конечно, они потом говорят, что и див всё-ещё можно применять, но блин. Использование <body> для раскладки — очень, очень плохо.

    А от <hgroup>, всё же, надо избавиться. Лучшее правило его применения — просто забыть про него.

  15. Павел Ловцевич 28 июля 2011 в 19:50

    Кстати, да. Первое, что приходит на ум — при сужении области body, нельзя будет за его пределы вынести блок. Например, при оверлее (эффекте lightbox), если body уже доступного места в окне браузера, то и оверлей не затемнит всю рабочую область браузера, а только область body.

  16. exessqd 31 августа 2011 в 10:54

    Не дело верстальщика описывать семантику страницы.

    Для кого она нужна? Для поисковиков в первую очередь, и в наименьшей степени для альт. устройств (т.к. все популярные визуальные устройства поддерживают CSS, а для screen reader’ов достаточно обозначить структуру т.е. навигацию nav и область контента article.)

    Все популярные визуальные устройства поддерживают CSS — обьясню получше, то что ты сейчас делаешь менюшку ul>li совершенно не отличается от div>div, div>span, span>span или любой другой чистой конструкции. (при необходимости эти конструкции меняются но то что нужно поисковикам будь то h1,h2,h3,h4,h5,h6,section,figure,details,nav,article,strong,em, и т.д.)

    Если семантика html5 нужна в большей стпени поисковикам то и заниматься ей должны те кто понимает в поисковиках — сеошники.
    (Что кстати на данный момент совершенно бесполезно т.к. не один поисковик не учитывает html5 семантику.)

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

  17. Вадим Макеев 31 августа 2011 в 13:08

    exessqd, семантика не нужна этим гопникам от IT или «сеошникам», им нужно сайт в топ вытащить, нагенерив уникального контента и засрав интернет дорвеями. Не вижу смысла пересказывать здесь свой доклад «Вёрстка со смыслом», вся аргументация в нём. А ещё в статье «Семантическая вёрстка», не забудьте про вторую её часть.

    Но если коротко: семантика — это методология, общий язык для разработчиков.

  18. exessqd 1 сентября 2011 в 11:20

    Видел я и доклад, и статьи читал.

    Сначала скажу я подразумеваю под бесполезной семантикой — это использование dl,dt,dd,ul,ol,li,p и т.д. вне области контента. Давайте назовем это «списковая семантика».

    Какая бывает семантика и кому она нужна?

    Семантика контентной области(h1,h2,h3,h4,h5,h6,hgroup,em,strong и т.д.) — нужна поисковикам, невизуальным устройствам.

    Структурная семантика(nav,article,aside,header,footer) — нужна
    поисковикам(в будущем), невизуальным устройствам.

    Списковая семантика — нужна никому.

    По моему мнению в статье приводится единственная адекватная причина делать «списковую семантику» — это доступность.

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

    Визуальные — телефоны(поддержка css неполная), смартфоны (полная поддержка), ридеры(полная поддержка).

    Т.е. CSS — универсален для всех визуальных устройств.
    Никто не выключает свой CSS чтобы посмотреть будет! твои dl,dt,dd,ul,ol,li,p никто не увидит.

    Невизуальные — screen readers(читалки), не учитывают списки т.е. никто твои dl,dt,dd,ul,ol,li,p не услышит.

    Как вообще появилась списковая семантика?

    Я предпологаю это было так: Какой-то перец в году 1998 выключил стили и увидел: «Опа, что-то моя страница смотрится как-то хреново, дайка я списочками все расхерачу» Он хорошо знал что такое язык разметки и сразу вспомнил «Блин! Ещё отцы основатели идеологии языков разметки говорили что оформления сайта не должно зависеть от конкретного устройства а список он и в африке список»

    Хватит творить херню и называть это семантикой, списковая семантика бесполезна.

    P.S.
    Чтобы ваш сайт был доступен с читалок не обязательно стилизовать структурные теги, делая ужасный javascript’овый fallback для старых браузеров, достаточно обернуть ваш код в них.

    Было

      <article class="content"></article>  

    Стало

      <article><div class="content"></div></article>  

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

  19. Вадим Макеев 1 сентября 2011 в 17:26

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

  20. alexben 4 сентября 2011 в 10:37

    И так, я не согласен по поводу употребления тега

      <footer>  

    , именно так, как использует Макеев Вадим. Говорим о семантике, так для кого она нужна? Конечно — прежде всего для верстальщика. А поглядывая исходный код блога pepelsbey.net, невольно улыбаешься накой черт использовать тег

      <footer>  

    если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь. Какой логикой пользуется автор? Остается только догадываться.
    Аргументы которые он приводит в своем докладе — буквально притянуты за уши.

    Ну и статья достаточно не однозначна,особенно понравилось высказывание:

    И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования :
    Постраничная навигация;

    http://pepelsbey.net/pres/sense-coding/
    Идем по этой посылочке и находим код, где сам Апостол нам показывает, как можно использовать nav.
    Как видите у каждого есть свои взгляды, на правильное (семантичное) использование тегов по стандарту HTML 5.
    Только это все условно и не стоит этой теме придавать особое значение. Читайте стандарты и старайтесь их не нарушать.
    А как правильно подскажет Ваша логика, а не абсурд который пишут мнимые проповедники.

  21. exessqd 5 сентября 2011 в 9:49

    если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь.

    Ничего не потеряешь кроме того что с этой или этой штуки никто не поймет что это кокретно футер, а если и поймут то быстро перейти к нему не смогут.

  22. alexben 6 сентября 2011 в 5:20

    exessqd, завуалированный ответ получился. Очень похожий на спам.
    Раскроете до конца свою мысль?

  23. exessqd 6 сентября 2011 в 16:44

    Раскрыл подробно из двух предыдущих комментариев, но раз ты спрашиваешь.

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

    Чтобы помочь программам разбираться в текстах для людей и была придумана текстовая семантика:

      Я "a href="http://ya.ru""ссылка"/a" Я "em"эмоцианальный"/em" Я "strong"важный"/strong" Я "small"второстпенный"/small" Я "s"неточен"/s" Я "cite"название работы"/cite" Я "q"цитата"/q" Я "dfn"термин"/dfn" Я "abbr title="""Абревиатура"/abbr" Я "time"время 2009-10-21"/time" Я "code"код"/code" Я "var"переменная"/var" Я "samp"програмный вывод"/samp" Я "kbd"названия клавиш"/kbd" Я "sup"нижний индекс"/sup" Я "sub"верхний индекс"/sub" Я "i"доп-выделение"/i" Я "b"ключевое слово"/b" Я "u"замечание"/u" Я "mark"подсветка"/mark" Я "br" разрывашка Я "wbr" перенос сплошного текста  

    то есть элементы разметки отражают смысл содержимого а не его оформление.

    Была и другая причина — независимсоть от устройства вывода.

    Оформление нужно людям, программам нужен смысл.

    В HTML5 пошли ещё дальше и придумали структурную семантику
    section,nav,article,aside,hgroup,footer,address
    Чтобы программы могли отличать не только текст но и области содержимого.

    Кому это нужно?

    На данный момент это нужно двум типам программ, поисковым роботам(чтобы лучше индексировать сайт, пока не работает) и альтернативным устройствам (screen readers — тип программ которые читают текст с экрана монитора, для слепых людей)

    Человек использующий screen readers уже сейчас может, на странице размеченной структурными тегами, быстро переходить от одной части страницы к другой не читая при этом весь текст(особенно если это seo текст^^ ).

    Что будет дальше?

    W3C уже давно старается реализовать концепт «семантической паутины».

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

    По сути искусственный интеллект который знает твой образ жизни, твои привычки, чего ты хочешь и дает тебе информацию которая будет тебе полезна в данный момент. Не нужно будет искать, нужно просто набрать или даже подумать(?).

    Но пока skynet не появился мы можем спать спокойно.

    P.S. Зачатки skynet можно усмотреть в проекте wolframalpha

  24. alexben 7 сентября 2011 в 4:05

    Мой не «идеальный искусственный интеллект» отказывается воспринимать конкретно тег footer, именно так, как его использует уважаемый, Вадим Макеев.
    Хотя и не нарушает спецификации 🙂 он (прошу прощения) пытается играть на 2 фронта. Да, именно идя на поводу спецификации подстраивает свою логику.
    Я всего лишь хотел сказать, а не должно ли быть наоборот?
    Использовать правила игры во благо логике…
    Ну можно представить футер у блока, пусть даже у всех блоков/разделов. Но в комментариях зачем?

    exessqd — из всего что я понял, Вас должно огорчить то момент, что использование h1 во всех новых узлах, (т.е. употребление его многократно) может «сказочно» отразится на поисковых системах. На сколько помню, это 2 элемент важности в seo, после title.

  25. Вадим Макеев 7 сентября 2011 в 10:06

    alexben, да что ж вы пристали к Вадиму Макееву? Шоколад, как говорится, не виноват. Если можно использовать футер там, куда он логически подходит, то почему вам, как разработчику, как человеку с интеллектом, не хватает гибкости мышления, чтобы видеть в комментарии самостоятельное содержимое, которое может иметь мета-информацию, помещённую в футер?

    И ещё просьба: обратите внимание на правила оформления комментариев и оборачивайте блочные фрагменты кода в <source> (что станет pre > code), а не просто в code — это только для строчного кода.

  26. alexben 7 сентября 2011 в 23:50

    видеть в комментарии самостоятельное содержимое

    Я не вижу комментарии как самостоятельное содержимое и могу пояснить.
    Коментарии с точки зрения логики, это следствие. И между контентом есть нить, которую можно назвать причинно-следственной связью.
    Вследствие чего, вырвав из контекста любой комментарий, вероятность того, что мы поймем будет не 100%.
    И только оффтоп будет является 100% самостоятельным содержимым т.к. он никак не пересекается и не зависит от контентной части.

  27. exessqd 9 сентября 2011 в 11:40

    alexben, согласен, все правильно.
    И зачем было так кричать?

  28. Seva 10 ноября 2011 в 14:35

    Добрый день немного не по теме, но как правильнее верстать формы? а именно связь label и input например… Список определений проситься, но итак ведь есть связь for id и в придачу в спецификации везде параграфом разметка идёт…

  29. Вадим Макеев 24 ноября 2011 в 12:43

    Seva, для форм есть fieldset, legend, label и остальные элементы, уже непосредственно сами формы. Сочетая их по назначению вместе со стерильными элементами, вроде div и span, на мой взгляд, можно написать любые формы.

  30. Seva 24 ноября 2011 в 14:14

    тоесть вы считаете что внутри формы не нужно использовать дополнительные семантические теги типа p, dl, ul, ol и т.д.

    а для разметки либо если позволяет css без лишних тегов или если не позволяет то добавить стирильных? но тогда почему в спецификации они параграфами размечают?

  31. Seva 6 апреля 2012 в 14:54

    Как правильно использовать aside ?
    Например страница с описанием страны, на ней есть блок новостей относящихся к этой стране. он должен быть в aside или section, ведь по сути это раздел и имеет отношение к описанию страны, но и является самостоятельным содержимым косвенно относящимся к странице с описанием страны.

    Или например блок комментариев к новости, вроде как имеет косвенное содержимое то есть aside, но само по себе существовать не может получается section.

  32. Fktrctq 8 мая 2012 в 13:51

    Подскажите пожалуйста какие теги div блоков заменить на теги HTML5
    http://s019.radikal.ru/i604/1205/3b/56722aa5076e.jpg пример вёрстки

  33. m1ron 30 июня 2012 в 14:17

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

    Но если рассматривать html-документ как всего лишь один раздел, кусок, секцию целого проекта, тогда использвание тега section логически оправдано.
    Более того, если поместить все разделы(секции) сайта в один HTML-документ, то логическая структура проекта не нарушится (разделы сайта останутся в section, все логично). А в вашем случае они останутся в DIV’ах. Где семантика?

  34. Роман 21 августа 2013 в 20:17

    Прочитал комментарии к постам. Много спора о семантики блочных и строковых элементов. Кто — то не видит смысла использования, а другие обратное. Если разобраться тогда вообще можно не использовать семантические элементы в коде страниц, а взять не смысловые — блочный div, и строковый span, и сверстать только из них с применениями стилями CSS. Ведь по большому счету все элементы созданы для удобства их использовании для создания каркаса и вложений, а так же и строковые. Никто не принуждает использовать тот или иной стиль верстки, так как и программированию . Есть только рекомендации их использования. ))))

  35. Alex 13 октября 2013 в 2:44

    «Избегаем популярных ошибок в HTML5»
    А с чего вообще автор взял, что это ошибки?
    W3C дает лишь рекомендации по оформлению, а не четкие правила как в математике. Если же это рекомендация, то какие могут быть споры?

    Если я делаю фотохостинг, то накой черт мне сдались теги которые семантически верно разбивают структуру сайта для читалок у слепых или тому подобное?
    Как уже выразились — половина тегов нужна клопам СЕОшникам, а не верстальщикам и программистам.

  36. Евгений 13 июня 2014 в 14:18

    В документе есть шапка, состоящая из шапки с главным меню из двух пунктов; основное тело; футер с тремя подблочками. Мучаюсь, как корректнее сверстать шапку.

    Избыточно:

    <header>   <nav>   <ul>   <li><a href="#">Раздел раз</a></li>   <li><a href="#">Раздел два</a></li>   </ul>   </nav>  </header>  <article>   ...  </article>  <footer>   ...  </footer>

    Странно, что на одном уровне находятся и:

    <nav>   <ul>   <li><a href="#">Раздел раз</a></li>   <li><a href="#">Раздел два</a></li>   </ul>  </nav>  <article>   ...  </article>  <footer>   ...  </footer>

    Главное меню не в , а содержит только один элемент:

    <header>   <ul>   <li><a href="#">Раздел раз</a></li>   <li><a href="#">Раздел два</a></li>   </ul>  </header>  <article>   ...  </article>  <footer>   ...  </footer>
  37. Евгений 13 июня 2014 в 14:20

    Ко второму примеру заголовок:
    «Странно, что на одном уровне находятся <nav> и <footer>»

    К третьему:
    «Главное меню не в <nav>, а <header> содержит только один элемент»

  38. Илья 12 сентября 2014 в 13:02

    Тег hgroup по текущим реалиям deprecated
    Было бы неплохо указать об этом в статье

  39. Вадим Макеев 12 сентября 2014 в 13:34

    Илья, добавили указание, спасибо.

  40. Полина 4 августа 2015 в 13:06

    Очень полезная статья для начинающих верстальщиков. Спасибо!! 😉

Еще по теме:   Как сделать обтекание текста

web-standards.ru

Верстка div (старая)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">   <head profile="http://gmpg.org/xfn/11">    <!-- ......... -->    </head>   <body>   <!-- Шапка сайта -->    <div id="headerInner">    <!-- Навигация -->    <div class="bottomMenu">   <!-- ......... -->   </div>   <!-- Конец навигации -->    </div><!-- Конец шапки сайта -->    <div id="wrapper"><!-- основной блок -->    <div id="colLeft"><!-- блок там где отображаются посты -->    <!-- Начало поста -->   <div class="postBox">   <!-- ......... -->   </div>   <!-- Начало поста -->    <div id="colRight"> <!-- блок боковой колонки -->   <!-- ......... -->   </div>    </div>   </div>    <div id="footerInner"><!-- Футер сайта -->   <!-- ......... -->   </div>    </body>  </html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

Еще по теме:   Как вставить ссылку на сайт?

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h2>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.

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

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

footer, nav, header, section, aside {    display: block    }

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

<!DOCTYPE html>  <html lang="ru">  <head>    <!-- ......... -->    </head>  <body>    <!-- Шапка сайта -->    <header id="headerInner">    <!-- Навигация -->    <nav class="bottomMenu">  <!-- ......... -->  </nav>  <!-- Конец навигации -->    </header><!-- Конец шапки сайта -->    <section id="wrapper"><!-- основной блок -->    <aside id="colLeft"><!-- блок там где отображаются посты -->  <!-- Начало поста -->  <article class="postBox">  <!-- ......... -->  </article>  <!-- Начало поста -->    <aside id="colRight"> <!-- блок боковой колонки -->  <!-- ......... -->  </aside>    </div>  </section>    <footer id="footerInner"><!-- Футер сайта -->  <!-- ......... -->  </footer>    </body>  </html>

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

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:

<header id="headerInner">

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.

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

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Опять рекомендую Вам переходить Вам на новую технологию.

Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу 🙂 До скорых встреч.

beloweb.ru

Поделиться:
Нет комментариев

Добавить комментарий

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

×
Рекомендуем посмотреть
Adblock
detector