Шаблоны для новичков. Урок 3. Оформление текстов

К этому уроку мы уже имеем представление что такое HTML-тэги и CSS-стили. Современная верстка сайтов по сути сводится к шаманству с CSS: для сайта задаётся несложная HTML-структура, прописываются для блоков классы и после в css-файлах определяют их стили: положения, размеры, цвета и т.п.

Причем есть одна интересная особенность: стили можно применить практически к любым тэгам. Скажем текст можно оформить в DIV, P или H1. Если указать одинаковые css-стили, то браузер их и отобразит однинаково. Возникает резонный вопрос: если стилями мы можем добиться произвольного оформления, то зачем тогда такое разнообразие тэгов?

Ответ кроется в семантике (смысловом значении) документа. Если бы дело ограничивалось только визуальным отображением в браузере, то, действительно, можно было бы обойтись буквально десятком тэгов. Но, для того, чтобы сайт могли найти в Интернете, пользуются поисковиками. А поисковики должны уметь разбирать HTML-код страниц с тем, чтобы вычленить из него полезный текст и отсеять служебную информацию.

Вот для таких случаев, как раз и применяется семантическая верстка: HTML-тэги указывают на смысловое значение каждого участка кода.

Вот несколько основных правил.

• Тэги используются по своему смысловому предназначению. Там где это заголовок - используется H1-H6. Уровень заголовка определяется степенью его важности.
• Основной текст должен быть оформлен с помощью тэгов абзаца P. Нельзя использовать в качестве отбивки BR, DIV или другие тэги.
• Для списков использются UL/LI.
• Для выделений в тексте (смысловое усиление фразы) используется STRONG, B, EM, I. Эти тэги специально для этого и предназначены.
• Для цитаты или ремарки используется BLOCKQUOTE.
• Для «дизайнерского» оформления используются DIV и SPAN с нужными стилями и классами.

Браузеры имеют некое дефолтное оформление всех HTML-тэгов и если мы отключим свои css-стили, то при правильной HTML-разметке, текст останется читабельным и будет понятно где заголовок, где список и основной текст.

Многие новички не понимают или не придают большого значения семантичной вёрстке. Классический пример: вебмастер желает выделить в тексте какой-то важный момент. Для этого он использует тэг SPAN, где указывает большой размер шрифта, какой-то сильный цвет и т.п. То есть визуально фрагмент сильно выделяется. Однако с точки зрения семантики - он практически равносилен основному тексту. Поисковик для такого выделения не сделает никакого приоритета. Проблема здесь в том, что нужно было использовать тэг STRONG (или аналогичный), который и указывает поисковику, что данный фрагмент имеет особую важность. А вот визуальное оформление можно сделать в виде css-стилей этого тэга.

Два вида вёрстки: блоки и тексты

Это условное деление. Верстка блоков как правило используется для задания модульной сетки страницы, для верстки каких-то сложных элементов. Верстка текстов обычно ограничивается оформлением небольших служебных текстов (вроде название и описание сайта), а также оформлением основного текста страницы.

Причём оформлением текстов занимается уже автор сайта (не верстальщик). Очень часто встречаются шаблоны, где вебмастер не подумал о тех, кто будет наполнять сайт и забывает прописать дополнительные стили для оформления текстов. С точки зрения верстальщика такие стили не нужны, поскольку не используются в его шаблоне. В MaxSite CMS принято задавать такие стили, и чтобы проверить их корректное отображение существует специальный ВВ-код [text-demo], который можно разместить в любой записи и на сайте он заменится на тестовый кусок html-кода, который должен корректно отображаться на сайте.

Верстка блоков как правило базируется на использовании тэгов DIV и SPAN. Это общие тэги и их смысл определяется css-классами.

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

Важное замечание. В предыдущих уроках я давал ссылку на справочник HTML. Дублировать его в наших уроках нет никакого смысла, поэтому если вам встретился какой-то новый тэг, обратитесь к справочнику, чтобы уточнить его значение.

Оформление текста с помощью CSS

В CSS существует довольно много «оформительских» свойств для текста. Рассмотрим некоторые из них. Значения я указываю только часто используемые. Полное описание css-свойств см. в справочнике CSS.

Сохраните эту табличку, пусть она будет небольшой подсказкой по оформлению текстов. Больше к вопросу оформления текстов мы возвращаться уже не будем.