(X)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>
Данная статья не претендует на полноту раскрытия темы, а лишь приоткрывает некоторые ее аспекты. Надеюсь что она будет полезна начинающим и колеблющимся. Зубров веб-разработки прошу не беспокоиться :)
Рекомендуем почитать
