Теги форматирования текста в HTML
Подсвеченный участок текста;
- жирный шрифт;
- курсив, наклонный шрифт;
- зачеркнутый текст;
- текст меньшего размера;
- верхний индекс;
- нижний индекс;
- предварительно отформатированный текст;
- термин;
- заголовки;
- короткая внутристрочная цитата;
- цитата;
- сноска на название материала;
- программный код;
- результат вывода компьютерной программы;
- клавиатурный ввод;
- переменная компьютерной программы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Теги выделения фрагментов текста
Тег используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега жирным шрифтом. - тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.
Важный фрагмент текста
Тег используется для акцентирования внимания, "подчеркивания" фрагмента текста. Браузеры обычно отображают текст внутри тега курсивом. - тег логического выделения.
Акцентированный фрагмент
Тег используется для подсветки фрагмента текста.
Подсвеченный фрагмент
Тег используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст жирным шрифтом
Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст курсивом
Тег используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега выводится перечеркнутым.
Перечеркнутый текст
Тег используется для написания текста шрифтом меньшего размера.
Текст меньшего размера
Тег используется для создания текста нижнего индекса.
Текст нижнего индекса
Тег используется для создания текста верхнего индекса.
Текст верхнего индекса
Тег указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.
Предварительно отформатированный текст
Теги устанавливающие суть содержимого
Теги указывают, что содержимое является заголовком (подзаголовком).
- заголовок наиболее высокого уровня,
- наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.
Заголовок
Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.
Термин
Тег используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.
Короткая цитата
Тег моноширинным шрифтом.
Результат вывода компьютерной программы
Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.
Клавиатурный ввод
Тег указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега курсивом.
Переменная компьютерной программы
Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.
Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются . Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.
Правила и порядок написания тегов
Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку) и контейнерные (парными). Так вот, все теги форматирования текста являются парными . Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так: Выделенный фрагмент
Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().
Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:
Выделенный фрагмент
или вот так:
Выделенный фрагмент
Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования
Выделение текста жирным и курсивом — теги , , и
Самые популярные теги форматирования текста — выделение его жирным и курсивом . Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова. Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.Рассмотрим для начала выделение текста жирным . Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах и в уже обработанном браузером виде:
Текст в тегах strong
Текст в тегах b
А вот как выглядят две данные строчки в исходном коде страницы:
Текст в тегах strong Текст в тегах b
Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:
Текст в тегах em
Текст в тегах I
А вот исходный код:
Текст в тегах em Текст в тегах I
Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .
Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег или . Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели и .
Теги выделения текста чертой — , и
Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег
или подчеркивание
. Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.
Еще два схожих по назначению тега - и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.
Отличия же этих двух тегов заключаются только в их написании , вследствие чего предпочтительней использовать первый, т.к. во-первых удобнее писать, а во-вторых, на вашей странице будет находиться меньшее количество HTML-кода, а поисковики это любят.
Тег и атрибуты — параметры шрифта текста
Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:
- face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
- size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
- color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).
Так выглядит текст в теге с использованием каждого атрибута:
Этот текст имеет размер 6px
Этот текст красного цвета Этот текст имеет шрифт Arial Этот текст красного цвета и размера 5pxА вот что вы увидите, после обработки написанного кода: 
Блочные элементы оформления текста — заголовки -, абзац
, абзац
Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов
, ,..., . Вот как выглядят все заголовки в обработанном виде:
. Вот как выглядят все заголовки в обработанном виде:
Цифра после слова заголовок соответствует цифре в теге
А теперь поговорим про тег выделения абзаца
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:
В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):
В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!
Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
Тег
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Это полужирный шрифт.
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Выделение курсивом
Тег
Тег отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги ,
или . Пример:
Это моноширинный шрифт.
Тег
Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:
Пример подчеркивания текста.
Теги и
Теги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тег. Вместо него следует использовать тег
. Например:
Пример зачеркнутого
текста.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тегом . А именно, внутрь тега-контейнера можно вложить
пару тегов
....
Тег
Тег выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать
или теги заголовков, например,
Шрифт большего размера.
Тег
Тег выводит текст шрифтом меньшего размера. Поскольку в HTML нет тега, противоположного по действию тегу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Шрифт меньшего размера.
Тег
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег
Тег
Тег
Тег-контейнер является аналогом тега уровня
блока Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги. Рис. 1.3.
Использование вложенных тегов форматирования
текста
Теги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: Это полужирный шрифт. Это курсив. А здесь текст полужирный и курсивный Тег
Тег указывает параметры шрифта. Он относится
к тегам физического форматирования уровня текста. Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а
также тег Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти. Тег относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, Или Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем. Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию. Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д. Приведем пример использования параметра FACE: Пример задания названия шрифта. На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д. Рис. 1.4.
Отображение примера браузером Netscape
Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3. Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию. Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега Примечание
При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6. Рис. 1.5.
Окно настройки параметров шрифтов браузера
Netscape
Рис. 1.6.
Назначение размеров шрифтов
Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7 Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом. Текст зеленого цвета Текст красного цвета Тег Тег Примечание
Тег Заметим, что для тега В качестве параметров могут использоваться точно такие
же параметры, что и для тега , а именно:
FACE, SIZE и COLOR. Назначение и правила записи параметров
аналогичны. Примечание
Браузер Netscape не допускает применение параметра
FACE тега Приведем пример использования тега Текст, записанный шрифтом по умолчанию. Шрифт размера 2. Шрифт размера 4. Текст после таблицы В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега Рис. 1.7.
Отображение примера с тегом Форматирование текста — средства его изменения, такие как выбор начертания
шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1
перечислены основные теги, которые применяются для изменения оформления текста. Любые теги форматирования текста можно использовать совместно друг
с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов
и
(пример 1). Их порядок в данном случае не важен. Пример 1. Жирный курсивный текст
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников.
Дух и жизненная сила в нём достигла совершенства.
Но вот беда - никто не смеет принять его вызов. Результат данного примера показан на рис. 1. Рис. 1. Вид курсивного жирного начертания текста Использование тегов
и
сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2). Пример 2. Создание нижнего индекса
Формула изумруда:
Be3 Al2(SiO3)6 Результат данного примера показан на рис. 2. Рис. 2. Нижний индекс в тексте Теги
и
выполняют те же функции, что теги
и
,
но написание последних короче, привычней и удобней. Следует отметить, что теги
и
, также
как
и
являются не совсем эквивалентными
и заменяемыми. Первый тег
— является тегом физической
разметки и устанавливает жирный текст, а тег
—
тегом логической разметки и определяет важность помеченного текста. Такое разделение
тегов на логическое и физическое форматирование изначально предназначалось,
чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым браузером,
то текст, оформленный с помощью тегов
и
,
будет отмечен по-разному. Однако получилось так, что в популярных браузерах
результат использования этих тегов равнозначен. Текст в HTML-документах форматируют с помощью соответствующих тегов. В таблице приведены теги, используемые для форматирования символов, и заданный ими эффект. Кроме этого можно определять различные параметры шрифта. В частности, с помощью тега
...
задают гарнитуру шрифта, размер и цвет шрифта. Этот тег одинарный, действует на весь текст, размещенный внутри контейнера.
Tahoma
,
Arial Black
1
...
7
Текст
,
Текст
Для оформления сайта обычно используют набор цветов, который называют . Он состоит из 216 элементов. Особенностью "безопасных" цветов является то, что они не меняются в случае отображения различными браузерами или на разных мониторах, т. е. эта палитра обеспечивает точную передачу на разных мониторах того, что задумал веб-дизайнер. Если любая из трех составляющих шестнадцатеричного значения отличается от 00
, 33
, 66
, 99
, СС
или FF
, то цвет не является безопасным. Значения атрибутов SIZE
и COLOR
можно записывать без кавычек, но лучше всё делать по правилам. Есть и другие теги, которые можно применять для изменения параметров текста:
.
Текст внутри ячейки
таблицы 
Табл. 1. Теги для форматирования текста
Код HTML
Описание
Пример
Текст
Жирное начертание текста
Текст
Текст
Курсивное начертание текста
Текст
Текст
Верхний индекс
e=mc 2
Текст
Нижний индекс
H 2 O
Текст
Текст пишется как есть, включая все пробелы
Текст
Текст
Курсивный текст
Текст
Текст
Жирное начертание текста
Текст
Теги для форматирования текста
Тег HTML
Эффект
Пример
Текст
Написание текста жирным шрифтом
Текст
Текст
Жирное начертание текста
Текст
Текст
Написание текста курсивом
Текст
Текст
Выделение важных фрагментов текста (текст отображается курсивом)
Текст
Текст
Подчёркивание текста
Текст
Текст
Перечёркивание текста
Текст
Текст
Верхний индекс
100 м 2
Текст
Нижний индекс
H 2 SO 4
Пример:
Результат:
Tahoma
, Arial Black
Пример:
Результат:
1
, 2
, 3
, 4
, 5
, 6
, 7
Результат:
Текст
, Текст
Teкст
- создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.Еще на эту тему:
Другие статьи:
