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

    Если ты считаешь себя вебмастером, пусть даже начинающим, то наверняка слышал советы «супер-вебмастеров» о так называемой вёрстке на дивах. Это считается высшей степенью мастерства, если ваш дизайн свёрстан без использования таблиц.

    В HTML таблицы должны использоваться только для вывода табулатурных данных, информации в Excel формате. Поэтому про таблицы мы сразу забываем, статья не о них.

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

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

    Представьте себе HTML-документ в виде дерева, например, яблони. Сначала у нас есть корень < html>, потом ствол < head>, а затем крона < body> с множеством ветвей, сучков, листьев, яблок. Допустим, что красные сочные яблоки — это контент, то есть, то, что вам нужно и что вы хотите получить от этой яблони (веб-страницы). Если на яблоне очень много ветвей и листьев, то вы можете просто не заметить яблок и не оценить, насколько хороши плоды на дереве перед вами. Если же веток не так много и листья не особо мешают, то вы увидите все яблоки, и при этом останетесь довольны.

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

    Существует такое понятие как «divitis». Оно испозуется для того, чтобы описать болезнь сайта, когда чуть ли не каждое слово или предложение обернуто в SPAN или DIV. Получается так, что чтобы добраться до какого-то предложения, необходимо пройти несколько уровней тегов, попасть в самую глубь. Например:

< div class="p">
  < div class="heading">Название< /div>
  < div class="post">Содержание< /div>
< /div>

< h2>Название< /h2>
< p>Содержание< /p>

    Теперь даже без CSS-правил (которые, кстати, не видят поисковые боты) ваш документ будет выглядеть читаемым и семантически правильным.

    Используйте простые правила, которые сделают ваш сайт быстрее (меньше тегов = меньше время на рендеринг), меньше по размеру (меньше кода = меньший размер в килобайтах), дружелюбнее в плане SEO (поисковые системы любят сайты с понятной структурой), и дружелюбнее для мобильных девайсов (не все они поддерживают все CSS-правила).

    Попробуйте отключить поддержку CSS и JavaScript в браузере и зайдите на свой сайт. Вы можете понять, где у вас меню, названия постов, содержание постов? Если всё перемешано и ваш глаз не может разобраться в структуре сайта, то вывод один — вам явно стоит задуматься над заменой DIV более подходящими тегами.

Какие теги и когда использовать?

• p — вокруг кусков текста. Это блочный элемент и занимает всю ширину.
• h1, h2, ... h6 — названия разделов, статей. Это заглавие, которое кратко описывает то, что идёт ниже.
• strong, em — для выделения определённых ключевых фраз, т. е. того, на что стоит обратить внимание.
• ul, ol — для создания списков. Отлично подходит для меню и выглядит очень понятно даже без CSS!

    Смотрите описания различных тегов для форматирования текста. Эти различные теги придуманы и существуют не просто так!

    Ещё один момент, который я открыл для себя недавно. Просто не думал как-то про это раньше.

    Большинство сайтов, особенно блоги, используют формат, в котором есть основной контейнер определённой ширины, он отцентрован и внутри него идёт весь контент. Обычно для реализации этого метода вебмастера используют такой подход:

< html>
< body>
    < div id="wrapper">
      < div id="logo">...< /div>
      < div id="content">...< /div>
      < div id="footer">...< /div>
    < div>
< /body>
< /html>

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

html{
   background-color:#ccc;
   text-align:center;
}

body{
   width:1000px;
   margin:0 auto;
   text-align:left;
}

    И вуаля! < div id="wrapper"> нам уже просто не нужен. Мы убрали один уровень, уменьшили глубину документа, сделали структуру HTML проще.

    Теперь, почему бы не заменить < div id="logo"> каким-то другим тегом, который будет иметь смысл без класса?

    Каким? Думам логически.

    Лого сайта у нас на странице показывается один раз, название страницы также используется один раз. Почему бы не объединить эти две вещи в единое целое? Заменив див с лого на h1!

    Этот тег должен использоваться один раз на странице, так как кратко описывает всё содержимое данного документа. А если мы знаем, что он используется всего один раз, то не нужно создавать никакие ID или аттрибуты CLASS. В нашем CSS-файле пишем правила:

h1{
   background:#fff url('images/logo.png') no-repeat;
   width:100%;
   height: 150px;
   padding:0;
   margin:0;
}

    Мы убили двух слонов одним выстрелом. Мы сделали тег для лого и вставили название страницы.

    В футере обычно мы пишем что-то вроде «Копирайт мой, ссылку вставлять обязательно при копировании» и т. д. Получается, что у нас там просто текст. Раз это текст, то почему бы его не обернуть в тег < P>, который для этого и предназначен? При помощи CSS ему можно придать любой вид.

    После этих простых изменений мы получаем такую HTML-структуру:

< html>
< body>
   < h1>...< /h1>
   < div id="content">...< /div>
   < p id="footer">...< /p>
< /body>
< /html>

    И ещё один момент по поводу картинок. Если картинка используется как часть дизайна, то прописывайте её как бэкграунд (фоновое изображение) в CSS-классе. Если же картинка используется, например, как часть какой-то статьи, то её нужно вставлять используя тег < IMG>.

    Ваш сайт должен выглядеть понятным без CSS, я именно это ставлю своей целью при вёрстке.

    На тему вёрстки можно написать очень много, я лишь слегка коснулся поверхности.

Автор текста: Pepper

Комментарии:

• Ray
  По поводу:
  "Если определенная картинка используется как часть дизайна, то прописывайте ее как бэкграунд в CSS классе. Если же картинка используется как часть какой-то статьи, например, то ее нужно вставлять используя тег IMG."
  Стоило бы написать, почему именно стоит так делать.
  В тэге img можно выставить title и alt, которые полезны в seo и читаются поисковыми системами.
• Pepper
  @Ray
  Статья рассчитана где-то на средний уровень знакомства с SEO и HTML. Если читатель разберется в основной мысли статьи, то он должен быть в курсе alt и роли прописанных размеров (width/height) в картинках, и насколько они важны.
  Это как бы отдельная тема, но я на 100% согласен, что можно дописать статью. Возможно, отдельно про картинки набросаю что-нибудь. :)
• MyOST
  в примерах бади не закрыт, а я думал я чегот не понимаю в коде :) потом понял что опечатка
• Pepper
  @MyOST
  Упс! Спасибо, подправил. Вот что бывает, когда часто используешь CTRL+C и CTRL+V. :D
• саша
  Спасибо автор, помог разобраться :) картинки с котэ классно придумано!
• Игорь
  С H1 вообще вы в корне не правы, в h1 должен быть заголовок статьи а не название сайта - как у вас на этом сайте...
• Pepper
  Этот шаблон — полное Г. Поэтому и H1 содержит название сайта, а не название статьи. Редактировать просто лень, т. к. СЕО оптимизация этого конкретного сайта мне совершенно неинтересна. Он создан для моих мыслей, а не для радости поисковиков. :)
  И, что значит "С H1 вообще вы в корне не правы"? Где я неправ? Про этот шаблон я уже написал выше. Да и вообще, этот конкретный сайт я даже не упомянал в статье.
• Игорь
  Т.е. вы предлагаете в шапку сайта фигачить название статьи что-ли?
• Pepper
  Я предлагаю читать статью и при этом не анализировать структуру этого блога. Я мог бы написать статью в ЖЖ или вообще конвертировать в PDF файл. Вы там бы тоже проверяли HTML структуру?
  В качестве примера я указывал другой сайт.