< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приемы верстки html-css » Основы семантической верстки на HTML5

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

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

Пост был обновлен: Сен 10, 2015

Привет всем! Вот и началась долгожданная олимпиада. Желаю все участникам больших успехов и удачи, ну и конечно же я очень болею за Россию, т.к. я сам россиянин. А теперь к теме поста. В данной статье поговорим о современной разметке HTML5, о ее преимуществах и важности в целом. Я все никак не мог перейти на html5, думал что это только новое совсем, не все браузеры поддерживают, в частности ИЕ 7-8. Но все оказалось не совсем так.

Сегодня html5 для разметки веб-страниц используется на полном ходу и практически все современные браузеры поддерживают данную разметку, хотя считается, что спецификация html5 находится еще на стадии разработки. Что касается интернет эксплорер 7-8 версии, то для них имеется специальный костыль, состоящий из небольшого javaScript’a. На мой взгляд верстать на html5 очень удобно, т.к. в первую очередь html5 это семантика. Здесь используются некоторые структурные элементы, с помощью которых структура документа становится легко читаемой и понятной не только человеку, но и поисковому роботу.

Итак, давайте разберем разметку html5 по шагам и начнем с самого начала документа — Doctype. Doctype в html5 записывается уже намного проще, так, что можно легко запомнить.

<!doctype html>

Обозначение кодировки прописывается следующим образом

<meta charset="utf-8" />

А было

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Чувствуете разницу? Код стал значительно легче и запомнить также очень легко. Также при подключении скриптов и стилей теперь не обязательно указывать type.

<link rel="stylesheet" href="style.css" />
<script src="javascript.js"></script>

Далее определяем язык:

<html lang="ru">

было:

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

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

<!--[if IE]>
<script>
     document.createElement('header');
     document.createElement('nav');
     document.createElement('section');
     document.createElement('article');
     document.createElement('aside');
     document.createElement('footer');
</script>
<![endif]-->

Данный скрипт также можно и подгрузить с сервера Гугл.

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

Далее перечислим основные структурные элементы:

<section> </section> — группирует какие либо тематические блоки (создаются секции), также поддерживается вложенность данного элемента
<header> </header> — определяет область заголовка раздела или страницы. Очень часто в верстке данным тегом обрамляют шапку сайта.
<footer> </footer> — определяет нижний колонтитул раздела или страницы. Обычно данным тегом обрамляют подвал сайта, в котором содержится информация о копирайте, контактах, условиях использования и т.д.
<nav> </nav> — размечает навигационную цепочку сайта. Здесь может быть меню сайта, блок хлебных крошек и др.
<article> </article> — определяет основное содержание сайта, например, отдельная статья.
<aside> </aside> — вторичный контент на сайте. Обычно данными элементами размечают сайдбары.

Читайте также:  Font-Face: подключение нестандартных шрифтов

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

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

Исходя из вышеизложенного можно набросать небольшой макет страницы на html5

<!doctype html>
  <html lang=ru>
    <head>
     <meta charset=utf-8>
       <title>Примерная разметка на html5</title>
         <link rel="stylesheet" href="style.css" />
           <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
             <![endif]-->
    </head>
<body>
   <header> Шапка сайта
      <nav>Меню сайта</nav>
   </header>
   <section id="content">
      <article>Статья</article>
      <aside>Боковая колонка (сайдбар)</aside>
   </section>
   <footer>Подвал сайта</footer>
</body>
</html>

Как видите, у html5 есть явное преимущество перед html4, как в плане разметки, так и в плане СЕО. О СЕО поговорим ниже.

Помимо основных тегов также часто используются и следующие теги:
placeholder (placeholder=»Текст») — выводит надпись в поле input, а при набирании текста он автоматически исчезает. Данный атрибут появился именно в html5, теперь отпадает использование дополнительных скриптов для вывода текста в поле, например в поле поиска.

<mark> </mark> — выделение какого либо важного слова или словосочетания. Обратите внимание на желтый фоновый цвет.

<adress> </adress> — данные теги служат для вывода адреса, например, адрес организации.

<video> </video> — выводит видео на сайте со стандартным плеером браузера.

<audio> </audio> — выводит аудио-запись на сайте стандартным плеером браузера

HTML5 и СЕО

