Как стать автором
Обновить

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

Время на прочтение 4 мин
Количество просмотров 5.7K
Структура правильного 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>


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

Основа статьи взята отсюда.
Теги:
Хабы:
+53
Комментарии 186
Комментарии Комментарии 186

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн