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

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

Разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать 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-документов в
будущем.



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


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

 

 -
 Применяется для вывода небольшого куска
 программного кода шрифтом фиксированной ширины.

 

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

 

 -
 элемент, выделяющий шрифтом фиксированной
 ширины текст, вводимый пользователем с
 клавиатуры.

 

 -
 используется для выделения нескольких символов
 шрифтом фиксированной ширины.

 


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

 

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


Все перечисленные тэги являются
контейнерами, то есть требуют закрывающего тэга.
Можно заметить, что некоторые
контейнеры дают одинаковый результат. Возникает
законный вопрос: зачем это сделано
?
Ответ - в названии этой
группы элементов. Они предназначены для
расстановки логических ударений, выделения
логических частей и подчеркивания сути
высказываний. Их использование весьма актуально,
поскольку, вероятно, в ближайшем будущем станет
возможен, например, поиск цитат в
 Web - пространстве.


Иногда возникает необходимость
включения в документ какой-либо цитаты. Для ее
выделения из основного текста существует тэг

. Этот элемент является контейнером
и может содержать любые форматирующие тэги.
Современные браузеры реагируют на
элемент
 

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


 - выделяет
 текст полужирным шрифтом.

 

 -
 выделяет текст курсивом.

 

 -
 выводит текст шрифтом фиксированной ширины.

 

 -
 элемент подчеркивания.

 


 - элемент зачеркивания.

 

 -
 выводит текст шрифтом большего размера.

 


 - выводит текст шрифтом меньшего размера.

 

 -
 сдвигает текст ниже уровня строки и выводит (если
 возможно) шрифтом меньшего размера.

 

 -
 сдвигает текст выше уровня строки и выводит (если
 возможно) шрифтом меньшего размера.


Все элементы физического
форматирования являются контейнерами. Элементы
физического форматирования могут быть
вложенными друг в друга. При этом нужно
внимательно следить, чтобы один контейнер
находился целиком в другом контейнере.
Одной из важных особенностей,
воплощенных в
 HTML, начиная с
версии 3.2, является полный контроль облика
создаваемого документа. Такая возможность
отсутствовала в предыдущих версиях языка. Можно
сказать, что единственной существенной
проблемой осталось отсутствие на машине
пользователя каких-либо шрифтов, которые
используются в документе.
 FONT
 впервые появился
в
 HTML версии 3.2 и представляет
собой контейнер. После стартового тэга
обязательно указание атрибутов, без которых
элемент не имеет никакого влияния на текст,
помещенный в контейнер. Элемент
 FONT

может находиться внутри любого
другого текстового контейнера.

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

 восстанавливаются. Значения
атрибутов
 BASEFONT
 могут быть изменены другим тэгом

 в любом
месте документа. Тэг

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

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

Всё это теги физического форматирования текста.
Почему их так назвали? Да все просто.. потому что данные теги способны тем или иным способом физически воздействовать на текст.. делать его жирным, курсивом, маленьким, большим.. и т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации HTML и в различных браузерах отображается практически одинаково.
На всякий случай вновь покажу старый пример:
  

  

  

  

  

Научная статья.
 
 
 

 Если разбавить дистиллированную воду Н
 2
О сорока процентами этилового спирта С
 2
Н
 5
ОН то получится жидкость в 40
о
 более известную широкой публике под названием 
- водка.
 
 

 Впервые данную пропорцию 
придлажил
 предложил 
Дмитрий Иванович МЕНДЕЛЕЕВ.
 
 
 
 

Распитие спиртных напитков вредит вашему здоровью.
 

  

 

Основная задача тегов физического форматирования текста это выполнение сугубо декоративных функций.
Однако если Вы изучали , то наверняка обратили внимание что выше перечисленные теги это далеко не все инструменты для работы с текстом! А если Вы изучали справочник скрупулезно и пристально, то наверное заметили что некоторые теги выполняют одни и те же действия над текстом..
Например, чем отличается тег 
 от тега 
 ? или какая разница между  и 
 ? ведь результат и там и там одинаков!

Так да не так.. отличия есть.. и они достаточно существенные!!..
Логическая разметка текста.
Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой: "логическая разметка документа".
Под логической разметкой документа, прежде всего, принято понимать разметку текста тегами направленную на удобство работы поисковых систем и других программ, которые работают с данным документом, а так же придавать тексту в документе некий смысл. Так вот программам абсолютно по барабану как выглядит Ваш документ, красивый он или нет, какой стиль шрифта и текста используется и.т.д. программы в первую очередь пытаются найти логику на Вашей страничке, что бы в дальнейшем использовать её по своему усмотрению, например для более релевантной поисковой выдачи или для автоматического составления содержания Вашего документа...
Теперь давайте опять вернемся к вопросу выше: "Чем отличается тег 
 от тега 
 ?" - казалось бы какая разница ведь текст и там и там будет отображаться курсивом.. всё дело в том что тег 
 - (курсив) - является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег 
 (особенно важный текст) - является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег 
 , обычно в браузерах отображается курсивом - это всего лишь, скажем так "мода" и придумка браузеров.

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

