(X)HTML – структура и семантика кода

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок – используйте для него елементы Heading(h1h6), если абзац/параграф – paragraph(p). Если у вас есть список – используйте элементы списков (ul/ol), если вы цитируете – используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.
Есть два момента, которые нужно помнить всегда:

  • (X)HTML предназначен для разметки содержимого и только
  • CSS предназначен для визуального оформления содержимого

Почему семантика? Я приведу важные на мой взгляд аспекты:

  • Структурированый код гораздо лучше читается поисковиками
  • Код будет понятен не только автору, но и тем, кто будет работать с ним после него
  • Работа с DOM’ом становится проще и доступнее.

Не стоит путать семантику и валидность. Если документ валиден, это еще не значит что он семантически корректен. Валидатор не знает, к примеру, что вы вместо заголовков использовали жирный шрифт, оформленный в CSS, или же что ваш список ссылок, совсем не список, а параграфы через перенос строки.

Кстати валидность, по моему мнению, относится к минимальным требованиям к коду и является обязательной. И это не дань моде, а порядок и инструмент самопроверки. Но это отдельная тема.

Некоторые основные элементы разметки

Заголовки
Используте элементы h1h6 для оформления заголовков документа. Не пытайтесь “подделать” заголовки визуально с помощью CSS, это черевато проблемами с поисковиками.

<h1>Заголовок</h1>
<h2>Подзаголовок</h2>

Абзац/Параграф

Пользуйтесь элементом p для создания абзацев в тексте, не обрывайте строку с помощью br. (И помните, в HTML-документе, не может быть текста, не “обернутого” в теги). Элемент br можно использовать, но надо делать это с умом.Неверно:

Мама мыла раму<br />
Папа курил Приму 

Верно:

<p>Мама мыла раму</p>
<p>Папа курил приму</p>

Выделение текста

em
Используйте элемент em для выделения текста из общего контекста. Если раньше вы использовали для этого элемент i, делающий текст наклонным, то прекратите это, так как в данном случае выделение будет сугубо визуальным, а в случае использования em, еще и логическим.

strong
Элемент strong пришел на замену элементу b. Логика использования примерно та же, что и в em/i, с той лишь разницей, что в данном случае выделение текста будет жирным шрифтом.

Неверно:

Здесь есть <i>выделеное</i> слово 

Верно:

Здесь есть <em>выделеное</em> слово 

Цитирование
Элемент cite хорош для выделения коротких цитат внутри текста, и является строчным элементом.
Элемент blockquote также используется для цитирования, но будет полезен для больших цитат, вынесеных в отдельные блоки. Является блочным элементом.

Примеры:

<p><cite>Девелопер предлагающий крэки, подобен корове, рекламирующей говядину</cite> - Paradigm.ru</p>

Дополнительно, можно использовать атрибут cite элемента blockquote для указания источника цитаты:

<blockquote cite="http://www.w3c.org">The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.</blockquote>

Списки

Если у вас есть списки (к примеру меню – это ничто иное как список ссылок) – используйте элементы списков ul/ol, ненумерованый и нумерованый список соответственно. Оформление списков в CSS позволяет добиться очень впечатлающих результатов.

Неправильно:

<a hrеf="about.html">Обо мне</a><br/>
<а hrеf="services.html">Услуги</a><br/<
<а hrеf="notes.html">Заметки</a><br/>
<а hrеf="grandma.html">Бабушка</a>

Правильно:

<ul>
<li><а hrеf="about.html">Обо мне</a></li>
<li><а hrеf="services.html">Услуги</a></li>
<li><а hrеf="notes.html">Заметки</a></li>
<li><а hrеf="grandma.html">Бабушка</a></li>
</ul>

Определяющие списки

Определяющие списки (dl) созданы для определения чего-либо и его описания. В отличии от обычных списков, в dl изначально указывается dt(definition term) – термин, а затем его описание/я dd(definition description). Определяющие списки подходят для разметки диалогов, страниц ЧаВо, технической документации.

Пример:

<dl>
<dt>Вася:</dt>
<dd>А я все равно буду верстать таблицами!</dd>
<dt>Петя:</dt>
<dd>Ну и дурак!</dd>
</dl>

Данная статья не претендует на полноту раскрытия темы, а лишь приоткрывает некоторые ее аспекты. Надеюсь что она будет полезна начинающим и колеблющимся.

