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

Главная > Статьи > Создание сайта > Семантическая вёрстка

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

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

Что такое семантически правильный документ? 
Я думаю, что для веб-разработчика очень важно пересматривать созданные ими самими html-документы с отключенным внешним форматированием, будь это CSS, Javascript и, если хотите, даже без изображений - только содержание.  А теперь пробегитесь по этой странице глазами. Вы можете в тексте найти заглавия и важные фразы?  Если ответ позитивен, то Ваш документ придерживается семантики.

Использование элементов семантической верстки.
  Следовательно, давайте поговорим о семантических html-элементах. В первую очередь, это элементы заглавий (от <h1> к <h6>), абзацы (<p>), списки (<ul>, <ol>), логического выделения наиболее важных фраз в тексте (<strong> - полужирным, <em> - курсивом), элемент формы, который связывает полет метки LABEL с полем формы (<label>).

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

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

При семантической верстке содержание находится в элементах семантической разметки с присвоенными css-стилями. Такой метод грамотный и современный! Необходимо разделять семантику документа и его оформления, что мы и получим при семантической вёрстке верстке.

В таблицах необходимо размещать только соответствующие табличные данные, такие как статистические данные, расписания и так далее  А теперь давайте я Вам наведу, как пример, 2 фрагмента кода с табличной и семантической вёрсткой html-документа, а Вы их сравните и скажете, какой лучше, более простой, более легкий, более элегантный и более понятный!

Разграничивайте семантику и оформление документа
  Осознайте для себя одну простую вещь: HTML отвечает за семантику документа, CSS – за его оформление. И никак иначе. Кроме этого используйте каждый элемент по его прямому назначению, например, никогда не используйте элемент заглавия с целью банального увеличения размера шрифта, а элемент <blockquote> для выделения тексту.

Мне часто ставят вопрос на счет элементов списка: «В каких случаях использовать маркированный, а в которых немаркирует списки?». Лично моя мысль такова, что главное его использовать по прямому назначению, то есть для создания списков, а другое уже на ваше усмотрение, потому что семантика - не внешний вид.

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