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

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

32 249 в Html5, Css3 11

Привет всем! Вот и началась долгожданная олимпиада. Желаю все участникам больших успехов и удачи, ну и конечно же я очень болею за Россию, т.к. я сам россиянин. А теперь к теме поста. В данной статье поговорим о современной разметке 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> — вторичный контент на сайте. Обычно данными элементами размечают сайдбары.

Читайте также:  Html шаблонизатор Pug, документация на русском

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

Читайте также:  Фреймворк Twitter Bootstrap - что это такое?

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

<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?

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (22 оценок, среднее: 3,77 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории