Прежде всего, определим, что такое логическое форматирование документа. Под логическим форматированием подразумевается использование специальных тегов HTML для слов и групп слов в соответствии с их значением. Например, цитаты оформляются с помощью тега CITE , выделение с помощью тега EM и т.д. Зачем это нужно? Почему нельзя обойтись только тегами физического форматирования? Все очень просто, теги логического форматирования можно переопределить с использованием CSS . При этом достигается высокая гибкость в оформлении сайта и простота в его написании.
В следующей таблице рассмотрим теги логического форматирования документа с параметрами оформления по умолчанию:
| Тег | Описание |
|---|---|
| ABBR | Используется для описания аббревиатуры (сокращенное название, которое читается по буквам). Закрывающийся тег обязателен. Пример: HTML |
| ACRONYM | Используется для описания акронима (сокращенное название, которое читается как слово). Закрывающийся тег обязателен. Пример: ВУЗ |
| CITE | Используется для цитат (по умолчанию наклонный текст). Необязательное свойство TITLE задает текст всплывающей подсказки. Закрывающийся тег обязателен. Пример: И это пройдет... |
| CODE | Используется для отображения фрагментов программного кода (по умолчанию моноширинной шрифт). Необязательное свойство TITLE задает текст всплывающей подсказки. Закрывающийся тег обязателен. Пример: var a = new Array(); . |
| DFN | Используется для определений, например для термина, встречающегося в тексте впервые (по умолчанию наклонный шрифт для первой строки, и обычный для остальных). Необязательное свойство TITLE задает текст всплывающей подсказки. Закрывающийся тег обязателен. Пример: HTML is a hypertext markup language. |
| EM | Используется для выделения текста (по умолчанию наклонный шрифт, происходит от английского emphasis - ударение). Необязательное свойство TITLE задает текст всплывающей подсказки. Закрывающийся тег обязателен. Пример: EM используется для выделения текста. |
| KBD | Выделения текста, вводимого пользователем с клавиатуры (по умолчанию моноширинной шрифт). Закрывающийся тег обязателен. Пример: введено: have a nice day:) . |
| SAMP | Используется для выделения примеров (по умолчанию моноширинной шрифт). Закрывающийся тег обязателен. Пример: Пример. |
| STRONG | Используется для выделения текста (по умолчанию жирный шрифт). Закрывающийся тег обязателен. Является альтернативой тега физического форматирования B . Пример: Текст выделен жирным . |
| VAR | Используется для выделения переменных в фрагменте кода программы (по умолчанию курсив). Закрывающийся тег обязателен. Пример: double precision delta . |
Среди тегов, влияющих на начертание шрифта, различают теги физического и логического форматирования . В большинстве случаев применение сходных по значению тегов физического и логического форматирования приводит к одному и тому же эффекту. Различие между ними состоит в том, что теги физического форматирования прямо указывают на то, какие свойства шрифта следует изменить (например, сделать жирным), в то время как теги логического форматирования указывают, какой это текст (например, важный).
Указание интонации текста (это и делают теги логического форматирования) вместо явного задания его свойств позволяет управлять его отображением. Приведем пример: вы считаете, что важный текст должен выделяться не жирным шрифтом, а красным цветом. При использовании тегов логического форматирования и браузера, поддерживающего такую возможность, вы можете настроить отображение текста, форматированного логически. Текст, форматированный физически, всегда будет отображаться так, как это задумал автор. Разумеется, если вы хотите, чтобы текст был именно жирным, используйте физическое форматирование. В противном случае рекомендуется использовать теги логического форматирования.
Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Пока
равнозначен.
Другие теги логического форматирования:
- служит для описания определений; - служит для выделения цитат; - ; - используется для ввода с клавиатуры пользователя; - используется для отметки результатов, выдаваемых программами, для выделения нескольких символов моноширинным шрифтом: ; - используется для символьных переменных; - используется для аббревиатур (СНГ, КПСС, WWW); - используется для сокращений (стр. , англ.) с атрибутом TITLE; - цитированный текст в кавычках.
Теги и используются, когда нужно напомнить самому себе о том, что данный кусок текста должен быть (или уже
) вставлен или удален. Применяются при создании сайта группой дизайнеров. Могут иметь атрибуты datetime, cite, title . В datetime можно указать дату и время удаления/вставки. В cite ставится ссылка на URL, по которому содержится пояснение к данному отрывку. С помощью title пояснения вставляются прямо в тег.
Не путайте тег с тегом Являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов кода!
Тег < code >
Данный тег рекомендуется использовать для выделения фрагментов программных кодов в HTML-документе. Как правило, такой текст отображается моноширинным шрифтом. Следует отметить, что в отличие от тега
Данный тег не является тегом уровня блока и может включаться в строки обычного текста. Пример:Задание целочисленной переменной на языке C++:
int a = 0;Теги < del > и < ins >
С помощью тега-контейнера
рекомендуется отмечать текст как удаленный. Здесь предполагается, что по каким-либо причинам разработчику документа необходимо оставить удаленный текст на экране браузера, но пометить его как удаленный. Обычно такой текст браузеры отображают как перечеркнутый. Данный тег имеет два необязательных параметра:cite – URL-адрес документа, поясняющего причину удаления текста;
datetime – дата редактирования в формате YYYY-MM-DDThh:mm:ssTZD.
Это текст помечен как удаленныйАналогично используется тег-контейнер , который отмечает текст как добавленный (вставленный). Обычно такой текст помечается браузерами как подчеркнутый. Данный тег имеет те же необязательные параметры, что и тег
:Это добавленный текст
Тег < em >
Данный тег используется для выделения важных фрагментов текста. Браузеры обычно отображают такой текст курсивом:
Выделенный фрагмент текста
Тег < kbd >
Тег-контейнер служит для выделения текста, введенного с клавиатуры. Такой текст обычно отображается моноширинным шрифтом:
Для загрузки яндекс-поиска введите yandex.ru
Тег < samp >
Тег-контейнер отмечает текст как образец и обычно выводит моноширинным шрифтом и используется для форматирования текста, содержащих результаты действия программ, например:
Моя первая программа на C++ выводит текст Hello World!
Тег < strong >
Тег-контейнер служит для выделения важных фрагментов текста. Текст, выделенный данным тегом считается более важным, чем текст выделенный тегом . При выводе браузеры обычно выделяют такой текст жирным шрифтом:
Пример текста, помеченный как важный
Тег < var >
Данный тег предназначен для выделения переменных программ и, как правило, отображается браузерами курсивом:
Переменная a имеет значение 5
Рассматривая описанные выше теги, можно заметить, что результат действия некоторых тегов совпадает и дает один и тот же результат в окне браузера при отображении. Напрашивается вопрос: для чего необходимо такое разнообразие тегов, если они по результатам работы дублируют друг друга? Дело в том, что разработчики языка HTML дали возможность составителям HTML-документов корректно выделить те или иные информационные части в расчете на то, что будущее поколение браузеров и поисковых систем будут анализировать их и предоставлять большие возможности «конечным» пользователям для восприятия корректно отформатированного текста. Поэтому уже сейчас рекомендуется применять эти и другие теги логического форматирования текста для улучшения конкурентноспособности таких HTML-документов в будущем.
Принцип логического форматирования HTML-документов подразумевает использование тегов для разметки в соответствии со смысловым значением элементов страницы, а не с желаемым внешним видом.
К элементам и приемам, нарушающим этот принцип, относятся:
- использование тегов физического, или визуального, форматирования текста (начиная с привычного и заканчивая динозаврами наподобие ); а также указание дополнительных параметров визуального форматирования в валидных тегах (таких, как BGCOLOR в теге ),
- искажение смысла тегов (например, использование
- и вместо
и ),
- использование невидимых таблиц с целью создания «каркаса» страницы и позиционирования блоков.
Очевидно, принцип логического форматирования не подразумевает подобных отступлений от «буквы закона». И, конечно, эти отступления нашли широкое применение.
Логическое форматирование
На сегодняший день предложены методы форматирования HTML-документов, альтернативные визуальному. А именно:
- тэгам визуального форматирования текста соответствует расширенный набор логических тегов, рекомендованных в четвертой версии HTML,
- дополнительные параметры оформления, отличающиеся от заданных в браузере по умолчанию, указываются в каскадной таблице стилей (CSS), в т.ч. с использованием парамаетра CLASS,
- позиционирование элементов также достигается средствами CSS и представляет собой более гибкий инструмент для форматирования по сравнению с таблицами.
Зачем?
Возникает закономерный вопрос: зачем ради «чистоты языка» менять привычные способы верстки и усложнять себе работу? На самом деле работать с «чистым» унифицированным кодом становится проще и удобнее. Кроме того, концепция CSS предоставляет веб-строителю дополнительные степени свободы за счет создания единого центра управления стилями.
Реальность и частности
Некоторые из тегов физического форматирования (скажем, ) сегодня, действительно, выходят из моды, а каскадные таблицы стилей овладевают все большим числом умов. Однако, думаю, что использование таблиц для создания пространственной структуры веб-документов в ближайшем будущем сохранит свою актуальность. Этот, как и некоторые другие вопросы, я намеренно не затрагиваю, чтобы вернуться к ним в одной из следующих статей.
Подведем итоги
- Логическое форматирование HTML позволяет разделить структуру и оформление документа и упрощает работу веб-строителя.
- В настоящее время существуют реальные альтернативы использованию визуального форматирования в HTML-коде.
- Требуется уточнение возможностей применения логического форматирования, исходя из принципа целесообразности.
Литература
- Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 10: 66-70.
- Бандурина Л. Каскадные таблицы стилей, или CSS для начинающих. Мир Internet. 2000; 11: 70-73.
- Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. — СПб.: БХВ-Петербург, 2000.
Хотя язык HTML включает теги для достижения различных шрифтовых эффектов (полужирный шрифт, курсив, подчеркнутый шрифт), не все браузеры их поддерживают. Однако все браузеры поддерживают тот или иной способ выделения текста. Поэтому использование логического форматирования текста в любом случае приведет к выделению программой просмотра различных частей текста и выявит структуру документа.
Говоря о логической разметке текста, можно выделить две основные части:
Выделение заголовков в документе; логическое выделение элементов текста.
Название документа, задаваемое с помощью тега