Что такое семантическая верстка
Если вы занимаетесь версткой или как-то связаны с этим процессом то обязаны знать что такое семантическая верстка. Но как показал мой опыт работы с заказчиками и другими фрилансерами многие неверно или не совсем точно трактуют и понимают это понятие.
Само слово семантика в лингвистике означает значение единиц языка, в логистике — отношение логистических знаков к понятиям. С греческого переводится как обозначающий. Исходя из этого можно сказать, что семантика кода — это правильность оформления кода.
Под правильностью оформления подразумевается не четкий, узаконенный список правил для верстки, а определенные не гласные требования и условия. В этом и заключается самая большая сложность семантики верстки — в ее не стандартизации, извините, за тавтологию. Она не имеет вид официального документа, а оформлена только как рекомендации и пожелания разработчиков и гуру верстки. Т.е. это всего лишь не гласные правила, исходя из которых каждый решает следовать им или нет.
Чистота кода
Самым главным столпом семантической верстки является чистота кода. Когда-то были времена табличной верстки со всеми стилями в html-документе, но эти времена давно прошли и сегодня время блочной верстки с разделением содержания от стилизации. Поэтому:
- Не используйте тег table для создания структуры сайта, вообще и совсем! Назначение этого тега только для таблицы с данными в контенте.
- Для структурирования содержимого используйте блочные элементы. До появления html5 это был только div. Сейчас же это целый набор тегов: header, footer, main, section, aside, article и т.д. Изучите их назначение и применяйте в своей работе.
- Выносите абсолютно все стилевое оформление в отдельный файл. В вашем html не должно присутствовать style=»color:red». Оставьте это для динамики JavaScript.
- В идеале подключается один css и один javascript файлы. И если с js файлами простительно разделение, то css желательно все-таки сводить в одному файлу.
- Не используйте font, i, b. Первый тег вообще вышел из спецификации, вместо него отлично подходит span, два следующих получили более новые аналоги em и strong, и, вполне вероятно, скоро тоже заменятся в спецификации.
- Комментарии в html это хорошо. Но если в меру. Не надо перегружать лишней информацией документ, указывайте только важные и нужные данные.
Правильность кода
Второй признак семантической верстки — правильность кода. Но не в том смысле какой тег как строиться или какие у него атрибуты (за это отвечает валидность кода), а в смысле структурности и наглядности.
- Не используйте теги не по назначению. Блочные должны создавать структуру, линейные структурируют текст, списки упорядочивают текст, ссылки должны быть ссылкой и вести себя именно как ссылка на другой документ. К примеру, не надо делать списки с помощью тега p или задавать расстояние между блоками div с помощью br.
- В документе не должно быть пустых тегов, даже если они со стилями. Самое распространенное <div class=»clear»></div>. Сброс обтекания можно сделать и другими способам, а вот лишний тег не имеющий смысла ни к чему.
Есть одно утверждение, с которым я полностью согласен: если отключить css и javascript на странице то вид документа должен остаться вполне читабельным и понятным. Такой код можно считать семантическим, т.е. все теги имеют свое место и назначение.
Что дает семантичность верстки?
Для пользователя, зашедшего на ваш сайт это не заметно, его браузер выдаст уже готовый вариант, каких бы фишек и костылей вы в коде не наставили. Он может даже и не предполагать что там «под капотом».
А вот для разработчиков и поисковых систем семантика кода очень важна. Для первых, из-за более удобного и упрощенного процесса работы над кодом, его правками. А для вторых, важна из-за лучшей и более быстрой индексации кода.
Вроде все вспомнил о семантике кода верстальщика и, надеюсь, я ответил на вопрос что такое семантическая верстка!
P.S. Есть вебмастера , которые говорят о том, как называть классы, о количестве отступов или табов. Некоторые даже пишут о порядке написания атрибутов в тегах. Но я бы не стал называть эти правила семантическими.