Так какие теги лучше использовать? Ну раз уж мы уже заочно познакомились с тегами 
 и 
 покажу пример, комментарии будут ниже..

  

  

  

  

  

  

 

Как создать сайт?
 

 
Для того, что бы 
самостоятельно создать сайт
 для начала в блокноте нужно написать следующие теги:
 

  - начало документа

  - начало головы

  - закрытие головы

  - начало тела

  - закрытие тела

  - конец документа

  

  

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

Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу: "Как создать сайт?
" или "Самостоятельное создание сайта
" видели в первых строчках поисковой выдачи гугла ссылку: " " и переходили по ней на главную страницу моего ресурса:) . Так вот пометив нужные мне куски текста с помощью тегов 
 и 
 , я тем самым даю понять гуглу что этот текст важный и что на него следует обратить особенное внимание! - конечно, это не залог успеха, тем более для столь популярных (высокочастотных) пользовательских запросов, но при прочих равных условиях, это большой плюс в глазах поисковых систем.

И противоположенный случай..
Как человек старающийся сделать сайт удобным для чтения и восприятия другими людьми, я выделяю некоторые участки текста курсивом (юмор, примечания и прочую отсебятину) и жирным шрифтом (изучаемые теги в примерах), но я не хочу, чтобы поисковые системы обращали сильное внимание на фразы типа: "начало головы" "закрытие тела" - так как сайт написан для начинающих веб-ремесленников, а не для начинающих патологоанатомов, поэтому размечаю такой текст тегами  и 
 - они дают нужный результат, собственно полужирный шрифт и курсив, но не являются "красной тряпкой" для программ.

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

Практически ко всем тегам применим атрибут title
 - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.
  title="Cascading Style Sheets">CSS
 позволит Вам без труда изменить стиль любого тега логического форматирования текста!

Тег 
Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Вступай в  title="коммунистический союз молодёжи">комсомол
!!

Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title
 .
Тег 


 

Вася Пупкин г. Урюпинск Макаронная фабрика 2010г.


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


Тег 

Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
 
 function()
 - так обозначается функция в PHP
Тег 
Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Напоминает теги физического форматирования 
 и сокращённый 
 - перечёркнутый текст.

Использование тега 
 , более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги 
 и 
 , которые помечены спецификацией 4.01 как нежелательные.

 
Старая цена 1000р.
 - Новая 999 р.!!!
Тег 
Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег 

 
Акроним
 - аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Тег 
Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.
Противоположен по значению тегу 
 с ним же в паре обычно он и используется.
 Старая цена 1000р. - 
Новая 999 р.
!!!
Тег 

Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.
 
Как создать сайт?
 - узнай на Вебремесло.ру!!
Тег 
От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.
Нажмите 
 Ctrl + Z
 для того чтобы отменить последнее действие.
Тег 
Выделяет в тексте цитату. В отличие от тега 
 цитата обозначенная тегом 
 автоматически берётся браузерами в кавычки.
Как сказал Остап Бендер 
Лед тронулся! господа присяжные заседатели!

Кстати, есть еще и тег физического форматирования текста 

 данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста.

  

  

  

  

  

  

 
 логического форматирования текста : 
 - браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью CSS псевдокласса lang и его значения quotes - кавычки.
 

 
Эта цитата создана с помощью тега логического форматирования текста : Лед тронулся! господа присяжные заседатели.. Остап Бендер. 12 стульев.
 - обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ.
 

 
А эта цитата создана с помощью тега физического форматирования текста 
: 
Лед тронулся! господа присяжные заседатели..
 - в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников.
 

  

  

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

Тег 

Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.
 
Как создать сайт?
 - узнай на Вебремесло.ру!!
Тег 
Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.
Данная функция использует переменную 
$count

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

Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет , если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.
Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:
Для начала, разбейте весь Ваш текст на параграфы с помощью тега 

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

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

 подзаголовки в тег 

 еще менее значимые подзаголовочки в тег 

 и т. д. В идеале на странице должен быть всего один заголовок 

 , потом текст разбивается несколькими 

 и далее по значимости заголовков.

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