HTML 5. Семантические элементы.

Оцените материал
(1 Голосовать)

До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое. Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому.

 

  Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. HTML5-элементы не всегда понятны современным браузерам, и по умолчанию браузер считает их строчными элементами — {display: inline;}. Если просто задать ширину и высоту для таких элементов, то в браузере они будут отображаться неправильно. Чтобы решить эту проблему, нужно указать для всех используемых HTML5-элементов {display: block;}.

Для всех элементов доступны глобальные атрибуты.

Структурные элементы HTML5

 Секционные элементы

Элемент <header>

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

Элемент может содержать основной заголовок, или группу заголовков, которые в свою очередь можно поместить в элемент <hgroup>.

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

<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>
<header>
  <hgroup>
    <h1>...</h1>
    <h2>...</h2>
  </hgroup>
</header>

Элемент <hgroup>

Используется для группировки элементов <h1> - <h6> в случае, когда заголовок имеет сложную структуру, например, имеет уточняющие подзаголовки, альтернативные заголовки и т.п.

<hgroup>
 <h1>...</h1>
 <h2>...</h2>
</hgroup>
<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>

Элемент <nav>

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

<nav>
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</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>
  <p><ahref="">...</a></p>
  <p><ahref="">...</a></p>
</nav>

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

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

Элемент <article>

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

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

Элемент <section>

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

<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>
<article>
  <h1>...</h1>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <section>
      <h2>...</h2>
      <p>...</p>
    </section>
    <p>...</p>
</article>
<article> внутри <section>

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

Например, основная область контента страницы содержит две блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждый статьи одной тематики внутрь элемента <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>
<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>

Элемент <aside>

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

<aside>
  <h2>...</h2>
  <p>...</p>
</aside>
<aside>
  <h2>...</h2>
  <p>...</p>
</aside>

Элемент <footer>

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

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

Элемент <address>

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

Группировка контента

Элементы <figure> и <figcaption>

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

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

Элемент <figure> — блочный, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin: margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em.

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

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

Элементы для поддержки языков Восточной Азии <rp>, <rt> и <ruby>

Тег <rp> устанавливает, что показывать, если браузер не поддерживает аннотаций типографики Восточной Азии. Используется вместе с тегами <ruby> и <rt>.

Тег <rt> добавляет аннотацию, объясняя написание символов Восточной Азии заключенных в контейнер <ruby>.

Тег <ruby> объясняет написание символов.

Элемент <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>.

Элемент <mark>

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

Элемент <bdi>

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

Элемент <wbr>

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

Прочитано 993 раз Последнее изменение Воскресенье, 19 февраля 2017 16:26
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

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

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+