Структура и семантика XHTML
февраля 1, 2008Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок - используйте для него елементы Heading(h1-h6), если абзац/параграф - paragraph(p). Если у вас есть список - используйте элементы списков (ul/ol), если вы цитируете - используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.
После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета).
Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.
Есть два момента, которые нужно помнить всегда:
- (X)HTML предназначен для разметки содержимого и только
- CSS предназначен для визуального оформления содержимого
Почему семантика? Я приведу важные на мой взгляд аспекты:
- Структурированый код гораздо лучше читается поисковиками
- код будет понятен не только автору, но и тем, кто будет работать с ним после него
- Работа с DOM’ом становится проще и доступнее.
Не стоит путать семантику и валидность. Если документ валиден, это еще не значит что он семантически корректен. Валидатор не знает, к примеру, что вы вместо заголовков использовали жирный шрифт, оформленный в CSS, или же что ваш список ссылок, совсем не список, а параграфы через перенос строки.
Кстати валидность, по моему мнению, относится к минимальным требованиям к коду и является обязательной. И это не дань моде, а порядок и инструмент самопроверки. Но это отдельная тема.
