Урок №10. HTML. Форматування тексту

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Форматування тексту в HTML. Як зробити форматування на веб-сторінках?

Форматування тексту:

This text is bold

This text is italic

This is subscript and superscript

Спробуйте самі! »

Елементи форматування в HTML

У попередньому уроці ви дізналися про HTML атрибут style. HTML також визначає спеціальні елементи для визначення тексту з особливим значенням. HTML використовує такі елементи, як <b> та <i> для форматування виводу, наприклад жирний або курсивний текст. Елементи форматування призначені для відображення спеціальних типів тексту:


HTML елементи <b> та <strong>

HTML елемент <b> визначає жирний текст без додаткового значення.

Приклад:

<b>This text is bold</b>
Спробуйте самі! »

HTML елемент <strong> визначає важливий текст з додаванням семантично «сильного» значення.

Приклад:

<strong>This text is strong</strong>
Спробуйте самі! »

HTML елементи <i> та <em>

HTML елемент <i> визначає текст курсивом без додаткового значення.

Приклад:

<i>This text is italic</i>
Спробуйте самі! »

HTML елемент <em> визначає підкреслений текст з додатковим смисловим значенням.

Приклад:

<em>This text is emphasized</em>
Спробуйте самі! »

Примітка: Браузери відображають <strong> як <b> (виділяють жирним шрифтом), а <em> як <i> (виділяють курсивним шрифтом). Однак, існує різниця в значенні цих тегів: <b> та <i> лише відображаються жирним і курсивним текстом, але теги <strong> та <em> означають, що текст "важливий" за значенням.


HTML елемент <small>

HTML елемент <small> визначає менший текст:

Приклад:

<h2>HTML <small>Small</small> Formatting</h2>
Спробуйте самі! »

HTML елемент <mark>

HTML елемент <mark> визначає позначений (маркований) текст (за умовчанням - жовтим кольором):

Приклад:

<h2>HTML <mark>Marked</mark> Formatting</h2>
Спробуйте самі! »

HTML елемент <del>

HTML елемент <del> визначає видалений (вилучений) текст.

Приклад:

<p>My favorite color is <del>blue</del> red.</p>
Спробуйте самі! »

HTML елемент <ins>

HTML елемент <ins> визначає вставлений (доданий) текст.

Приклад:

<p>My favorite <ins>color</ins> is red.</p>
Спробуйте самі! »

HTML елемент <sub>

HTML елемент <sub> визначає підрядковий текст (нижнього індексу).

Приклад:

<p>This is <sub>subscripted</sub> text.</p>
Спробуйте самі! »

HTML елемент <sup>

HTML елемент <sup> визначає надрядковий текст (верхнього індексу).

Приклад:

<p>This is <sup>superscripted</sup> text.</p>
Спробуйте самі! »

Перевірте себе вправами!


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

Тег Опис
<b> Визначає жирний текст
<em> Визначає важливо підкреслений текст
<i> Визначає курсивний текст
<small> Визначає зменшений текст
<strong> Визначає важливий за значенням текст
<sub> визначає підрядковий текст
<sup> визначає надрядковий текст
<ins> Визначає вставлений текст
<del> Визначає видалений текст
<mark> Визначає позначений/маркований текст

Довідник HTML тегів

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.