Уроки по HTML. Дополнение к базовому курсу


Теги логического форматирования

Что такое теги логического форматирования (логические теги)?

Полагаю, Вы давно знакомы с html и css  (иначе Вам следует сперва освоить эти технологии, что Вы можете сделать в разделе Уроки HTML). Я это к тому, что не стоит объяснять, что такое html и теги вообще, и какие, в частности, существуют теги – с этим вы давно и хорошо знакомы. То же в отношении каскадных таблиц стилей (css).

Из всего многообразия тегов нас сейчас будут интересовать теги для форматирования текста. В частности, <b> и <i>. А также стилевые классы, созданные для того или иного тега (например, для тега <p>).

Теги <b> и <i> - это теги так называемого физического форматирования. То есть, с их помощью прямо в тексте указывается, что шрифт будет полужирным или курсивным. Иными словами, с помощью этих тегов мы явно указываем на начертание шрифта текста.

Есть иной способ задать начертание шрифта: пометить фрагмент текста как имеющий определённый логический стиль. То есть, с помощью специальных тегов указать браузеру, что вот это – цитата, а это – важный фрагмент текста, а вот это вот – программный код… И тогда браузер сам отобразит указанные фрагменты нужным образом. Это как раз и достигается применением тегов логического форматирования.

Итак, вот теги логического форматирования.

<h#></h#> - заголовки;

<dfn></dfn> - определение текстового фрагмента или термина. Текст обычно выводится курсивом;

<cite></cite> - цитата;

<em></em> - курсив;

<code></code> - программный код;

<strong></strong> - полужирный шрифт;

<samp></samp> - сообщение программы;

<var></var> - переменная;

<address></address> - адрес.

Зачем нужны логические теги?

А затем, что они очень помогают правильно организовать логическую структуру страницы, что сильно упрощает использование CSS.

Теперь рассмотрим каждый из тегов отдельно.

С тегом <H#> Вы, скорей всего, знакомы и, надеюсь, постоянно им пользуетесь. Потому что с его помощью на странице ранжируется информация по степени значимости, что очень ценится поисковыми системами. Этот тег обозначает заголовки в теле документа. Бывает шести видов H1, H2, H3, H4, H5, H6, которые отличаются степенью значимости (размером) заголовков. Самый большой и самый главный - H1. Самый маленький - H6.

<EM> - обозначает выразительность какого-либо слова в тексте. Для выделения важных фрагментов текста. Обычно выводится курсивом. Частенько вместо этого тэга используется тэг <i>, однако это неправильно с точки зрения логики.

<STRONG> - обозначает сильный акцент в тексте. Разница между <EM> только в степени выразительности. Опять таки, вместо <strong> часто используют <b>, однако… (см. про тег <em>).

Кстати, постановка таких акцентов нужна не только, чтобы указать пользователю на важные моменты в статье, но также дополнительно поисковику – о чём статья.

<CITE> - для отметки цитат, названий книг или фильмов, ссылок на другие источники и т. д. Как правило, отображается курсивом. Часто используют внизу страницы для обозначения владельца.

<ADDRESS> - обозначает контактную информацию автора сайта или организации, которой принадлежит сайт.

<SAMP> - обычно применяется для обозначения терминов или ключевых слов. В браузере отображается моноширинным шрифтом, например, Courier New. Похож на тег <CODE>.

<CODE> - обозначает программный код. В браузере отображается моноширинным шрифтом. Часто используется вместе с тегом <PRE>, который лучше передает отступы и структуру.

<VAR> - обозначает переменную из компьютерной программы. Как правило, отображается курсивом.

Итак, большинство из этих тегов делают текст или наклонным, или жирным, или моноширинным. Почему бы вместо них не использовать теги <b> или <i>? Ведь это гораздо проще!

Для этого есть причины. И это не только упрощение использования CSS. Логические тэги позволяют браузерам обрабатывать страницу в манере, наиболее свойственной данному браузеру. Допустим текст в теге <em> браузеры под Windows заменяют курсивом, а браузеры под Unix - жирным. Кроме того, спустя полгода вы легко сможете определить, что <ADDRESS> в коде вашей странички обозначает адрес, тогда как, скажем, <SPAN class="adr"> далеко не так понятно.

Ну, и то, с чего я начал данную статью: уменьшение веса страницы. Причём здесь это, спросите Вы? А вот посмотрите.

Допустим, мы определяем стилевой класс для тега <p>, которым будет выделяться программный код. Например, название класса будет такое:

p.code

Тогда в коде страницы для каждого абзаца с кодом будет записано так:

<p class=”code”> … </p>

А вот если вместо тега <p> со стилем code сразу прописать тег <code>, тогда запись будет такой:

<code> … </code>

То есть, на 7 знаков меньше… Думаю, вывод для себя Вы сделаете сами.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Читать также:

Защита Вашего сайта от копирования

Защищаемся от… поисковых систем

Все о тэге Title


Joomla - Профессиональный сайт за один день

Как быть, если хочется сделать качественный сайт, но времени катастрофически не хватает? >>>>>

Новое на сайте

Другие статьи...

Видеокурсы

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Разделы Сайта