Теги логического форматирования текста
Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом.
Буду перечислять..
Тег <abbr>
Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.
<abbr>CSS</abbr>
Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.
<abbr title="Cascading Style Sheets">CSS</abbr> позволит Вам без труда изменить стиль любого тега логического форматирования текста!
Тег <acronym>
Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Вступай в <acronym title="коммунистический союз молодёжи">комсомол</acronym>!!
Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title.
Тег <address>
Указывает автора документа и его адрес. Обычно отображается курсивом. Предназначен для поисковых систем для сбора информации об авторе его адресе и прочей информации владельца/цев сайта.
<address> Вася Пупкин г. Урюпинск Макаронная фабрика 2010г.</address>
Тег <cite>
Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом.
Как сказал Остап Бендер <cite>Лед тронулся! господа присяжные заседатели!</cite>
Тег <code>
Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
<code>function()</code> - так обозначается функция в PHP
Тег <del>
Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Напоминает теги физического форматирования <strike> и сокращённый <s> - перечёркнутый текст.
Использование тега <del>, более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги <strike> и <s>, которые помечены спецификацией 4.01 как нежелательные.
<del>Старая цена 1000р.</del> - Новая 999 р.!!!
Тег <dfn>
Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег <dfn>
<dfn>Акроним</dfn> - аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Тег <ins>
Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.
Противоположен по значению тегу <del> с ним же в паре обычно он и используется.
<del>Старая цена 1000р.</del> - <ins>Новая 999 р.</ins>!!!
Тег <em>
Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.
<em>Как создать сайт?</em> - узнай на Вебремесло.ру!!
Тег <kbd>
От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.
Нажмите <kbd>Ctrl + Z</kbd> для того чтобы отменить последнее действие.
Тег <q>
Выделяет в тексте цитату. В отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.
Как сказал Остап Бендер <q>Лед тронулся! господа присяжные заседатели!</q>
Кстати, есть еще и тег физического форматирования текста <blockquote> данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Цитаты</title>
</head>
<body>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b><q></b></code>: <q>Лед тронулся! господа присяжные заседатели..</q> - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью <abbr title="Cascading Style Sheets">CSS</abbr> псевдокласса <code>lang</code> и его значения <code>quotes</code> - кавычки.</p>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b><cite></b></code>: <cite>Лед тронулся! господа присяжные заседатели.. <a href="#">Остап Бендер. 12 стульев.</a></cite> - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ.</p>
<p>А эта цитата создана с помощью тега <strong>физического</strong> форматирования текста <code><b><blockquote></b></code>: <blockquote>Лед тронулся! господа присяжные заседатели..</blockquote> - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников.</p>
</body>
</html>
Такие вот различия..
Тег <samp>
Обозначает текст, который выводится на экран в результате работы какой-либо программы. Обычно браузерами отображается моноширинным шрифтом.
В процессе решения задачи 2+2 программа выдаст ответ: <samp>4</samp>
Тег <strong>
Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.
<strong>Как создать сайт?</strong> - узнай на Вебремесло.ру!!
Тег <var>
Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.
Данная функция использует переменную <var>$count</var>
Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю и так всё понятно, а вот несколько полезных советов по разметке текста в документе дам.
Полезные советы:
· Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS: (http://www.webremeslo.ru/css/glava0.html), если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.
· Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:
Для начала, разбейте весь Ваш текст на параграфы с помощью тега <p> - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков <h1> - <h6> т. е. допустим заголовок страницы берите в тег <h1> подзаголовки в тег <h2> еще менее значимые подзаголовочки в тег <h3> и т. д. В идеале на странице должен быть всего один заголовок <h1>, потом текст разбивается несколькими <h2> и далее по значимости заголовков.
Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоет например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!
Используйте <em> и <strong> в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте <b> и <i>.
· Когда выучите CSS забудьте и выкиньте из головы тег <font> и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..