Теги форматирования HTML - httpdoc.ru

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

Теги форматирования HTML используются для изменения внешнего вида текста, чтобы он выглядел лучше, чем текст по умолчанию. Форматирование тегов может сделать текст bold , italic , underlined и т.д.

Все теги форматирования - это парные теги. Все, что написано между тегами форматирования, будет отображаться в браузере в соответствии с тегом. Например, все, что написано между <i> и, </i> будет отображаться в браузере курсивом.


Существуют разные теги для разных тегов форматирования. Каждый тег имеет свой тип форматирования, связанный с ним.

Некоторые теги форматирования HTML:

  • Жирный тег <b>
  • Курсив <i>
  • Подчеркнуть тег <u>
  • Сильный тег <strong>
  • Маленький тег <small>
  • Большой тег <big>
  • Отметить тег <mark>
  • Подчеркнутый тег <em>
  • Удаленный тег <del>
  • Вставленный тег <ins>
  • Подписанный тег <sub>
  • Надстрочный тег <sup>

HTML тег <b>

<b> Тег HTML определяет полужирный текст. Полужирный текст шире и темнее текста, чем текст по умолчанию, и не имеет особого значения для браузера. Посмотрите на пример ниже.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Bold Text </title> 
</head> 

<body> 		

<p> This is Normal text. </p> 
<b> This is Bold Text. </b> 

</body> 
</html>

Выход

HTML Bold Text Example

Это нормальный текст.

Это жирный текст.

HTML тег <strong> 

<strong> Тег HTML отображает то же форматирование, что и <b> тег. Но strong имеет определенное значение для браузера и поисковых систем. Всегда рекомендуется писать ключевые слова внутри <strong> тега, чтобы придать им особую важность.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title> Strong Text </title> 
</head> 
<body> 

<p> This is Normal text </p> 
<strong> This Text is Strong </strong>

</body> 
</html>

Выход

HTML Strong Tag Example

Это обычный текст

Этот текст сильный

HTML тег <i>

<i> Тег HTML определяет курсивный текст. Этот тип форматирования отображает текст на основе курсивного шрифта, который слегка наклонен вправо.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Italic Text </title> 
</head> 
<body> 

<p> This is normal text </p> 
<i> This is italic Text </i> 

</body> 
</html>

Выход

HTML Italic Text Example

Это нормальный текст

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

HTML тег <u>

<u> Тег HTML определяет подчеркнутый текст. Весь текст внутри <u> и </u> tags will have an underline throughout.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Underlined Text </title> 
</head> 

<body> 

<p> This is Normal text </p> 
<u> This is Underlined Text </u> 

</body> 
</html>

Выход

Underlined Text

Это обычный текст

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

HTML тег <small>

<small> Тег HTML определяет небольшой текст. Этот текст используется для некоторых сторонних комментариев или для записи информации об авторских правах.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Small Text </title> 
</head> 

<body> 

This text is <small> small </small>.

</body> 
</html>

Выход

HTML Small Tag Example Этот текст небольшой .

HTML тег <big>

Элемент HTML <big> определяет БОЛЬШОЙ текст.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Big Tag </title> 
</head> 

<body> 

This text is <big> BIG </big> 

</body> 
</html>

Выход

HTML Big Tag Example Этот текст БОЛЬШОЙ

HTML тег <mark>

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Mark Tag </title> 
</head> 

<body> 

This text is <mark> Marked. </mark> 

</body> 
</html>

Выход

HTML Mark Tag Example Этот текст Отмечено.

HTML тег <em> выделяет тект

Элемент HTML <em> определяет выделенный текст. Это придаст тексту такое же форматирование курсивом. Этот тег важен для программ чтения с экрана. Программы чтения с экрана делают особый акцент на этом типе текста и читают его со словесным ударением.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Emphasize Text </title> 
</head> 

<body> 

This text is Normal.  
This text is <em> Emphasized. </em> 

</body> 
</html>

Выход

HTML Emphasize Tag Example Этот текст нормальный.
Этот текст выделен.

HTML тег <del>

Элемент HTML <del> определяет Удалено текст. Текст отображается с зачеркнутой линией.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Delete Text </title> 
</head> 

<body> 

<p> This text is Normal. </p> 
This text is <del> Deleted. </del> 

</body> 
</html>

Выход

HTML Delete Tag Example

Этот текст нормальный.

Этот текст Удалено.

HTML тег <ins>

Элемент HTML <ins> определяет вставлен (добавлен) текст. Придает тексту подчеркнутое форматирование. Используется в сочетании с deleted текстом.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Insert Text </title> 
</head> 

<body> 

This text is <ins> inserted. </ins> 

</body> 
</html>

Выход

Insert Text Этот текст вставлен.

HTML тег <sub>

Элемент HTML <sub> определяет текст с нижним индексом . Этот тип текста имеет небольшой размер и размещается немного ниже обычной строки текста.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Subscript Text </title> 
</head> 

<body> 

This text is <b> bold. </b> 
This text is <i> italic. </i> 
This text is <sup> Subscripted. </sup> 

</body> 
</html>

Выход

HTML Subscript Tag Example Этот текст выделен жирным шрифтом.
Этот текст выделен курсивом.
Этот текст подписан.

HTML тег <sup>

Элемент HTML <sup> определяет текст с надстрочным индексом . Он также отображает очень мелкий текст, такой как нижний индекс, но здесь текст размещается немного выше обычной строки текста.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Superscript Tag </title> 
</head> 

<body> 

This text is <b> bold. </b> 
This text is <i> italic. </i>
This text is <sup> Superscripted. 

</body> 
</html>

Выход

HTML Superscript Tag Example Этот текст выделен жирным шрифтом.
Этот текст выделен курсивом.
Этот текст имеет надстрочный индекс.