Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Код HTML
Описание
Пример
<b>Текст</b>
Жирное начертание текста
Текст
<i>Текст</i>
Курсивное начертание текста
Текст
<sup>Текст</sup>
Верхний индекс
e=mc2
<sub>Текст</sub>
Нижний индекс
H2O
<pre>Текст</pre>
Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em>
Курсивный текст
Текст
<strong>Текст</strong>
Жирное начертание текста
Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 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. Вид курсивного жирного начертания текста
Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 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. Нижний индекс в тексте
Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.
Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
текст
HTML по теме
Тег <b>
Тег <em>
Тег <i>
Тег <strong>
Тег <sub>
Тег <sup>
Статьи по теме
Форматирование текста
Как сделать текст в HTML (топ 10 запросов)
Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.
Теги сообщают браузерам, как и в каком месте страницы, отображать текст. Для этого придуманы специальные теги. Мы не пишем, текст, просто так.
Хорошего Вам дня!
Текст, всегда заключают, между тегами, например, внутри абзаца.
<p>Пожелайте мне удачи!</p>
Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.
Как сделать текст в центре
По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.
<div>Поставьте меня в центр</div> // HTML
div {
text-align: center; // CSS
}
Как сделать текст справа
<div>Хочу стоять справа</div> // HTML
div {
text-align: right; // CSS
}
Как сделать отступ текста
За отступы текста отвечают свойства – margin и padding.Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.
<p>Отодвинься от меня</p> // HTML
p {
margin: 20px; // CSS
padding: 10px;
}
Как сделать текст жирным
Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.
<p>Хочу быть <b>жирным</b></p> // HTML
или выделять участок тегом span и задавать степень жирности в CSS правилах.
<p>Хочу быть <span>самым жирным</span></p> // HTML
span {
font-weight: bolder; // CSS
}
или указывать жирность в цифрах.
span {
font-weight: 700; // в интервале 100 - 900
}
Как сделать ссылку в тексте
Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.
<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка
<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка
Как сделать текст в рамке
Рамка задается не тексту, а блочному тегу, в котором находится этот текст.
<p>Я - важный текст</p> // HTML
p {
border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
}
Как сделать текст подчеркнутым
Нужное место, обрамляем тегом u.
<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML
Как задать тексту фон
Сделать фон для всего абзаца.
<p>Хочу выделиться фоном</p> // HTML
p {
background-color: pink; // CSS
}
Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.
<p>Нет, только <span>розовый цвет</span></p> // HTML
span {
background-color: pink; // CSS
}
Как увеличить текст
<p>Посмотрите, какой я большой</p> // HTML
p {
font-size: 30px; // CSS
}
Как сделать текст курсивом
Через тег i в разметке.
<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML
CSS стили + тег
<p><span>Курсивом</span> - я особенный</p> // HTML
span {
font-style: italic; // CSS
}
Итого
Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.
Создано 29.07.2019 10:29:18
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov. Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Чтобы сделать текст одновременно жирным и курсивным шрифтом
Такое разделение
Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.
Задавайте ваши вопросы в комментариях.
Это комбинация гипертекста и языка разметки. HTML использует различные типы тегов для создания веб-страниц и Тег