Вопросы о семантической разметке. Что такое валидатор. Семантическая разметка и ее уникальный словарь в формате микроданных

В сегодняшней статье речь пойдет о довольно избитой теме, обсуждаемой на многих форумах, блогах и прочих сайтах с давних времен. Как показывает наша практика, более 50% владельцев сайтов не понимают, что такое семантическая разметка данных и для чего она нужна. Используют её либо с ошибками, либо просто чтоб было. О видах семантической разметки вы можете прочитать .

Что такое семантическая разметка?

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

Семантическая разметка - это способ формализовать значения при помощи различных стандартов (словарей) о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) при помощи синтаксиса (способа использования словаря) на веб-страницах ресурсов.

Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.

Давайте перечислим наиболее известные стандарты (словари) и остановимся более подробно только на двух из них, но об этом чуть позже.

Виды разметки данных

Data Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

Развитие стандарта приостановлено в связи с созданием словаря Schema.org. Поисковый робот Google может использовать данные, полученные с помощью данной разметки, но рекомендации сводятся к смене стандарта на Schema.org.

Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

Признаков использования данных из этого стандарта в поисковых системах не обнаружено.

FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.

Вроде со стандартом определились, с синтаксисом тоже.

Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки - улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.

Теперь давайте разберем, какие данные на сайте стоит разметить и какие поддерживаются поисковыми системами на данный момент (так как поддерживаемых сущностей с каждым днем становится всё больше).

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org

Товарные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

Каким образом получить данный сниппет?

У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка - наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы - переписка происходила практически в реальном времени.

Теперь перейдем к реализации разметки кулинарных сайтов.

40 мин.

Название рецепта

Порций 6

6шт.
Яйцаbr>

400гр.
Сахарный песок

……………………И т.д ингредиенты……………………………

100гр.
Какао

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

2100

Victory

.....

В Гугле наш красивый сниппет:

Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

Полезные ресурсы о schema.org

Валидаторы микроразметки:
- Валидатор от Яндекса https://webmaster.yandex.ru/tools/microtest/
- Валидатор от Google https://search.google.com/structured-data/testing-tool/
Поддерживаемые стандарты и форматы Яндекса: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
Ускорить появление размеченной информации в Google вам поможет инструмент « ».
Посмотреть, как выглядит определенная страница в выдаче, вам поможет оператор site:адрес проверяемой страницы. Работает как в Google, так и в Яндексе.
Также от компании Гугл есть прекрасный инструмент «Мастер разметки структурированных данных» - https://www.google.com/webmasters/markup-helper/?hl=ru
Для стандарта Open Graph от компании Facebook:

Семантическая разметка Shema.org для SEO

Семантическая разметка Shema.org

Использование семантической разметки Shema.org — одна из последних тенденций в SEO. Семантическая разметка является одним из самых новых, мощных, и при этом точно наименее используемых методов поисковой оптимизации. После того, как вы поймете концепцию и способы семантической разметки, вы можете значительно улучшить позиции своего сайта в результатах выдачи поисковых систем (SERPs).

Моя цель в этой статье, показать вам, что начать использовать семантическую разметку Shema.org для вашего сайта достаточно просто.

Что из себя представляет семантическая разметка

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

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

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

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

Например, скажем, в статье появляется слово «Иван Сергеев». Поисковая система видит это, и выводит в выдачу слова Иван Сергеев. Тем не менее, если поставить правильную семантическую разметку схемы вокруг имени «Иван Сергеев», поисковик поймет, например, что Иван Сергеев является автором статьи.

Schema.org объясняет это следующим образом :
Большинство веб-мастеров знакомы с HTML-тегами на своих страницах. Как правило, HTML-теги сообщают браузеру, как отображать информацию, содержащуюся в теге. Например, Аватар сообщает браузеру, чтобы отобразить текстовую строку «Аватар» в формате заголовка 1. Тем не менее, HTML тег не дает никакой информации о том, что означает, что текстовая строка — «Аватар» может относиться к чрезвычайно успешному 3D фильм, или он может относиться к картинке у профиля на форуме, и это делает ваш текст более трудным для понимания поисковыми системами и отображения его для пользователей в поисковой выдаче.

Вот эту проблему и решает семантическая разметка Шема.орг

Семантическая разметка и ее уникальный словарь в формате микроданных

Shema.org – сайт, созданный совместной командой из Google, Bing и Yahoo. Нечасто конкуренты собираются вместе, чтобы помогать друг другу, но Schema.org — именно такого рода межотраслевое сотрудничество. Итог этого сотрудничества — согласованный набор кода, который объясняет основным поисковым системам, что делать с данными на вашем сайте.

