Урок #9: Изучаем HTML форматирование текста

12 января, 2018 Максим Метелев 17000 просмотров Комментариев нет

Всем добрый день друзья! Еще один выпуск по основам сайтостроения. В 9-мом по счету уроке я расскажу про html форматирование текста веб документа. Это не сложно. Ну что же, давайте скорее приступим к изучению.

Пример текстового форматирования веб документа:

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is bold

This text is italic

This is subscript and superscript

</body>

</html>

Результат в браузере:

Изучаем форматирование текста в html

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

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

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

Ниже представлен список особых элементов, с помощью которых тексту можно придавать разный вид (форматировать его):

— Полужирный текст

— важный текст

— курсивный текст

— Подчеркнутый текст

— Отмеченный текст

— Маленький текст

<del> — Удаленный текст

<ins> — введенный текст

— текст подстроки

— текст надстрочного текста

Элементы HTML и

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

Пример:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is normal.

This text is bold.

</body>

</html>

Результат в браузере:

Элемент bold для текста

Если вы хотите усилить значение, то лучше обернуть текст параграфа в тег , не случайно переводится как «сильный».

Рекомендация: Не следует оборачивать в тег strong html заголовки. Для продвижения вашего сайта – это скажется очень пагубно. Это ошибка технической оптимизации сайта, о которой вы даже можете не догадываться, поскольку в заголовке жирное начертание особо не заметишь!

Пример:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is strong.</strong></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is normal.

This text is strong.

</body>

</html>

Результат:

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

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

Элемент i, которое еще называют курсивом (italic) не несет в себе особой важности в отличие от тега strong.

Его также используют, но в меньшей степени. Важность для seoу него есть, но минимальная.

Пример:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is normal.

This text is italic.

</body>

</html>

Результат:

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

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

Пример:

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This text is normal.

This text is emphasized.

</body>

</html>

Результат:

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

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

Html элемент small

Данный html тег для форматирования текста определяет маленький размер шрифта.

Пример:

<h2>HTML <small>Small</small> Formatting</h2>

1	<h2>HTML <small>Small</small> Formatting</h2>

В браузере:

HTML элемент форматирования small

Элемент форматирования mark

Данный тег служит для выделения или подсветки текста.

Пример ниже:

<h2>HTML <mark>Marked</mark> Formatting</h2>

1	<h2>HTML <mark>Marked</mark> Formatting</h2>

В браузере:

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

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

Элемент HTML <del> определяет удаленный текст.

Пример:

<p>My favorite color is <del>blue</del> red.</p>

1	<p>My favorite color is <del>blue</del> red.</p>

В браузере:

Тег del перечеркивает текст, делая его удаленным

HTML элемент ins

Элемент HTML <ins> определяет вставленный (добавленный) текст.

Пример:

<p>My favorite <ins>color</ins> is red.</p>

1	<p>My favorite <ins>color</ins> is red.</p>

В браузере:

html тег ins для форматирования веб документа

HTML sub элемент

Элемент HTML определяет подстрочный текст. Он как бы в «подвале» находится снизу. Это если совсем просто говорить.

Пример:

<p>Thisis <sub>subscripted</sub> text.</p>

1	<p>Thisis <sub>subscripted</sub> text.</p>

Результат:

HTML sub

HTML тег sup для оформления текста

Элемент HTML определяет надстрочный текст.

Пример:

<p>This is <sup>superscripted</sup> text.</p>

1	<p>This is <sup>superscripted</sup> text.</p>

Как выглядит:

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

Готовы к практике

С каждым уроком вы становитесь все более и более способными учениками и у вас получается все лучше и лучше. Поупражняйтесь в закреплении навыков в заданиях ниже:

Дорогие друзья. На этом урок считаю завершенным. Всех с наступившими праздниками и старым Новым Годом! Да прибудет с Вами сила языка гипертекстового! Воистину!

Рубрики: Обучение html