Posted:
Янв 7, 2023
Comments:
0 Comments

Тег text: Текст | htmlbook.ru

Теги форматирования текста в HTML

Рейтинг: 4 из 5, голосов 53

08 февраля 2018 г.

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

<strong> — важный фрагмент текста, жирный;
<em> — акцентирование внимания, курсив;
<mark> — подсвеченный участок текста;
<b> — жирный шрифт;
<i> — курсив, наклонный шрифт;
<s> — зачеркнутый текст;
<small> — текст меньшего размера;
<sup> — верхний индекс;
<sub> — нижний индекс;
<pre> — предварительно отформатированный текст;
<dfn> — термин;
<h2> — <h6> — заголовки;
<q> — короткая внутристрочная цитата;
<blockquote> — цитата;
<cite> — сноска на название материала;
<code> — программный код;
<samp> — результат вывода компьютерной программы;
<kbd> — клавиатурный ввод;
<var> — переменная компьютерной программы. ;
<time> — дата и/или время.

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

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

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

<strong>Важный фрагмент текста</strong>

Тег <em> используется для акцентирования внимания, «подчеркивания» фрагмента текста. Браузеры обычно отображают текст внутри тега <em> курсивом. <em> — тег логического выделения.

<em>Акцентированный фрагмент</em>

Тег <mark> используется для подсветки фрагмента текста.

<mark>Подсвеченный фрагмент</mark>

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

<b>Текст жирным шрифтом</b>

Тег <i> используется для написания текста курсивом. Используйте тег <i> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<i>Текст курсивом</i>

Тег <s> используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега <s> выводится перечеркнутым.

<s>Перечеркнутый текст</s>

Тег <small> используется для написания текста шрифтом меньшего размера.

<small>Текст меньшего размера</small>

Тег <sub> используется для создания текста нижнего индекса.

<sub>Текст нижнего индекса</sub>

Тег <sup> используется для создания текста верхнего индекса.

<sup>Текст верхнего индекса</sup>

Тег <pre> указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.

<pre>Предварительно отформатированный текст</pre>

Теги устанавливающие суть содержимого

Теги <h2> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h2> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

<h2>Заголовок</h2>

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

<dfn>Термин</dfn>

Тег <q> используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.

<q>Короткая цитата</q>

Тег <blockquote> указывает, что содержимое является цитатой. Содержимое тега выводится в отдельном блоке.

<blockquote>Цитата</blockquote>

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

<cite>Название материала</cite>

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

<code>Код компьютерной программы</code>

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

<samp>Результат вывода компьютерной программы</samp>

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

<kbd>Клавиатурный ввод</kbd>

Тег <var> указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега <var> курсивом.

<var>Переменная компьютерной программы</var>

Тег <time> указывает, что содержимое является датой, временем, периодом времени или событием, относящемся к указаному в атрибуте datatime времени.

<time>Дата и/или время</time>

by Lebedev

HTML: Теги для текста | HTML самоучитель

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

  • Тег <pre>

  • Теги для отображения кода

  • Тег <address>

  • Аббревиатуры

  • Направление текста

  • Цитаты

  • Удаленный и вставленный текст

В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>.
Они используются для выделения текста полужирным шрифтом или курсивом, такие
теги в HTML называются тегами для форматирования.

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

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:


<html>
  <body>

    <p><b>Текст</b></p>
    <p><strong>Текст</strong></p>
    <p><em>Текст</em></p>
    <p><i>Текст</i></p>
    <p><small>Текст</small></p>
    <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>

  </body>
</html>

Попробовать »

Тег <pre>

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


<html>
  <body>

    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>

  </body>
</html>

Попробовать »

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:


<html>
  <body>

    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>

</body>
</html>

Попробовать »

Тег <address>

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

Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:


<html>
  <body>

    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>

  </body>
</html>

Попробовать »

Аббревиатуры

Пример демонстрирует, как можно написать аббревиатуру или сокращение:


<html>
 <body>

    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>

  </body>
</html>

Попробовать »

Направление текста

Пример демонстрирует, как можно изменить направление текста:


<html>
  <body>

    <p>
      Тег bdo определяет направление текста - слева направо и наоборот. <br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>

  </body>
</html>

Попробовать »

Цитаты

В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.

В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:


<html>
  <body>

    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата. Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата: 
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>

</body>
</html>

Попробовать »

Удаленный и вставленный текст

Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):


<html>
  <body>

    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>

  </body>
</html>

Попробовать »

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

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

❮ Назад
Далее ❯

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

Пример

Этот текст IS BOLD

Этот текст — курсив

Это Подписк и SuperScript

. отображать специальные типы текста:

  • — Жирный текст
  • — Важный текст
  • — Курсив
  • — Выделенный текст
  • <знак> — Выделенный текст
  • — Меньший текст
  • — Удален текст
  • — Вставленный текст
  • — Подстрочный текст
  • — Надстрочный текст

Элементы HTML

и

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

Пример

Этот текст выделен жирным шрифтом

Попробуйте сами »

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

Пример