Что самое приятное — вам не нужно изучать новые языки программbрования, так как шема.орг использует обычный HTML.
Семантическая разметка была изобретена для пользователей

Если у сайта правильная семантическая разметка, пользователи могут видеть в результатах поиска не только обычную информацию, но и информацию о тематике сайта, о том, кто его создатели, где они находятся, что они делают, сколько стоят их товары, а также множество других вещей. Некоторые люди стали называть семантическую разметку «ваша виртуальная визитная карточка».

Это улучшение ориентированное на пользователей. Поисковые системы существуют для пользователей и чем более точную информацию они им дают, тем лучше для всех. Схема разметки помогает именно в этом, а значит подключая ее на свой сайт, мы улучшаем свои позиции в поисковой выдаче.

Схема разметки помогает вашему сайту быть выше в поисковой выдаче для всех видов типов контента. Существует разметка семантических данных для:
Статей
Местных предприятий
Ресторанов
Телесериалов и рейтингов
Отзывах о книгах
Фильмах
Применение программного обеспечения
Мероприятий
Продуктов
для сотен других тематик и типов информации — от магазинов игрушек до медицинских графиков.

В одном из исследований установлено, что сайты с семантической разметкой находятся в среднем на четыре позиции выше в поисковой выдаче, чем сайты без нее. Хотя еще не совсем ясно, обусловлен ли этот более высокий результат только разметкой, но очевидна некоторая корреляция. На данный момент, одна треть результатов поиска Google включает сниппеты, которые содержат в себя разметку от шема.орг. Другими словами, есть миллионы сайтов, не использующих этот источник своего SEO-потенциала. При использовании семантической разметки вы автоматически опережаете подавляющее большинство ваших конкурентов.

Как использовать схемы разметки на своем сайте

Теперь, давайте поговорим о том, как использовать семантическую разметку на вашем сайте .
Внимательно смотрите на ваш сайт и выполняйте следующие действия.
1. Заходим Google’s Structured Data Markup Helper.

2. Выбираем тип данных, которые вы планируете разметить на своем сайте (или уже разместили)
Есть несколько вариантов в списке. Перечень не является исчерпывающим. Для образца мы будем использовать тип «Статьи» , так как это один из наиболее распространенных типов контента.

3. Вставляем в URL страницы или статьи, которую вы хотите разметить (также вы можете вставить туда свой HTML-код).

4. Затем нажимаем кнопку «Начать разметку (Start Tagging)»

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

5. Выделяем и выбериаем тип элементов, которые необходимо разметить.
Так как это статья, нужно выделить название статьи, чтобы добавить разметку «Name» разметку. После выделения названия я выбираю «Name» в панели инструментов.

Когда я выбираю «Name», инструмент добавляет его в «Элементы данных» Data Items в правой панели

6. Продолжаем добавлять элементы разметки.
Используйте список элементов данных в качестве руководства, и выделяйте другие детали в вашей статье, чтобы добавить их в список разметки. Вы, вероятно, не сможете пометить каждый элемент в списке. Просто добавьте все, что сможете.

7. Создаем HTML.
После того, как вы закончите, нажмите кнопку «Создать HTML»

На следующей странице вы увидите HTML вашей страницы с соответствующими микроданными, вставленными в местах, которые вы выбрали.

8. Добавляем схемы разметки на вашу страницу.

Зайдите в вашу CMS (или в исходный код, если вы не используете CMS) и добавьте выделенные фрагменты в соответствующие места. Найти желтые маркеры на полосе прокрутки, чтобы найти код сементической разметки.

Есть Простая альтернатива — загрузить автоматически сгенерированный HTML-файл и копировать / вставить его в CMS или исходный код.

При нажатии кнопки «Готово» вы увидите «Следующие шаги»

9. С помощью Structured Data Testing Tool вы увидите как ваша страница будет выглядеть с дополнительной разметки.

При необходимости можно редактировать HTML непосредственно в инструменте тестирования для того, чтобы обновить схему и просмотреть результаты снова.

Найдите схемы, которые используются чаще всего.
Schema.org предоставляет список наиболее распространенных типов схемы разметки. Вы можете посетить страницу Организация схем Organization of Schemas, чтобы увидеть этот список. Найдите там типы, которые лучше всего подходят для вашего бизнеса.

Найдите любой тип схем, которые вам нужны.
Как я уже говорил ранее, существует множество типов разметки. Чтобы получить полный список, посетите «The Type Hierarchy». Этот список содержит большинство доступных типов разметки.

