Войти Регистрация

Семантическая верстка: понятие и примеры семантического кода


Семантическая версткаЕсли вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Понятие семантической верстки

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

Как достигнуть семантики кода?

Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый  из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:

  • Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не B и STRONG.
  • При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
  • Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
  • Параграф блока текста создается с помощью P тега, но никак не DIV.
  • Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
  • То же самое по поводу JavaScript.
  • Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
  • Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.

Для большей ясности сути вопроса, смотрите схему семантической разметки текста:

Пример семантического кода

Семантическая верстка на практике – примеры HTML + CSS кода

Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.

Удаляем ненужные div теги

Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.

Пример 1:

Пример ниже показывает, как вы можете убрать div тег и дописать тот же стиль к form селектору.

Пример семантической верскти

Пример 2:

Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h4, мы можем просто применить margin отступ к h4 селектору и убрать лишний div тег.

Семантическая верстка - пример кода

Используем семантическую разметку кода

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

Пример:

Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.

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

Минимизируем использование div тегов

Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.

Пример 1:

Вместо использования div для создания навигационного пути, можно использовать p тег.

Семантический HTML код

Пример 2:

Пример ниже показывает, как можно использовать CSS, чтобы избавиться от двух лишних div тегов. Результат будет таким же.

Пример семантической верстки

Заключение

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



Дальше: Контент для людей, работает ли он для SEO?