Этот текст
важно!

Попробуйте сами »

Элементы HTML

и

Элемент HTML определяет часть
текст в другом голосе или настроении. Содержимое внутри обычно отображается в
курсив.

Совет: Тег часто используется для обозначения технического термина,
фраза из другого языка, мысль, название корабля и т. д.

Пример

Этот текст выделен курсивом

Попробуйте сами »

Элемент HTML определяет
выделенный текст. Содержимое внутри обычно отображается курсивом.

Совет: Программа чтения с экрана произносит слова в
с ударением, с использованием словесного ударения.

Пример

Этот текст
подчеркнуто

Попробуйте сами »

Элемент HTML

Элемент HTML определяет
текст меньшего размера:

Пример

Это текст меньшего размера.

Попробуйте сами »

Элемент HTML

Элемент HTML определяет текст
которые следует отметить или выделить:

Пример

Не забудьте сегодня купить молоко.

Попробуйте сами »

HTML-элемент

HTML-элемент определяет текст
который был удален из документа. Браузеры обычно бьют по линии
через удаленный текст:

Пример

Мой любимый цвет синий красный.

Попробуйте сами »

HTML Элемент

HTML Элемент определяет текст
который был вставлен в документ. Браузеры обычно подчеркивают вставленные
текст:

Пример

Мой любимый цвет — синий красный.

Попробуйте сами »

Элемент HTML

Элемент HTML определяет
подстрочный текст. Подстрочный текст отображается на полсимвола ниже обычной строки,
и иногда отображается более мелким шрифтом. Подстрочный текст можно использовать для
химические формулы, такие как H 2 O:

Пример

Это
представляет собой подписанный текст.

Попробуйте сами »

Элемент HTML

Элемент HTML определяет
надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного
строка и иногда отображается более мелким шрифтом. Можно использовать надстрочный текст
для сносок, например WWW [1] :

Пример

Это
текст с надстрочным индексом.

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте особое значение слову «деградация» в абзаце ниже.

<р>

Миссия WWF — остановить
деградация нашего
естественная среда планеты.

Начать упражнение

Элементы форматирования текста HTML

Тег Описание
Определяет полужирный текст
Определяет выделенный текст 
<я> Определяет часть текста в другом голосе или настроении
<маленький> Определяет меньший текст
<сильный> Определяет важный текст
Определяет подстрочный текст
Определяет текст с надстрочным индексом
Определяет вставленный текст
<удалить> Определяет удаленный текст
<знак> Определяет помеченный/выделенный текст

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9030
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

 — SVG: Масштабируемая векторная графика

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

Если текст включен в SVG не внутри элемента , он не отображается. Это отличается от скрытого по умолчанию, так как настройка display свойство не отображает текст.

 html,
тело,
свг {
  высота: 100%;
}
 
 
  <стиль>
    .маленький {
      шрифт: курсив 13px без засечек;
    }
    .тяжелый {
      шрифт: жирный 30px без засечек;
    }
    /* Обратите внимание, что цвет текста задается с помощью *
     * свойство fill, свойство color только для HTML */
    .рррр {
      шрифт: курсив 40 пикселей с засечками;
      заливка: красный;
    }
  
  Моя
  кошка
  является
  Сварливый!
х

Координата x начальной точки базовой линии текста.
Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

г

Координата Y начальной точки базовой линии текста.
Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

дх

Смещает положение текста по горизонтали относительно предыдущего текстового элемента.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

ды

Смещает положение текста по вертикали от предыдущего текстового элемента.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

повернуть

Изменяет ориентацию каждого отдельного глифа. Может вращать глифы по отдельности.
Тип значения : <список номеров> ; Значение по умолчанию : нет; Анимация : да

регулировка длины

Как текст растягивается или сжимается, чтобы соответствовать ширине, определяемой атрибутом textLength .
Тип значения : интервал | spacingAndGlyphs ; Значение по умолчанию : интервал ; Анимация : да

длина текста

Ширина, по которой должен масштабироваться текст.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

Глобальные атрибуты

Основные атрибуты

В частности: id , tabindex

Атрибуты стиля
class , style , font-family , font-size , font-size-adjust , font-stretch , font-style , font-variant , font- вес
Атрибуты условной обработки

В частности: requiredExtensions , systemLanguage

Атрибуты событий

Глобальные атрибуты событий, Графические атрибуты событий

Атрибуты презентации

Most notably: clip-path , clip-rule , color , color-interpolation , color-rendering , cursor , display , dominant-baseline , fill , непрозрачность заливки , правило заливки , фильтр , маска , непрозрачность , Pointer-EVENTS , Рендеринг формы , ход , Случай-Dasharray , Dashoffset , Инсульт-линейный , штрих-ширина , текст-привязка , преобразование , вектор-эффект , видимость

Атрибуты арии

ария-активный потомок , ARIA-Atomic , ARIA-AutocOpplete , ARIA-Busy , Проверка ARIA , ARIA-CLCOUNT , ARIA-COLINDEX , 333334, , , 333334, 33333333333333.

This entry was posted in Популярное