18 thoughts on “(X)HTML – структура и семантика кода

  1. Ещё считается что вроде как использование strong скажем вместо b будет уместнее с т.з. выделения кейвордов для поисковых машин… правда подтверждений этому я в итоге так нигде и не видел, как и соответствующих экспериментов… 8-)

  2. [quote comment=”3820″]Ещё считается что вроде как использование strong скажем вместо b будет уместнее с т.з. выделения кейвордов для поисковых машин… правда подтверждений этому я в итоге так нигде и не видел, как и соответствующих экспериментов… 8-)[/quote]
    Ну начнем с того, что b является нежелательным элементом по стандарту xhtml, а это уже само по себе о чем-то да говорит. Так что очень может быть что и поисковики кушают стронг охотнее.

  3. Тэг strong заключает в себе смысл сильного выделения. Смысл b — тупо жирный текст.

    Вообще отличная статья. Как говорится, must read для новичков и скептиков в отношение семантики.

  4. Спасибо…хоть тэги потихоньку запоминать начал)
    Хоть и с CMS работаю, а без аштиэмэмль все равно сложно…

  5. а у меня на дивах не получаеться верстать, вообще не получаеться, посоветуйте чо почитать, лучше онлайн с примерами для чайников. заранее благодарен!

  6. zealot_e, найдите “Каскадные таблицы стилей” Эрика Майера, “Философия CSS-дизайна” Дэйва Ши, “Вебдизайн по стандартам” Джеффри Зельдмана.

    Ознакомьтесь со ВСЕМИ статьями, приведенными по ссылке.
    Да и не только с ними, все сайты, присутствующие там, заслуживают пристального изучения.

  7. Чем не нравится верстка на таблицах … так и не понял. Смотрю, на google, табличная верстка…
    Смотрю на yandex…. Табличная верстка…. Смотрю на Artlebedev.ru … табличная верстка. Почему они на таблицах сделаны? А потому –что так быстрее, ефективнее и работает везде. А пока IE не поддерживает display: table-cell , например … нет смысла обсуждать другие варианты. Конечно можно и без таблиц- но теряется время и силы. А что поисковики индексируют лучше сайты без таблиц … это полный бред. Короче если думаете что вы круче верстальщиков вышеупомянутых сайтах, ищите всякие заковыретсые методы безтабличной верстки. Только потеряете само время.

  8. [quote comment=”3852″]Кстати, мне давно не хватало статьи о семантике на русском для моего “учебника”. Спасибо большое![/quote]

    И тебе, что добавил :)

  9. [quote comment=”3882″]Чем не нравится верстка на таблицах … так и не понял. Смотрю, на google, табличная верстка…
    Смотрю на yandex…. Табличная верстка…. Смотрю на Artlebedev.ru … табличная верстка. Почему они на таблицах сделаны? А потому –что так быстрее, ефективнее и работает везде. А пока IE не поддерживает display: table-cell , например … нет смысла обсуждать другие варианты. Конечно можно и без таблиц- но теряется время и силы. А что поисковики индексируют лучше сайты без таблиц … это полный бред. Короче если думаете что вы круче верстальщиков вышеупомянутых сайтах, ищите всякие заковыретсые методы безтабличной верстки. Только потеряете само время.[/quote]

    Сорри… Хотел Откоментировать не разобралси :)

    Так вот Премного уважаемый “by bobrob” Про таблицы… А сколько времени у вас уйдет на ре дизайн сайта с табличной вёрсткой?
    Я думаю ровно столько чтоб сверстать новый сайт..
    Мне лично на div’ах необходимо лишь отредактировать css файл. Причём как глобальный ре дизайн так и перенос поля на 15px в сторону :)

  10. И я сторонник талбиц. Я верстаю таблицами уже 7 лет, и конечно сейчас сверстать шаблон с таблицами c элементами css, если без скриптов это дело часа. Верстать на div согласен, что сложнее. Медленнее пока получаеться в раз 5-7, но это пока, уверен потом всё будет гуд.
    По поводу поисковиков это всё чепуха, это же не расизм, поисковики относяться адекватно к таблицами и дивам, только на дивах быстрее грузиться это да, но самое главное, здесь я соглашусь с автором, если сайт не динамический и не разбит на блоки, то отредактировать если требуеться изменить дизайн, то нужно лопатить все страницы (find and replace), а вот если чётко отделён материал сайта от его оформления, то изменив один css файл можно быстро поменять дизайн сайта в целом. Думаю, когда войдёте во вкус с div, то уверен появяться отдельные заготовки на сss для уже привычного размещения блоков и сайт уже можно будет слепить менее чем за час. Вообщем + за отделение контента от дизайна (div + css)

  11. Случайно наткнулась на статью, здорово написано, спасибо автору :)
    to bobrob и всем, кто прочитал его коммент.

    Во-первых, у гугла уже давным-давно блочная верстка. Яндекс и Лебедев, возможно, делали свои сайты на cms, которые рендерят таблицы. Равняться нужно на w3c.org, они разработчики стандартов.
    Если честно, после прочтения подобного коммента просто волосы на голове встали дыбом, как кто-то еще утверждает, что таблицы лучше, да еще и с такой уверенностью. “так быстрее, ефективнее и работает везде” – бред. Блоки гораздо более эффективны, быстрее рендерятся и грамотно написанный код будет работать везде. Особенно смешно выглядит Ваш коммент к статье о семантичной верстке. О какой семантике можно говорить при верстке таблицами? Я не круче верстальщиков, упомянутых сайтов, но я знаю, что табличная верстка давно канула в Лету. Таблицы нужны только для табличных данных. А теряется много сил, потому что Вы просто не знаете, как верстать div-ами. Подтверждение тому то, что Вам очень нужно свойство table-cell ;) Верстать блоками с использованием table-cell и т.п. – это те же таблицы. Я Вам еще могу открыть тайну. Поисковики действительно не любят таблицы. Любая таблица – это просто тонна кода в сравнении с версткой того же элемента блоками. Чем больше кода – тем меньше важность основного текста на странице, ведь роботы анализируют не внешний вид, а код. Сравните, возьму пример с того же яндекса:
    почта – упрощенный вариант
    и тоже самое, если бы это было на дивах
    почта
    Все еще таблицы? Или пора вспомнить, что на дворе 21 век?

  12. В моменте про цитирование есть неточность. Эл-т cite — не текст цитаты, а цитируемый источник. В HTML4/XHTML1 это могло быть имя автора цитаты (http://www.w3.org/TR/html401/struct/text.html#edef-CITE), в HTML5 — только название цитируемой работы (http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element). А сама цитата — действительно blockquote, если большая и блочная, а если короткая и в пределах строки — q.

  13. О как … узнал про то, что к цитате можно применять аттрибут cite. Спасибо!

  14. blockquote cite=И это не дань моде, а порядок и инструмент самопроверки. Но это отдельная тема./blockquote
    Про валидность и её необходимость статью напишите. Больная тема. Иногда из-за валидности приходится уродовать код, хз кто как, но я на валидность по большому счету плюю. Переубедите меня!

Leave a Reply

Your email address will not be published. Required fields are marked *