1. 3. Подходы к разметке

Существует 3 подхода к разметке HTML-страницы:

• страница как документ,

• «дивянка»,

• страница как интерфейс.

1. Страница как документ. Подход воссоздаёт первоначальную логическую структуру документа.

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

1. «Дивянка»

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

Чтобы лучше понять разницу в первом и втором подходе, сравните 2 куска кода:

• Страница как документ aka Семантическая вёрстка

<header class="main-header">
 <div class="container">
   <nav class="main-navigation">
     …
   </nav>
 </div>
</header>

• «Дивянка»

<div class="main-header">
<div class="container">
  <div class="main-navigation">
     …
  </div>
 </div>
</div>

1. Страница как интерфейс

Страница представляется как пользовательский интерфейс для взаимодействия с сервисом или любым другим устройством.

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

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