Структурная разметка с HTML5. Часть 1.
06.10.2017
Автор: Евгений Рыжков Дата публикации: 22.09.2010Последнее обновление: 02.03.2011
Одной из целей HTML5 было создать разметку более доступной и понятной. Одним из решений было добавить несколько новых структурных тегов.
Почти каждая веб страница при разметке разбивается на структурные блоки (секции). Такими структурными секциями являются шапка (header), подвал (footer), меню, блок контента и т.д. До прихода HTML5 веб разработчики для обозначения подобных блоков использовали нейтральный тег <div> добавляя ему смысловые имена классов или id (к примеру, <div id="header">). К этому все привыкли, но т.к. <div> не имеет смысловой нагрузки, разобрать и понять код такой довольно сложно. Например, с такими проблемами сталкиваются поисковые роботы. Им не помешала бы своего рода понятная карта.
Оформление элементов HTML при помощи CSS [GeekBrains]
Чтобы в разметке появилась подобная «карта» в HTML5 были добавлены структурные теги: section, nav, article, header, footer, aside. Это только основные теги, на них пока и остановимся.
Так какие же выгоды нам сулят новые теги
Поисковая оптимизация
Веб документы будет проще прочитать и проанализировать поисковыми роботами. Теперь им будет легче определить, где на странице основной контент, а где вспомогательные колонки, шапка и подвал, где навигация, а где просто ссылки со страницы. Так ссылки в навигации будут иметь вес меньше, чем ссылки находящиеся в статье, а основной контент больший вес нежели вспомогательный или комментарии (отпадет необходимость при верстке поднимать контент для поисковиков, меняя блоки местами всякими хитроумными приемами).
Знакомство с HTML5: элемент header
Так же поисковым системам будет проще определять где первоисточник, а где тыренный контент.