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

Семантика (фр. sémantique от греч. σημαντικός — обозначающий). Семантика в верстке — это совокупность смысловых отношений, возникающих в документе. Не понятно? На примерах ниже все станет ясно.

Зачем нужна семантика

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

Как сделать семантическую верстку? Очень просто: используйте теги по смыслу! Если у вас есть заголовок - используйте для него теги h1-h6. Если абзац/параграф – используйте тег p (paragraph).

Списки (ol, ul)

Если у нас есть несколько однотипных сущностей на странице, например - ссылки в оглавлении, стоит оформить их в список.

Неправильно:
<a href="link1.html">ссылка 1</a><br />
<a href="link2.html">ссылка 2</a><br />
<a href="link3.html">ссылка 3</a><br />  

Правильно:
<ul>
    <li><a href="link1.html">ссылка 1</a></li>
    <li><a href="link2.html">ссылка 2</a></li>
    <li><a href="link3.html">ссылка 3</a></li>
</ul>

Цитаты (blockquote, cite, q)

Если вы цитируете - используйте blockquote или cite. Для этого лучше подходит q. Cite все же лучше использовать для указания источника.
cite — citation — ссылка на источник.
q — quotation — цитата (внутристрочная).
blockquote — quotation — цитата (блочная).
У q и blockquote в HTML 4 и XHTML 1.1 есть необязательный атрибут cite, который может содержать URI источника цитаты. В XHTML 2 этот атрибут предполагается у всех элементов.

Уже в <cite>спецификации HTML 4.01</cite> объясняется разница между элементами
<code>cite</code> и <code>q</code>:
<q cite="http...">CITE сontains a citation or a reference to other sources, Q and BLOCKQUOTe
designate quoted text</q>.

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

Таблица и div

Табличная верстка или дивная? Тема для холивара. Тем не менее, для табличных данных (например, таблица плотностей жидкостей) нужно использовать таблицы, для организации каркаса страницы («шапка», «меню», «подвал») нужно использовать div.

CSS

Использование атрибутов vspace, align, border и им подобных недопустимо. Все оформление нужно выносить в CSS. Использование атрибута style нежелательно. Не используйте устаревшие (deprecated) теги (font, center). Вообще, советую полистать документацию по тегам и атрибутам. Хоть там встречается deprecated, но вспомнить все равно полезно.

• Тестовое задание для верстальщика (26)
• Шаблонизатор Smarty. Мухи отдельно, котлеты отдельно (25)
• alt у картинок (0)