Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Семантические элементы HTML5

165
1

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

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

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

Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент <div> чем-либо лучшим? Чем-то, что работало бы подобно <div>, но было бы более осмысленным. Чем-то, что помогло бы отделить боковые панели от заголовков, а рекламные панели от меню. Стандарт HTML5 позволяет сделать эту мечту реальностью, предоставляя набор новых элементов для структурирования страниц.

Что такое семантические элементы?

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

Регистрация начнется <time>2012-11-12</time>.

В браузере эта разметка отображается как обычный текст "Регистрация начнется 2012-11-25".

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

В данном случае, элемент <time> предназначен содержать одну единицу информации. Но большинство семантических элементов HTML5 не такие: они служат для обозначения блоков содержимого большего размера. Например, элемент <nav> обозначает набор ссылок для перемещения по содержимому, элемент <footer> в коде обрамляет нижний колонтитул страницы и т.д.

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

Все семантические элементы имеют одну общую отличительную особенность: они по существу ничего не делают. В противоположность, элемент <video>, например, вставляет в веб-страницу полноценный видеоплеер. Зачем же тогда утруждать себя использованием набора новых элементов, которые никак не изменяют внешний вид веб-страницы? Этому есть несколько хороших причин:

  • Более удобное редактирование и сопровождение. Разметка традиционной HTML-страницы может быть трудной для понимания. Чтобы понять общую структуру и значение отдельных блоков страницы, часто приходится исследовать ее таблицу стилей. А использование семантических элементов HTML5 позволяет разработчику предоставить в разметке страницы дополнительную информацию о ее структуре. Это облегчит вам жизнь, когда потребуется редактировать эту страницу через несколько месяцев, и будет еще более кстати, если вашу работу придется редактировать кому-то другому.

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

  • Оптимизация поисковых движков. Поисковые движки наподобие Google или Yandex используют мощные поисковые роботы — автоматизированные программы, которые методически обходят Интернет и просматривают все страницы, которые они могут найти — для сканирования содержимого веб-страниц и составления для них указателей в своих поисковых базах данных.

    Чем лучше Google понимает вашу веб-страницу, тем больше шансов, что он сможет сопоставить ее содержимое с поисковым запросом, и тем больше шансов, что ваша веб-страница будет отображена в результатах чьего-либо поиска. В настоящее время поисковые роботы уже проверяют на наличие некоторых семантических элементов HTML5, чтобы собрать всю возможную информацию об индексирующих их веб-страницах.

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

Модифицирование традиционной HTML-страницы

Легче всего начать знакомство с новыми семантическими элементами, а также обучаться их применению для структурирования страницы на классическом HTML-документе и вставить в него некоторые облагораживающие элементы HTML5. На рисунке ниже показан первый пример, который вы можете попробовать реализовать:

Веб-страница построенная на классическом HTML

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

Структурирование страницы старым способом

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

В следующем листинге приводится сокращенная версия разметки:

<div class="Header">
   <h1>Язык C#</h1>
   <p class="Teaser">Краткое описание языка</p>
   <p class="Byline">взято на Лурке</p>
</div>

<div class="Content">
   <p><span class="LeadIn">C#</span> (&laquo;Си-шарп&raquo; ...</p>
   <p>...</p>
   <h2>История</h2>
   <p>...</p>
   <h2>Анти-история</h2>
   <p>...</p>

</div>

<div class="Footer">
   <p class="Disclaimer">Содержимое доступно в соответствии с лицензией Creative Commons Атрибуция.</p>
   <p>
      <a href="#">О нас</a>
      <a href="#">Контакты</a>
   </p>
   <p>Copyright © 2013</p>
</div>

В хорошо написанной, традиционной HTML-странице (подобной этой) большинство работы по форматированию отдается на откуп таблице стилей посредством контейнеров <div> и <span>. Элемент <span> позволяет форматировать отрывки текста внутри другого элемента. А элемент <div> — целые блоки содержимого, и устанавливает общую структуру страницы.

В данном случае перед таблицей стилей стоит легкая задача форматирования. Для всей страницы установлена максимальная ширина в 1000 пикселов, чтобы текст не отображался длинными строками на широкоформатных мониторах. Верхний колонтитул помешен в блок синего цвета, содержимое отцентрировано:

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
  max-width: 1000px;
  margin:0 auto;
}

/* Форматируем элемент <div>, который представляет верхний колонтитул 
   (как блок с рамкой и синей заливкой) */
.Header {
  background-color: #7695FE;
  border: thin #336699 solid;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

/* Форматируем все заголовки <hl> в элементе <div>
   верхнего колонтитула (заголовок статьи) и т.д */
.Header h1 {
  margin: 0px;
  color: white;
  font-size: xx-large;
}

.Header .Teaser {
  margin: 0px;
  font-weight: bold;
}

.Header .Byline {
  font-style: italic;
  font-size: small;
  margin: 0px;
}

.Content {
  font-size: medium;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  padding-top: 20px;
  padding-bottom: 5px;
  padding-left: 50px;
  padding-right: 50px;
  line-height: 120%;
}

.Content .LeadIn {
  font-weight: bold;
  font-size: large;
  font-variant: small-caps;
}

.Content h2 {
  color: #24486C;
  margin-bottom: 2px;
  font-size: medium;
}

.Content p {
  margin-top: 0px;
}

.Footer {
  text-align: center;
  font-size: x-small;	
}

.Footer .Disclaimer {
  font-style: italic;
}

.Footer p {
  margin: 3px;
}

Структурирование страницы с помощью HTML5

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

Чтобы исправить такую ситуацию, в HTML5 некоторые элементы <div> можно заменить более описательными семантическими элементами. Эти семантические элементы действуют в точности таким же образом, как и элемент <div>: они группируют часть разметки в блок, но не выполняют никаких собственных операций над содержимым блока; они также предоставляют "стилевую зацепку", позволяющую присоединять форматирование. Но кроме всего этого, они также добавляют в страницу семантический смысл.

Далее приводится разметка страницы, показанной на рисунке выше, но с применением новых элементов. В частности, два элемента <div> заменены HTML5-элементами <header> и <footer>:

<header>
   <h1>Язык C#</h1>
   ...
</header>

<div class="Content">
  ...
</div>

<footer>
   ...
</footer>

Соответственно изменятся и селекторы стилей CSS:

header {
  background-color: #7695FE;
  border: thin #336699 solid;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

header h1 {
  /* ... */
}

/* ... */

footer {
  text-align: center;
  font-size: x-small;	
}

footer .Disclaimer {
  font-style: italic;
}

footer p {
  margin: 3px;
}

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

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

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

<article>
   <header>
      <h1>Язык C#</h1>
      ...
   </header>

   <div class="Content">
     ...
   </div>

   <footer>
      ...
   </footer>
</article>

Конечная структура страницы показана на рисунке:

Схема разработанной страницы

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

В предыдущем примере мы удачно применили элемент <header>. Но кроме этого элемента в HTML5 добавлен еще один элемент для работы с заголовками: <hgroup>. Официальные правила его применения следующие.

Прежде всего, для обычных отдельных верхних колонтитулов, не имеющих специального содержимого, вполне подойдет один из пронумерованных элементов заголовка — <h1>, <h2>, <h3> и т.д. А заголовок и его подзаголовок можно вместе обернуть в элемент <hgroup> (но в таком случае не пытайтесь втиснуть туда что-либо другое, кроме пронумерованных элементов заголовка).

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

<header>
   <hgroup>
      <h1>Язык C#</h1>
      <h2>Краткое описание языка</h2>
   </hgroup>
   <p class="Byline">взято на Лурке</p>
</header>

Это, конечно же, несколько модифицированное содержимое из предыдущего примера: вместо элемента <р> подзаголовок обозначен элементом <h2>.

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

К счастью, эта проблема решается автоматически элементом <hgroup>. В структурном аспекте он обращает внимание только на заголовки верхнего уровня (в данном случае это <h1>). Другие заголовки отображаются в браузере, но они не включаются в схему документа. Такое поведение вполне логично, т. к. эти заголовки предназначены для обозначения подзаголовков, а не подразделов.

Вставка рисунков с помощью элемента <figure>

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

В общем, рисунки размещаются как плавающие объекты, т.е. их вставляют в первое удобное место в тексте, вместо того чтобы закреплять возле конкретного слова или элемента. Часто рисунки снабжены подписями, которые плавают вместе с ними.

В следующем листинге показан пример разметки HTML, которая добавляет рисунок к статье с помощью стандартного синтаксиса:

<div class="FloatFigure">
      <img src="image.jpg" alt="C-Sharp" />
      <p>Язык для промышленной разработки на платформе .NET Framework</p>      
</div>

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

/* Форматируем блок плавающего рисунка. */ 
.FloatFigure { 
   float:left;
   margin-left:0px;
   margin-top:0px;
   margin-right:20px;
   margin-bottom:0px;
}

/* Форматирует текст подписи к рисунку */ 
.FloatFigure p {
   max-width:225px; 
   font-size:small;
   font-style:italic; 
   margin-bottom:5px;
}
Добавление рисунка

Если вам уже приходилось раньше создавать подобный код для вставки рисунка то, возможно, будет интересно узнать, что HTML5 предоставляет новые семантические элементы, которые идеальным образом подходят для данного типа задач. В частности, вместо использования банального элемента <div> для контейнера рисунка можно использовать элемент <figure>. А текст подписи к рисунку помещается в элемент <figcaption> внутри элемента <figure> следующим образом:

<figure>
      <img src="image.jpg" alt="C-Sharp" />
      <figcaption>Язык для промышленной разработки на платформе .NET Framework</figcaption>    
</figure>

Добавление боковой панели с помощью элемента <aside>

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

Этот эффект можно с легкостью создать с помощью хорошо приработанного элемента <div>, но элемент <aside> предоставляет более осмысленный способ делать разметку того же самого содержимого:

<aside class="PullQuote">
   <img src="quotes_start.png">
   Большинство хороших программистов делают свою работу не потому, 
   что ожидают оплаты или признания, а потому 
   что получают удовольствие от программирования.
   <img src="quotes_end.png">
</aside>

В этот раз таблица стилей врезает плавающую цитату справа:

aside {
  float: right;
  max-width: 300px;
  border-top: thin black solid;
  border-bottom: thick black solid;
  font-size: 20px;
  line-height: 130%;
  font-style: italic;
  padding-top: 5px;	
  padding-bottom: 5px;	
  margin-left: 15px;
  margin-bottom: 10px;
}

aside img {
  width:40px;
  height:30px;
  vertical-align: bottom;
}
Метод размещения во врезке aside броской цитаты

Создание навигационных ссылок с помощью элемента <nav>

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

Большинство страниц имеет несколько блоков <nav>. Но не все ссылки требуется помещать в блоки <nav>, обычно этот блок резервируется для самых больших и наиболее важных разделов навигации страницы. Ниже показан пример использования этого элемента:

<nav>
   <ul>
      <li><a href="">Ссылка 1</a></li>
      <li><a href="">Ссылка 2</a></li>
      <li><a href="">Ссылка 3</a></li>
   </ul>
</nav>
nav {
    margin:10px;
    max-width:1000px;	
	background-color:#FF6633;
	text-align:center;
}

nav ul {
	list-style:none;
	display: inline-block;
}

nav ul li {
    float:left;	
	margin:0px 10px 0px 10px;
}

nav ul a {
	text-decoration:none;
    display:block;	
	color:#FFFFFF;
}
Элемент nav

Создание разворачиваемых блоков с помощью элементов <details> и <summary>

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

В этом отношении представляет интерес то обстоятельство, что HTML5 добавляет два семантических элемента, предназначенных для автоматизации этого поведения. Идея заключается в том, что разворачиваемый блок вставляется в элемент <details>, а заголовок блока — в элемент <summary>. Получим разметку наподобие следующей:

<details>
      <summary>Блок №1</summary>
      <p>Создание разворачиваемых блоков с помощью элементов details и summary</p>
</details>

Браузеры, которые поддерживают эти элементы, показывают только заголовок и какую-либо безделицу типа небольшого треугольничка рядом с заголовком. Когда пользователь щелкает по заголовку, блок разворачивается, показывая все свое содержимое. Браузеры без поддержки элементов <details> и <summary> покажут все содержимое с самого начала, не предоставляя пользователю никакой возможности свернуть его.

details и summary

Отношение веб-разработчиков к элементам <details> и <summary> несколько противоречивое. Многие из них считают, что эти элементы не совсем семантические, т.е. они имеют дело больше со стилем, чем с логической структурой.

Но пока лучше всего избегать использования элементов <details> и <summary> из-за низкого уровня их поддержки браузерами. Хотя можно было бы написать обходное JavaScript-решение для браузеров, не поддерживающих этих элементов, но для этого потребуется больше усилий, чем для написания нескольких строк JavaScript для выполнения операций сворачивания/разворачивания самостоятельно и к тому же на любом браузере.

Alexandr Erohin ✯ alexerohinzzz@gmail.com © 2011 - 2017