1. 1. Введение

HTML-разметка страницы пишется по определённым правилам, которые описываются в специальных документах — спецификациях. Спецификации разрабатываются сообществом разработчиков браузеров и профессионалов отрасли.

Это руководство поможет понять, как правильно написать семантическую HTML-разметку типовой веб-страницы.

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

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

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

Как происходит типичный процесс написания разметки:

• Получаем графический макет.

• Пишем по нему разметку в текстовом редакторе.

• Периодически открываем файл с написанной разметкой в браузере и видим результат.

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

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