семантическая вёрстка html Как создать свой сайт > Вебмастеру > Создание своего сайта > Семантическая вёрстка страниц сайта в HTML

Семантическая вёрстка в 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 структуру?
    В качестве примера я указывал другой сайт.
Отзыв посетителя:

Здравствуйте, Алексей. Хочу сказать вам Спасибо за блог. Особенно за раздел по HTML - всё по полочкам и настолько понятно, что даже у таких новичков, как я, не возникло особых трудностей с созданием ссылок, анкоров, таблиц.

 

Оставить комментарий, поделиться мнением или задать вопрос...

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Как заработать на html-сайте Как заработать копирайтеру

Ещё материалы по этой теме:

какой хостинг нужен сайту какой домен подойдёт сайту как вставить код PHP в HTML как сделать favicon.ico создание платного сайта
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!