Одно из ключевых особенностей HTML5 и на мой взгляд самое важное — это разделение поисковым роботом всех блоков по их значимости, т.е. сегментация веб-страниц. В html4 сделать это  было невозможно, т.к. стандартный тег div не добавляет смысловой значимости элементу, который находится внутри данного тега. С использованием новых элементов header, article, aside, footer все меняется. Т.е. грубо говоря, они «говорят» поисковым роботам каким элементам придавать значение, а какие пропускать. Например, поисковый бот легко поймет, что информация, заключенная между тегами <footer></footer> является копирайтом и подобной информацией для посетителя.

Читайте также:  Как выровнять горизонтальное меню по центру?

Элементы, влияющие на индексацию в поисковых системах

<article>

Тег article является одним из наиболее важных при сегментации страниц сайта. Данный тег явно указывает поисковым системам, где находится основной контент сайта. А мы все знаем, что контент это прежде всего то, за чем приходят посетители на сайт. Здесь предполагается, что ПС будут максимально уделять внимание контенту, заключенному между тегами <article> </article>, отбросив или отодвинув на второй план остальные элементы.

<section>

Элемент section разбивает всю разметку на различные секции. Что это дает? Поисковые роботы хорошо ориентируются на веб-странице, которая хорошо структурирована. Если правильно использовать тег <section>, то можно с легкостью построить информационную иерархию документа, а это в свою очередь улучшает индексацию сайта в целом.

<header>

C помощью тега header поисковые роботы легко могут найти на сайте логотип, название сайта, слоган, главную навигацию (главное меню).

<nav>

Данный тег определяет навигационную структуру на сайте.

Ссылки

В отличии от HTML4 в HTML5 ссылки имеют больше значимых атрибутов.

Вот основные атрибуты ссылок в HTML5:

alternate — ссылки на альтернативные адреса одной и той же страницы

author — ссылки, имеющие отношение к автору веб-страницы

external — ссылки, указывающие на внешние ресурсы

help — ссылки, ведущие на страницы помощи

next — ссылка ведущая на следующую часть страницы

nofollow — ссылка не подтверждается данным сайтом

prev — ссылка ведущая на предыдущую часть страницы

Остальные атрибуты можете посмотреть здесь.

Вот такой вот небольшой обзор разметки на HTML5. Что касается меня, то я давно перешел на верстку с использованием разметки HTML5 и большинство шаблонов на своих сайтах уже перевел на HTML5, вот только вот до данного блога никак руки не доходят.

На этом все. Всем пока. Увидимся в следующих постах.

А вы уже перешли на HTML5?

Пост был обновлен: Сен 10, 2015

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
голосов: 18, средний бал: 3,72 / 5
Загрузка...

Проверка орфографии

Система Orphus

11 комментариев к статье "Основы семантической верстки на HTML5"

  • Эдуард Шевцов Ноя 16, 2016 в 2:27

    Увы, это уже не работает и все сайты, которые были сделаны с этой примочкой — тихо полегли в старых версиях IE.

    • Заур Магомедов
      Заур Магомедов Ноя 16, 2016 в 20:09

      Что конкретно вы имеете ввиду?

  • Заира Окт 06, 2015 в 3:56

    nofollow появился только в html5? О.о

    википедия и запрос в гугле «полный список отличий html4 от html5» ничего такого не показывают

  • Заира Окт 06, 2015 в 3:38

    alternate — ссылки на альтернативные адреса одной и той же страницы» и что это дает? они не учитываются при индексации? даже если код ответа сервера 200 и кто-то поставит ссылку на дубльурл?

    а релканоникал тогда для чего?

    • Заира Окт 06, 2015 в 3:39

      rel=»canonical»

      • Заира Окт 06, 2015 в 3:40

        перепутала, это не урлы синонимы, а урлы омонимы

    • Заур Магомедов
      Заур Магомедов Окт 06, 2015 в 10:26

      Rel canonical — дает понять ПС какой из дублей канонический, т.е. основной, а какой нет.

  • Atur Bar Atra Апр 26, 2014 в 6:12

    Spasibo za legko-ponatnoe i priyatno-chetaemuyu statyu, ochen pomaglo.
    a dlya indeksaci poeskvova robata nenujni meta tegi?

    • Заур Магомедов
      Заур Магомедов Апр 26, 2014 в 18:48

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

  • Sergey Valeryevitch Мар 07, 2014 в 10:25

    Спасибо за обзор костыля html5.js! Очень полезная статья для тех, кто создает сайт на Joomla 3.

    • Заур Магомедов
      Заур Магомедов Мар 07, 2014 в 10:33

      Всегда пожалуйста… 🙂

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]