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

Поиск смысла жизни отнимает столько времени,
что лучше бы его вписывали прямо
в свидетельство о рождении.

Б. Кригер

Вам доводилось когда-нибудь разбираться в чужой верстке? На 90% веб-страниц черт сломит ногу (а еще на 9% страниц свернет шею): понять нагромождения таблиц и буквосочетаний вроде <tr сlass=”t xl y”> просто нереально. Дело тут даже не в качестве страницы (правильности ее отображения, красоте и т. п.), а в подходе работника к своей задаче. Многим проще сделать и забыть, чем “заморачиваться” на какие-то комментарии, оформление, правильное именование. Увы, порой приходится возвращаться к проекту, сделанному пару-тройку лет назад (еще хуже, если проект был сделан не тобой) и тогда код кажется просто чудовищным: смысл теряется в каше из тегов и текста.

Надеюсь эта серия статей немного прояснит ситуацию: я хочу поговорить о непонятной для многих красоте HTML и семантичной верстке. В этой статье речь пройдет о тегах, а в следующей – об именах и идентификаторах в HTML, об оформлении кода и комментариях.

В любом деле есть смысл. Дао, если хотите. В верстке смысл – не только правильное представление, но удобное восприятие кода. Комментарии, отступы и хорошее форматирование, конечно, упростят чтение, но этого мало. Есть еще более глубокие и сложные понятия: уместное использование тегов и их правильная расстановка на странице, понятное именование классов/идентификаторов, валидность и т. д. Все, что я перечислил в этом абзаце формирует понятие “семантичная верстка“.

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

Заголовки (h1-h6)

Многие верстальщики явно недооценивают пользу заголовков. Ну казалось бы, какой смысл изобретать велосипед модифицировать тег заголовка, ведь проще ячейке/слою назначить хитрый класс, реализовав в нем и крупный шрифт, и нужное выравнивание, и отступы? Горе-верстальщики не правы: заголовки несут смысловую нагрузку и по-другому индексируются поисковиком. Заголовки в семантичной верстке должны отвечать следующим правилам:

1. Как бы глупо это не звучало, но заголовки должны быть на странице
2. Заголовки должны отличаться по “уровням”
3. Тег h1 должен содержать главный заголовок страницы. Говорят, h1 может быть только один, а то, мол, Яндекс с Гуглом заминусуют. Может быть и так, однако я этим правилом порой пренебрегаю и проблем с индексацией не испытываю.
4. h2 – подзаголовок, некое второе название, мини-комментарий
5. h3 – заголовок подраздела. Его уместно использовать в названиях блоков для страницы (например, Новости, Статьи, Блоги, Последние обновления и другие, которые обычно размещаются на каждой странице)
6. h4..h6 – мелкие заголовки (заголовки новости в списке новостей, например).
7. Картинка не должна собой заменять заголовок. В большинстве случаев этого можно избежать.

Думаю, для начала этого вполне хватит :)

Списки (ul, ol, dl)

Про списки вспоминают, когда надо сделать несколько буллетов (маркеров). Особо находчивые разработчики делают буллеты без этих тегов: вставляют специальный символ (такая жирная точечка) в начало абзаца :).

В семантичной верстке принято использовать списки для оформления меню, списки для отображения статей, новых предложений и т. д. Стоит различать нумерованные списки (ol), ненумерованные списки (ul) и списки определений (dl).

Ненумерованные списки лучше использовать при создании каких-либо меню (как горизонтальных, так и вертикальных), а также списков новостей или товаров. Нумерованные списки хорошо подходят для оглавлений и рейтингов. Списки определений годятся для разных нетривиальных задач (списков определений :) , часто задаваемых вопросов и т. п.)

Работа с меню достаточно сложная, однако я специально не привожу примеры кода: во-первых, большую часть проблем с оформлением можно решить, манипулируя с margin, list-style и padding, а во-вторых, я хотел бы посвятить этому отдельную статью.

Абзацы (<p> или <br>?)

