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

Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом.

Буду перечислять..

Тег < 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" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Цитаты< /title>
< /head>
< body>
< p> Эта цитата создана с помощью тега < strong> логического< /strong> форматирования текста < code> < b> & lt; q& gt; < /b> < /code>: < q> Лед тронулся! господа присяжные заседатели..< /q> - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью < abbr title=" Cascading Style Sheets" > CSS< /abbr> псевдокласса < code> lang< /code> и его значения < code> quotes< /code> - кавычки.< /p>
< p> Эта цитата создана с помощью тега < strong> логического< /strong> форматирования текста < code> < b> & lt; cite& gt; < /b> < /code>: < cite> Лед тронулся! господа присяжные заседатели.. < a href=" #" > Остап Бендер. 12 стульев.< /a> < /cite> - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ.< /p>
< p> А эта цитата создана с помощью тега < strong> физического< /strong> форматирования текста < code> < b> & lt; blockquote& gt; < /b> < /code>: < blockquote> Лед тронулся! господа присяжные заседатели..< /blockquote> - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников.< /p>
< /body>
< /html>

Такие вот различия..

Тег < samp>

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

В процессе решения задачи 2+2 программа выдаст ответ: < samp> 4 < /samp>

Тег < strong>

Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.

< strong> Как создать сайт? < /strong> - узнай на Вебремесло.ру!!

Тег < var>

Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.

Данная функция использует переменную < var> $count < /var>

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

Полезные советы:

· Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS: (https://www.webremeslo.ru/css/glava0.html), если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.

· Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:

Для начала, разбейте весь Ваш текст на параграфы с помощью тега < p> - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять " голые" слова и предложения, не взятые в какой либо тег форматирования текста.

Соблюдайте значимость заголовков < h1> - < h6> т. е. допустим заголовок страницы берите в тег < h1> подзаголовки в тег < h2> еще менее значимые подзаголовочки в тег < h3> и т. д. В идеале на странице должен быть всего один заголовок < h1>, потом текст разбивается несколькими < h2> и далее по значимости заголовков.

Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоет например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!

Используйте < em> и < strong> в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте < b> и < i>.

· Когда выучите CSS забудьте и выкиньте из головы тег < font> и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..