Всем добрый день друзья! Еще один выпуск по основам сайтостроения. В 9-мом по счету уроке я расскажу про html форматирование текста веб документа. Это не сложно. Ну что же, давайте скорее приступим к изучению.
Пример текстового форматирования веб документа:
1 2 3 4 5 6 7 8 9 10 |
<!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> |
Результат в браузере:
Содержание
В предыдущем уроке мы узнали про атрибуты стилей. На этом мощь языка не ограничивается и с помощью специальных элементов мы можем определять текст со специальным значением.
HTML использует такие элементы как <b> и <i> для форматирования текста если он должен быть написан полужирным начертанием или курсивом.
Ниже представлен список особых элементов, с помощью которых тексту можно придавать разный вид (форматировать его):
<b> — Полужирный текст
<strong> — важный текст
<i> — курсивный текст
<em> — Подчеркнутый текст
<mark> — Отмеченный текст
<small> — Маленький текст
<del> — Удаленный текст
<ins> — введенный текст
<sub> — текст подстроки
<sup> — текст надстрочного текста
Если вы не хотите придавать особой важности тексту, то можно сделать ему начертание через тег <b> полужирный вариант.
Пример:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><b>This text is bold.</b></p> </body> </html> |
Результат в браузере:
Если вы хотите усилить значение, то лучше обернуть текст параграфа в тег <strong> , не случайно переводится как «сильный».
Рекомендация: Не следует оборачивать в тег strong html заголовки. Для продвижения вашего сайта – это скажется очень пагубно. Это ошибка технической оптимизации сайта, о которой вы даже можете не догадываться, поскольку в заголовке жирное начертание особо не заметишь!
Пример:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><strong>This text is strong.</strong></p> </body> </html> |
Результат:
Элемент i, которое еще называют курсивом (italic) не несет в себе особой важности в отличие от тега strong.
Его также используют, но в меньшей степени. Важность для seoу него есть, но минимальная.
Пример:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><i>This text is italic.</i></p> </body> </html> |
Результат:
Элемент HTML <em> определяет выделенный текст с добавленной смысловой значимостью.
Пример:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><em>This text is emphasized.</em></p> </body> </html> |
Результат:
Примечание. Браузеры отображают <strong> как <b> и <em> как <i> . Тем не менее, существует разница в значении этих тегов: <b> и <i> определяет жирный и курсивный текст, но <strong> и <em> означает, что текст является «важным».
Данный html тег для форматирования текста определяет маленький размер шрифта.
Пример:
1 |
<h2>HTML <small>Small</small> Formatting</h2> |
В браузере:
Данный тег служит для выделения или подсветки текста.
Пример ниже:
1 |
<h2>HTML <mark>Marked</mark> Formatting</h2> |
В браузере:
Элемент HTML <del> определяет удаленный текст.
Пример:
1 |
<p>My favorite color is <del>blue</del> red.</p> |
В браузере:
Элемент HTML <ins> определяет вставленный (добавленный) текст.
Пример:
1 |
<p>My favorite <ins>color</ins> is red.</p> |
В браузере:
Элемент HTML <sub> определяет подстрочный текст. Он как бы в «подвале» находится снизу. Это если совсем просто говорить.
Пример:
1 |
<p>Thisis <sub>subscripted</sub> text.</p> |
Результат:
Элемент HTML <sup> определяет надстрочный текст.
Пример:
1 |
<p>This is <sup>superscripted</sup> text.</p> |
Как выглядит:
С каждым уроком вы становитесь все более и более способными учениками и у вас получается все лучше и лучше. Поупражняйтесь в закреплении навыков в заданиях ниже:
Дорогие друзья. На этом урок считаю завершенным. Всех с наступившими праздниками и старым Новым Годом! Да прибудет с Вами сила языка гипертекстового! Воистину!