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

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

Например, имеется такой текст:

Откуда берутся дети. Всем детям в детстве на вопрос откуда они появились, родители очень уверенно отвечают, что их нашёл в капусте аист и принёс в клюве…

Попробуем семантически разметить этот контент. Для начала заключим первые три слова в теги заголовка первого уровня, потому что судя по всему они представляют собой название статьи, вот так:
<h1>Откуда берутся дети.</h1>

Остальной контент представляет собой абзац статьи, поэтому заключим его в теги абзаца, вот так:
<p>Всем детям в детстве на вопрос откуда они появились, родители очень уверенно отвечают, что их нашёл в капусте аист и принёс в клюве…</p>

Далее уместно выделить ключевые слова в тексте, которые раскрывают тему статьи, например фразу <strong>нашёл в капусте аист</strong> заключим в элемент strong.

Посмотрим что из этого вышло на примере ниже:

HTML Вывод
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Откуда берутся дети.</h1>
  <p>Всем детям в детстве на вопрос откуда они появились, родители очень уверенно отвечают, что их <strong>нашёл в капусте аист</strong> и принёс в клюве…<p>
</body>
</html>

Откуда берутся дети.

Всем детям в детстве на вопрос откуда они появились, родители очень уверенно отвечают, что их нашёл в капусте аист и принёс в клюве…

 


Для того чтобы проверить разметку на наличие ошибок, необходимо выполнить валидацию кода. Валидация выполняется согласно тому формату HTML который Вы указали в теге <!DOCTYPE>. Про форматы можно почитать здесь. Страницы HTML которые прошли валидацию и в которых нет ошибок называются валидными. Они будут хорошо отображаться во всех браузерах и легче загружаться.

Приведём пару ресурсов на которых можно проверить свой код.

Кстати, в такие браузеры как Firefox, Chrome, можно установить специальные расширения, тогда разметку на валидность можно будет проверять прямо в браузере.

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

Поделиться