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