Чем больше разметки, тем лучше.
Schema.org в инструкции четко объясняет: «чем больше контента вы размечаете, тем лучше». Однако учтите, что там также говорится: «Вы должны размечать только тот контент, который виден людям, которые посещают страницы, а не содержится в скрытых DIV или других скрытых элементах страницы». За такое вас скорее накажут, чем похвалят.

А вы используете семантическую разметку для сайта вашей компании?

Массив содержит строки - элементы списка . На самой HTML - странице размещен тег

программно создать элемент < li > ;
добавить созданному элементу HTML - код содержимого;
добавить элемент в список.

Программно это будет выглядеть следующим образом:

var list = document.getElementById("list"); for (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }

Таким образом при вызове функции сформируется содержимое списка с id="list" .

Сформировать группу ссылок немногим сложнее, поскольку помимо текста ссылки, элемент должен содержать адрес перехода. Для этого нам понадобится массив следующего вида:

var links = ; links = {name: "first", href: "document1.html"}; links = {name: "second", href: "document2.html"}; links = {name: "third", href: "document3.html"}; links = {name: "fourth", href: "document4.html"};

На HTML - странице определен контейнер

. Последовательность добавления ссылки в контейнер выглядит так:

программное создание элемента ;

задание текста ссылки;

задание значения атрибута href ;

добавление ссылки в контейнер.

Следующий код иллюстрирует программную реализацию указанной последовательности действий:

var nav = document.getElementById("navigation"); for(var j = 0; j

Разумеется генерировать содержимое можно не только на основе массивов, в рамках последующих практических занятий мы рассмотрим пример формирования содержимого различных элементов на основе использования хранилищ данных .

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

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

Семантика , как научная дисциплина, изучает значение единиц языка. В IT под семантикой понимается формализация конструкций языков программирования.

Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

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

В HTML5 предусмотрен ряд тегов, позволяющих явно указать что тот, или иной контент относится к определенной части веб - страницы, либо указывающих на то, чем контент является (цитата, время и дата и т.п.).

Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами .

Помимо уже сказанного можно выделить следующие преимущества семантической разметки:

Повышается доступность, т.к. страницы сайта не потеряют своей структуры даже при отключенном или неподдерживаемом CSS .
Контент страниц сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.
Семантическая разметка оказывает положительное влияние на поисковые системы , т.к. их роботам не составляет труда индексировать страницы и определять истинное значение тех или иных фрагментов текста.
Значительно упрощается дальнейшая поддержка подобным образом сверстанного сайта, снижаются затраты на редизайн.
Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.

Таким образом, HTML теги могут быть разделены на семантические и теги представления.

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

Таблица 14.1.

Тег	Описание
a	предназначен для создания cсылки или якоря
abbr	указывает, что содержимое тега является аббревиатурой
acronym	указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово)
address	содержит информацию об авторе
area	применяется внутри контейнера < map > для создания карты-изображения. Определяет параметры активных зон-ссылок на карте
base	указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы
bdo	устанавливает направление вывода текста (справа налево, слева направо)
blockquote	выделяет цитату (как правило длинную). Отображается с увеличенным отступом
body	определяет границы тела документа . Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы
button	создает на форме кнопку
caption	создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы
cite	используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом
code
col	позволяет задать общие свойства сразу для всего столбца таблицы
colgroup	позволяет задать общие свойства сразу для нескольких столбцов таблицы
dd	и . Задает определение термина
del	обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста
dfn	выделяет в тексте термин
div	выделяет логический блок. Один из основных элементов блочной верстки
dl	используется при создании списка определений вместе с и
dt	используется при создании списка определений вместе с и
em	используется для акцентирования внимания
fieldset	предназначен для группировки элементов формы
form	создает форму на странице. Форма применяется для обмена данными между пользователями и сервером
h1, h2, h3, h4, h5, h6	используются для создания заголовков
head	заголовок документа, содержит информацию о текущем документе
html	тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype , который должен быть расположен перед тегом
img	добавляет на страницу изображение
input	позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге
ins	обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста
kbd	обозначает текст набираемый на клавиатуре или сочетания клавиш
label	позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши
legend	определяет заголовок для элементов форм, сгруппированных в контейнере тега
li	создает элемент списка
link	устанавливает связь с внешними документами, чаще всего с таблицами стилей
map	тег-контейнер для создания карты-изображений
meta	содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств
noscript	содержит текст, который выводится браузером
object	используется для внедрения на страницу различных объектов (как правило медиафайлов)
ol	создает нумерованный список
optgroup	тег-контейнер для тегов
option	задает отдельную строку списка в теге
p	предназначен для создания абзацев
pre	определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки
q	выделяет в тексте цитату
samp	обозначает текст, как код программы или формулу
script	добавляет на страницу скрипт
select	создает элемент выбора значений
span	используется в основном для оформления и/или назначения уникального идентификатора (id ) определенному фрагменту текста
strong	логически выделяет, усиливает текст.
style	задает таблицу стилей
table	определяет таблицу
tbody	применяется для группировки строк, с целью задать общее форматирование
td	задает ячейку таблицы
textarea	определяет многострочное поле для ввода.
tfoot	применяется для определения строки, которая будет отображаться внизу таблицы
th	определяет ячейку-заголовок таблицы
thead	применяется для определения строки/строк, которые будут отображаться вверху таблицы
title	определяет заголовок документа
tr	определяет строку таблицы
ul	создает маркированный список
var	обозначает имя переменной

