Оформление текста html: Форматирование текста | htmlbook.ru

22.07.2023 alexxlab

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTML	Описание	Пример
<b>Текст</b>	Жирное начертание текста	Текст
<i>Текст</i>	Курсивное начертание текста	Текст
<sup>Текст</sup>	Верхний индекс	e=mc²
<sub>Текст</sub>	Нижний индекс	H₂O
<pre>Текст</pre>	Текст пишется как есть, включая все пробелы	Текст
<em>Текст</em>	Курсивный текст	Текст
<strong>Текст</strong>	Жирное начертание текста	Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.

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

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

текст

HTML по теме

Тег
Тег
Тег
Тег
Тег
Тег

Статьи по теме

Форматирование текста

HTML теги для оформления текста | Справочник HTML CSS

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

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

Структура

h2, h3, h4, h5, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h2 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h2, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h2 дальше подзаголовок h3 и так далее

p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ

Примеры: https://codepen.io/Yury_P/pen/WNGLgdW

Форматирование

b — визуально выделяет текст жирным начертанием

strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска

i — задает курсивное начертание текста

em — задает курсивное начертание текста, логически указывает на важность текста

u — подчеркивает текст снизу

pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)

sup — текст отображается как верхний индекс

sub — текст отображается как нижний индекс

small — уменьшает текст на условную единицу

address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом

mark — отображает текст как выделенный

abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении

kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом

dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом

ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст

del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст

s — зачеркивает текст

Примеры: https://codepen. io/dmitryvalak/pen/zYKXjaV

Цитаты

q — отображает текст как цитату, обрамляет его кавычками

blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами

cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом

Примеры: https://codepen.io/dmitryvalak/pen/yLarjoq

Списки

ul — маркированный список. Каждый элемент списка оборачивается тегами li

ol — нумерованный список. Каждый элемент списка оборачивается тегами li

dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина

Примеры: https://codepen.io/Yury_P/pen/mdrgZQb

Отображение кода

code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы

var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом

samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом

Примеры: https://codepen. io/Yury_P/pen/yLaGxPB

Другие теги

span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (

) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили

br — переносит текст на новую строку

wbr — указывает где можно сделать перенос слова

hr — вставляет горизонтальную полосу

bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо

bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto

Примеры: https://codepen.io/Yury_P/pen/rNMoZrL

Элементы цитаты HTML

❮ Предыдущая Далее ❯

В этой главе мы рассмотрим

, , ,
, , и элементов HTML.
Пример
Вот цитата с сайта WWF:
Вот уже 60 лет WWF помогает людям и природе процветать. как в мире ведущая природоохранная организация, WWF работает почти в 100 странах. Каждый раз уровне, мы сотрудничаем с людьми по всему миру для разработки и доставки инновационные решения, которые защищают сообщества, дикую природу и места в которым они живут.

Попробуйте сами »
HTML
для котировок
Элемент HTML
определяет раздел, который цитируется из другого источника.
Браузеры обычно делают отступ
элементов.
Пример
Вот цитата с сайта WWF:

За 60 лет WWF работал, чтобы помочь людям и природе процветать. как в мире ведущая природоохранная организация, WWF работает почти в 100 странах.

Каждый раз уровне, мы сотрудничаем с людьми по всему миру для разработки и доставки инновационные решения, которые защищают сообщества, дикую природу и места в которым они живут.
Попробуйте сами »
HTML
для кратких цитат
Тег HTML определяет краткую цитату.
Браузеры обычно заключают цитату в кавычки.
Пример
Цель WWF: Построить будущее, в котором люди будут жить в гармонии с природа.

Попробуйте сами »
HTML
для сокращений
Тег HTML определяет аббревиатуру или акроним, например «HTML», «CSS», «Мистер», «Доктор», «Как можно скорее», «Банкомат».
Маркировка аббревиатур может дать полезную информацию браузерам, перевод системы и поисковые системы.
Совет: Используйте глобальный атрибут title для показать описание к аббревиатура/аббревиатура при наведении курсора на элемент.
Пример
ВОЗ была основана в 1948.
Попробуйте сами »
HTML
для контактной информации
Тег HTML
определяет контактную информацию для автора/владельца документа или статья.
Контактная информация может быть адресом электронной почты, URL-адресом, физическим адресом, телефоном номер, идентификатор социальной сети и т. д.
Текст в элементе
обычно отображается курсивом , и браузеры будут всегда добавляйте разрыв строки до и после <адрес> элемент.
Example

Автор: John Doe.

Посетите нас по адресу:

Example.com

Box 564, Disneyland

USA

Try Это сами »
HTML
для названия работы
Тег HTML определяет заголовок творческая работа (например, книга, стихотворение, песня, фильм, картина, скульптура и т.
д.).
Примечание: Имя человека не является названием произведения.
Текст в элементе обычно отображается курсивом .
Пример
The Scream Эдварда Мунка. Нарисовано в 1893 году.
Попробуйте сами »
HTML
для двунаправленного переопределения
BDO означает двунаправленное переопределение.
Тег HTML используется для переопределения текущее направление текста:

Пример
Этот текст будет написан справа налево
Попробуйте сами »
HTML-упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте элемент HTML, чтобы добавить кавычки вокруг букв «круто».
<р>
Я такой классный.
Начать упражнение
Элементы цитат и цитирования HTML

Тег Описание
<сокращение> Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию для автора/владельца документа
Определяет направление текста
<цитата> Определяет раздел, цитируемый из другого источника
<цитировать> Определяет название произведения
Определяет короткую встроенную цитату
Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.
❮ Предыдущий Далее ❯

Форматирование HTML-текста — GeeksforGeeks
В этой статье мы узнаем Форматирование HTML-текста и поймем различные способы форматирования текста. HTML облегчает возможность форматирования текста так же, как мы это делаем в MS Word или любом программном обеспечении для редактирования текста. Мы рассмотрим несколько таких вариантов.
Пример: В этом примере мы просто отображаем текст в сильном HTML, маленьком и выделенном форматировании соответственно.
HTML

< html >

< корпус >
 < 9 0006 h3 >Добро пожаловать в GeeksforGeeks h3 >


 < сильный >Здравствуйте! 0007 >


 < маленький >Привет гики маленький >
  
 900 07

 < отметка >Здравствуйте! отметка 90 006 > корпус 0006 >
Вывод:
Форматирование текста с использованием различных тегов HTML
Ниже приведены различные варианты форматирования текста: полужирный с использованием тег . Тег использует как открывающие, так и закрывающие теги. Текст, который необходимо выделить жирным шрифтом, должен находиться в пределах тегов и . Мы также можем использовать , чтобы сделать текст сильным, с дополнительной семантической важностью. Он также открывается тегом и заканчивается тегом .
Пример 1 : В приведенном ниже примере описывается форматирование текста: обычное, полужирное и сильное.
HTML

< html >

< головка >
 < title >Bold Text title >
головка >

< корпус >


 Hello GeeksforGeeks p >



90 006 
 Hello Geek sforGeeks б >
 p >



 
 9000 7 < сильный >Hello GeeksforGeeks сильный >
 900 06 стр >

корпус
html >
Вывод :
Форматирование текста с использованием разных тегов
902 20 Оформление текста Курсив или выделение :  Тег используется для выделения курсивом текста. Он открывается тегом и заканчивается тегом . Тег используется для выделения текста с добавлением семантической значимости. Он открывается тегом и заканчивается тегом .
Пример 2 : В приведенном ниже примере описывается форматирование текста курсивом или выделением.
HTML

< html >

< головка >
 < 9 0006 заголовок >курсив заголовок >
головка >

< корпус 9000 7 >


 Привет, выродки для выродков p >


 9000 7
 
 Hello GeeksforGeeks i >
 p >


 
9000 6 Hello GeeksforGeeks em >
 p > 900 03

корпус >

html >
Вывод :
Форматирование текста с помощью тегов и
9 0002 Выделение текста: Также можно выделить текст в HTML с помощью тега . Он имеет открывающий тег и закрывающий тег .
Пример : В приведенном ниже примере описывается использование тега , который используется для определения выделенного текста.
HTML

< html >

< глава >
 < заголовок >Подсветка заголовок >
голова >

< корпус >

 9 0003
 Здравствуйте!

 
 < знак >Здравствуйте, гики для гиков! 07

корпус >

90 006 html >
Вывод :
Использование тега
Создание текста Нижний или верхний индекс : Элемент используется для надстрочного индекса текста, а элемент _{используется для нижнего индекса текста. У них обоих есть открывающий и закрывающий тег.}
Пример : В приведенном ниже примере описывается использование тегов ^{и _{, которые используются для добавления надстрочного и подстрочного текста в документ HTML.}}
HTML
90 174

< html >

< head >
 < заголовок >Верхний и нижний индекс заголовок >
заголовок >

< корпус >

 Hello GeeksforGeeks p >
9 0003


 Здравствуйте
 GeeksforGeeks sup >
 р >



9 0006 < р >Привет
 GeeksforGeeks sub >
 p >

корпус >

html >
Выход :
Использование тегов _и
Уменьшение текста: Элемент используется для уменьшения текста. Текст, который нужно отобразить меньше, должен быть написан внутри тегов и .
Пример : В приведенном ниже примере описывается использование тега , который используется для установки маленького размера шрифта.
HTML
901 74

< html >

< головка 9000 7 >
 < заголовок >маленький заголовок >
головка >

< корпус > 90 007


 Hello GeeksforGeeks p 90 006 >



 < р >
 < маленький >Hello GeeksforGeeks маленький >
 p >

корпус >

html >
Вывод:
Использование тега
Перечеркивание текста: Элемент используется для перечеркивания текста, помечая часть как удаленную. Он также имеет открывающий и закрывающий теги.
Пример : В приведенном ниже примере описывается использование тега , который используется для пометки части текста, которая была удалена из документа.
HTML

< html >

< head >
 < title >Delete title >
head >

< body >



Hello GeeksforGeeks p > 90 003




< 9000 6 p > < del >Hello GeeksforGeeks del > p >
9002 6 корпус HTML >
Вывод :
Использование тега
Добавление текста: Элемент используется для подчеркивания текста часть как вставленная или добавленная.