Семантическая верстка сайта: HTML5

Привет, уважаемые читатели блога.

Мы с вами уже не раз касались темы верстки сайта, в частности, рассматривали основы работы с html-кодом и редактирования css-стилей. Сегодня мы пойдем дальше и разберемся с тем, что такое семантическая верстка сайта, для чего она нужна и как ее применять на практике. Для понимания данной темы важно предварительно изучить хотя бы основные принципы html и css, либо же постигать новую информацию по ходу прочтения сегодняшней статьи, обращаясь за разъяснениями к более ранним статьям на моем блоге.

Содержание:

1. Что такое семантическая верстка: суть и значение
2. Примеры использования
3. Основные теги HTML5

Семантическая верстка в HTML

Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.

Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги <b> или <strong>, то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.

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

Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

Примеры семантической верстки HTML5

Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега <em> (от английского emphasis – акцент). Тег <em> заменил тег <i> (выделение курсивом). Для тега <em> в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег <cite>, хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег <i> (выделены курсивом).

А теперь приведем пример, как верстка дивами заменяется семантической.

Пример обычной верстки:

1
2
3
4
5
6

<div class=”new”>
<div class="article">
<div class="title">Заголовок поста</div>
<div class="text">Текст поста</div>
</div>
</div>

Замена на семантическую:

1
2
3
4
5
6

<section class="new">
<article>
<h1> Заголовок поста </h1>
<p> Текст поста </p>
</article>
</section>

Здесь мы использовали теги семантической верстки: section, article, h1, p.

Стили прописываются, как правило, в отдельном в файле (в случае с WordPress в style.css) следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12

header {
width: 90%;
margin:auto;
}
h1{
text-align:center;
font-size: 2em;
}
nav {
background:#f1f1f1;
color:#777;
}

В случае верстки с div, данное описание выглядело бы так:

1
2
3
4
5
6
7
8
9
10
11
12

div.header{
width: 90%;
margin:auto;
}
div.header  span{
text-align:center;
font-size: 2em;
}
div.menu {
background:#f1f1f1;
color:#777;
}

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

Распространенные теги HTML5 для семантической верстки

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

<header> — задает шапку сайта или раздела, в него обычно включен заголовок, а также внутрь могут помещаться другие теги, кроме более высоких по иерархии (html, body, head и т.п.)

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

<section> — разделяет веб-документ на смысловые секции, есть возможность вкладывать один тег section в другой

<footer> — подвал сайта, где содержится информация о контактах, адреса, ссылки, авторство и прочее

<nav> — тег html5 для навигации по сайту, в него помещаются наиболее приоритетные ссылки, хотя допустимо использование нескольких тегов на странице

<aside> — блок неосновного контента, как правило, боковая панель (сайдбар): рекламные блоки, рубрики, метки и т.д.

Теперь, зная вышеприведенные теги, посмотрим, как они работают на примере ниже.

Прописываем такой код в редакторе Notepad или Блокноте:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<header>
  Шапка сайта
</header>
<nav>
  Навигация
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
  </ul>
</nav>
<section>
  Секция 1
  <article>
    <h1>Заголовок статьи</h1>
    <p>Контент</p>
       <h2>Подзаголовок статьи</h2>
  </article>
</section>
<footer>
  <p>Дата, адрес, авторство</p>
</footer>

Теперь запустим документ, как html-файл.

Далее нам необходимо задать стили для каждого элемента. В нашем случае, добавим тег <style> с описаниями в уже созданный html-файл. Если же вы вносите изменения на сайте на WordPress, добавляйте правки в файл стиле style.css.

Итак, общий вид нашего файла style.css будет таким:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

  header{
    text-align:center;
    background:#FF0000;
  }
  nav {
    float:right;
    width:300px;
    background:#3CB371;
  }
  section {
    float:right;
    margin:10px auto;
    width:1250px;
    background:#808080
  }
  section h1 {
    color:#800000;
    padding:10px;
    text-align:center;
  }
  article {
    float:left; 
    width:595px;
    margin:5px;
    padding-left:5px;
    text-align:center;
    background:#800080;
  }
  article h2 {
    width:250px;
    margin:10px auto;
    text-align:center;
    background:#D2691E;        
  }
  footer {
    clear:both;
    height:40px;
    padding:10px;
    background:#00FFFF;
  }
  footer p {
    font-size:14px;
    text-align:center;
  }

Подробно изучив приведенный код, вы увидите, что для каждого тега (header, section, article, footer) заданы расположение, ширина, цвет заливки или шрифта.

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

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

• <video> — воспроизведение и управление видео;
• <audio> — добавление и управление аудио на странице;
• <canvas> — область для создания изображений и других объектов Javascript;
• <command> — кнопка или переключатель внутри тега <menu>;
• <menu> — создание меню и контейнер для тега <command>;
• <datalist> — список вариантов, доступный после ввода в текстовом поле (пример такого списка – подсказки Google);
• <figure> — группирование элементов (например, изображения с подписями);
• <hgroup> — группирование заголовков и подзаголовков;
• <mark> — смысловое выделение текста;
• <meter> — вывод значений в заданном диапазоне, как правило, числовые данные;
• <ruby> — добавление аннотации сверху или снизу основного текста (пример – транскрипция под словами);
• <source> — вставка аудио- или видеофайла внутри тегов audio, video;
• <time> — текст внутри тега приобретает значение даты, времени;

Напоследок, смотрите познавательный видео-урок по основам html5, его тегами и примерами их использования:

При должной устремленности, вы обязательно сможете освоить необходимые  знания. Верьте в свои силы.

До новых встреч!