HTML — структура и семантика кода

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

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

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

Есть два момента, которые нужно помнить всегда:

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

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

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

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

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

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

Заголовки

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

<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>

Абзац

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

Неверно:

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

Верно:

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

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

em

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

strong

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

Неверно:

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

Верно:

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

Цитирование:

Элемент 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 href="about.html">Обо мне</a><br/>
<a href="services.html">Услуги</a><br/>
<a href="notes.html">Заметки</a><br/>
<a href="grandma.html">Бабушка</a>

Правильно:

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

Списки определений

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

Пример:

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