Дискуссия по теме    24 Комментария 
Добавить комментарий
Альбатрос 28.02.2015 в 23:47
Не так давно только читал как ребята с пенкой у рта доказывали что разметка должна быть "ДИВной", теперь уже у них семантическая... и не дай бог див увидят, сразу антиСемитом назовут..
Любитель div 10.10.2014 в 02:49
<div id="wrap"> <div> Не самый лучший пример заменять блочный элемент <div> не блочным <p>. А ещё в хороших программах есть такая замечательная подстветка тегов. Запутаться.... ну нереально. </div> </div> <!-- end wrap-->
Александр 16.04.2015 в 13:55
Кто Вам сказал, что <p> - это не блочный элемент? Учите мат. часть http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy
Михаил 29.09.2014 в 13:30
Никогда не закрываю <P> и <LI>. Разница визуально отсутствует. Это тоже семантика?
Тарас 30.09.2014 в 19:07
Вообще то надо закрывать. Когда то это может вылезти боком в каком то из браузеров и их версиях. Ну и семантика само собой.
Надежда 07.06.2013 в 13:26
Возник вопрос. Удаление не нужных тегов div и есть семантика? Почему в крошках лучше использовать p, а не nav к примеру? Может подскажете статью про семантическую верстку с использованием HTML5?
Тарас 19.06.2013 в 22:45
Вот неплохие реккомендации от самого поисковика, собственно для него то все и стараются сверстать корректно: http://help.yandex.ru/webmaster/?id=1122752 И там же есть рубрика вопросов по семантической верстке: http://help.yandex.ru/webmaster/?id=1127476
Надежда 21.06.2013 в 14:28
Там принципы разметки именно для схемы, по этой же теме есть микроформаты. Но там нет ни слова о том, что нужно использовать те или иные теги, атрибуты схемы и классы микроформатов можно располагать в любых элементах. Все еще не понятно, почему же нужно использовать разметку абзаца для навигации. :(
Тарас 21.06.2013 в 14:36
Сколько людей, столько и мнений. Используйте div, главное не злоупотребляйте.
Тарас 21.06.2013 в 14:41
http://htmlbook.ru/html5
Alex 21.05.2013 в 20:32
Резюме. Читайте больше стандартов и меньше "откровений "специалистов", и у вас будет меньше глупых ошибок и стереотипов. P.S. Автор или модератор, объедините по возможности в один комментарий, или хотя бы поменяйте "Заполните правильно все поля" на нечто более информативное.
Alex 21.05.2013 в 20:30
Css код (приблизительно и схематично) #articles_list,#articles_list>li{list-style:none;clear:both;} #articles_list>li{}/*стиль начального текста статьи*/ #articles_list>li>h3>a{}/*стиль заголовка*/ #articles_list>li>div{float:left;background:...;}/*Дата публикации*/ #articles_list>li>div>span{display:block;}/*месяц (вторая строка в дате)*/ #articles_list>li>a{}/*стиль ссылки "читать далее"*/ Один див все-таки нужен. Согласно w3c - стандартизирующей организации web (в частности - html), <div> - контейнер, а <p> - абзац текста, что уместнее для блока даты публикации с точки зрения семантики - решайте сами.
Alex 21.05.2013 в 20:30
А теперь - маленький пример семантичного на мой взгляд кода. Тот же список заголовков статей, который разбирает автор аж в двух примерах. html код <ul id="articles_list"> <li> <h3><a href="..." title="">Заголовок статьи</a></h3> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр'ы <a href="..." title="">читать далее</a> </li> <li> <h3><a href="..." title="">Заголовок статьи</a></h3> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр'ы <a href="..." title="">читать далее</a> </li> </ul>
Alex 21.05.2013 в 20:26
Верстку можно считать семантичной, если она удовлетворяет двум требованиям: 1) теги должны использоваться по назначению; 2) страница без стилей не должна принципиально отличаться о страницы со стилями. Есть еще одно требование, имеющее опосредованное отношение к семантичности - верстка должна быть валидной, то есть соответствовать определенному стандарту языка разметки. Тупым избавлением от div семантичности не достичь. Могу привести массу примеров, где div не только желательно, но и необходимо использовать. За подробностями - в почту. Но речь не о том. Автор видимо несколько нечетко представляет себе зачем и для чего уменьшать глубину дерева тегов на странице. Браузеру не настолько принципиально минимальное количество дивов на странице, насколько важна минимальная вложенность элементов. Быстрее всего работают страницы, на которых теги расположены линейно а не иерархически.
Игорь 02.04.2013 в 17:42
Тарас, покажите пожалуйста пример семантической верстки такого блока: шапка, внутри слева логотип. p.s.: У вас комментарии на сайте ограничены всего одним вопросом, нет возможности продолжить тему после вашего ответа.
Тарас 03.04.2013 в 23:45
Вам действительно нужна помощь? или пытаетесь что-то доказать? Более чем уверен, у Вас хватает знаний как это реализовать. Так или иначе у меня нету времени. Извнините.
Игорь 27.03.2013 в 06:47
Удаляем ненужные div теги - Пример 2: И как же вы сделаете уникальный отступ между блоками? Лишний стиль или класс дописывать? Вообще все эти примеры хороши, тогда когда стили CSS пишутся отдельно чуть ли не для каждого элемента. Это стиль верстки когда что вижу то и верстаю по порядку. При такой верстке дублирование стилей неизбежно, а соответственно и превращение CSS файла в помойку. А если страница верстается последовательно начиная от общей структуры, углубляясь внутрь, выделяя общие стили (что значительно сократит CSS и придаст более читаемый вид), то помещать содержимое внутрь div с заранее определенными и прописанными классами - это более удобно и более быстро.
Тарас 27.03.2013 в 17:00
Если Вам нужна простота а не семантика, делайте все через div
Игорь 27.03.2013 в 06:33
Вместо: <div class="breadcrumbs"> <a href="#" title="">Главная</a> / О компании </div> использовать: <p class="breadcrumbs"> <a href="#" title="">Главная</a> / О компании </p> Только потому что вас "бесит"?
Тарас 27.03.2013 в 16:52
Можно использовать это не значит нужно использовать. Делайте как Вам угодно... повидимому это Вас бесит, потому что привыкли делать по другому. В статье описан вариант, а не единое правило для всех.
antonov 10.02.2013 в 20:54
пригодится спасибо дружище!!!вопрос.если делать небольшой сайт ну к примеру 4-5 страниц без сms,пару картинок влияет ли на скорость загрузки?вернее на сколько.или не стойт мне беспокойтся.Вот хоть убей я с самого начало привык писать так(где ты показываешь"так не рекомендую делать")Вот так и делаю,придется переделывать.
Тарас 10.02.2013 в 23:24
Смотря какие по весу картинки. Если страница суммарно будет весить 100-400 кб, это нормально, будет грузить быстро.
Артем 04.01.2013 в 19:12
"Удаляем не нужные div теги" "Не нужные" пишется слитно. А за статью спасибо.
Тарас 04.01.2013 в 22:23
Исправил! Спасибо за Ваш вклад в качество сайта!
Добавить комментарий
Просмотров: 34281