Абзацам, пожалуй, достается больше всего. Почему-то никто не знает, каким же тегом он обозначается: кто-то использует <p>, кому-то больше по душе <br />. Поздравляю, тот, кто применяет <p> может себя похвалить: он оказался прав.

Существует вполне однозначное и четкое разделение этих тегов по смыслу:

• Тег <p> применяется для обозначения абзацев. Абзац аналогичен книжному, а потому давать определение ему не вижу смысла. В этом теге предусмотрен отступ и, кстати, не зря: наличие отступа от других абзацев существенно улучшает восприятие и позволяет сориентироваться в тексте.
• Тег <br> применяется тогда, когда необходимо использовать перенос строки (например, визуально отделить строку в абзаце). Его можно применять внутри тега <p>, и никак нельзя использовать в качестве отступа (быдлокодинг :) ), потому что размер <br> зависит от размера шрифта в браузере и не является точным.

Кнопки и ссылки (<a>, <input type=”..” >)

Я не зря объединил кнопки и ссылки в один раздел: их слишком часто путают и пытаются заменить переходы на страницы кнопками, а отправку формы – ссылками.

Кнопка (<input type=”button|submit|reset|image”>) работает внутри формы (строго говоря, вне формы ее вообще не должно быть) и либо отправляет эту форму (черт, тавтология!), либо вызывает какое-то действие внутри этой формы. Порой кнопка отправки выглядит слишком сложно и многие поступают неправильно, делая ее ссылкой/картинкой/слоем с яваскриптовой обвязкой: достаточно немного поразмыслить, чтобы превратить обычную серую кнопку с границами в полноценный элемент дизайна.

Основное предназначение ссылки – переход между страницами. Ссылки находятся везде, в том числе и внутри формы. Конечно, по клику может выполняться и какое-то действие (например, открытие выпадающего списка).

Важно понять, что в HTML уже придуманы “кликабельные” элементы и нет никакой необходимости делать новые из слоев, ячеек таблиц, картинок и т. д.: они будут нарушать стройную логику вашей верстки :).

Изображения

Вот и до изображений добрались. Думаете, ограничусь одним <img>? Не тут то было!

Тег <img> отлично подходит для оформления изображений в тексте, для логотипов, для заголовков (если картинку все-таки пришлось применять), но он не должен применяться для оформления красивых уголков, горизонтальных разделителей или больших фонов в шапке: для этого есть CSS свойство background. У изображений есть замечательное свойство alt (и title тоже :) ), про которое также не стоит забывать. Недостатков применения <img> для оформления всяких мелочей я вижу целых два:

1. Тег <img> несет смысловую нагрузку. Предполагается, что это важная часть контента, хотя разнообразные фоны зачастую абсолютно бесполезны. При копировании-вставке хотя бы в документ Word-а должно оставаться только то, что действительно необходимо пользователю: логотип, иллюстрации и еще какие-то важные мелочи.
2. Тег <img> занимает место и сбивает с толку. Зачастую нет никакой необходимости акцентировать внимание на изображении

Получается, заменой ему (тегу <img>) могут стать различные блочные элементы с фоном.

Экзотические теги

Существуют такие теги, которые предназначены для реализации редких и очень непонятных специфичных блоков на странице. Вот некоторые из них:

• <address> – для оформления адресов (курсив по умолчанию)
• <blockquote> – для цитат (с отступами по умолчанию)
  
• <code> – для программного кода (моноширинный по умолчанию)
• <samp> – для вывода компьютерной программы или скрипта (моноширинный по умолчанию)
• <var> – для переменных языка программирования в тексте (курсив по умолчанию)

Итого

Что же имеем в сухом остатке? Тегов много и они все разные. Каждый из них придуман не зря, имеет какой-то особый смысл, и пренебрегать таким богатым набором, мне кажется, глупо.

Однако использовать ли все это или нет, решать вам. Я уже сделал для себя выбор ;) .

• Оставить комментарий (1)
• Теги: HTML, семантическая верстка, теги