Нами приведен не полный

В последнее время в мире seo применение микроразметки (семантической разметки) для различных целей становится всё более и более популярным. Хотя микроразметка начала использоваться ещё несколько лет назад, сейчас мы наблюдаем её активное развитие как в Яндексе, так и в Google. Тому подтверждение последние публикации в блоге Яндекс для веб-мастеров: «Микроразметка для крупных сайтов» и «Товарные сниппеты для интернет-магазина» .

Google также занимается данным направлением, примером чего является доработки сниппетов в основной выдаче, о которой далее и пойдет речь в этой публикации.

Цель семантической разметки

Основная цель микроразметки - предоставить структурированные данные поисковой системе о товаре/услуги или любом другом материале, размещенном на странице. С использованием семантической разметки стало возможно выделять важную информацию на странице, разграничивать и структурировать контент по типу. Это легко понимают поисковые системы, они предоставляют пользователю именно ту информацию о странице, которую вы хотите донести .

Каждая микроразметка имеет свой словарь (некая база различных команд, классов, подклассов), который она понимает и способна правильно обрабатывать. Словари достаточно обширные, но всю библиотеку можно найти на специализированных сайтах (в статье приведены ссылки на библиотеки для наиболее популярных).

(Данные за 2014 год)

Рассмотрим основные виды семантической разметки:

1. Open Graf
2. Data Vocabulary
3. Schema.org
4. UTF символы

1. Open Graf

Open Graf используется для создание информативной ссылки для передачи в социальных сетях. То есть возможно самостоятельно вписать нужный текст и картинку, чтобы пользователи, кликая на лайк, распространяли ваш контент в максимально презентабельном варианте.

Изначально Open Graf создавался именно для Facebook, но сейчас данную микроразметку поддерживают многие социальные сети.

По использованию Schema org.

4. UTF символы

UTF символы (★ ☒) не являются микроразметкой как таковыми, но в целом с точки зрения seo имеют одинаковую цель, что и семантическая разметка - повысить CTR ссылки на поиске. Поэтому стоит рассмотреть это в данной пубикации.

Логика простая: используем короткие description (желательно не более 160 символов) и добавляем в них любые UTF символы, которые улучшат привлекательность ссылки. На сегодняшний день существуют более 100 различных символов.

По моим исследованиям, Google в 85% случаев обрабатывает данные символы. Яндекс же делает это очень редко, но если удается получить такой привлекательный сниппет, то CTR начинает сильно расти, особенно для 1 страницы выдачи. Это огромный бонус на фоне конкурентов.

Например, для запроса - “светодиодные люстры” все сайты из ТОП-3 в Google используют UTF символы:

Семантическая разметка - перспективное направление. В этой публикации было рассмотрено её использование для коммерческого seo, а именно - для поднятия CTR ссылки в органическом поиске . Здесь нет углублений в подробности кода, а приведены уже готовые примеры, в том виде, в котором их видит пользователь, и которые действительно работают на практике.

Если тема действительно интересна, то подробное использование того или иного формата легко можно изучить, перейдя по вышеприведенным ссылкам.

Что такое семантика в HTML

Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.

Семантическая вёрстка веб-документа

Семантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.

Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:

Главное верхнее меню сайта

Содержимое веб-страницы

Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:

Шапка сайта

Содержимое веб-страницы

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

Зачем нужна семантическая вёрстка

Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего - семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие - лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?

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

Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов и на и . HTML5 - не в пример «семантичней» и это видно из приведённого примера.

Новые популярные семантические теги HTML5

Прежде всего, - простой и понятный всем доктайп.

Похожие публикации

Пошаговый мануал как ввезти технику, на которую отсутствует нотификация фсб

Бонусная программа МТС «20% возвращаются

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

Программы для самостоятельного проектирования дома на компьютере