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

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

Что такое семантика?

Семантика в HTML является практикой предоставления смысла и структуры содержимого документа с помощью соответствующего тега. Семантический код описывает значение содержимого документа, независимо от его стиля или внешнего вида. Есть несколько преимуществ от применения семантических элементов:

  1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем "легче" документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
  2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
  3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент <strong>. Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги <strong> и <b>. Важно понимать семантическую разницу между ними.

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

HTML-код с тегами <strong> и <b>:

<!-- Важное значение -->
<p><strong>Внимание:</strong> крутой спуск.</p>
  
<!-- Стилистическое выделение -->
<p>Это рецепты <b>оливье</b> и <b>винегрета</b>.</p>

Пример: важный и жирный текст


Внимание: крутой спуск.
  
Это рецепты оливье и винегрета.

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

Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент <em>. Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.

Тег <em> применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега <i>, который применяется просто для создания курсивного текста.

HTML-код с тегами <em> и <i>:

<!-- Акцент на слове-->
<p>Я <em>люблю</em> Родину!</p>

<!-- Просто курсив -->
<p>Имя <i>Виктория</i> означает победа.</p>

Пример: акцент и курсив

Я люблю Родину!

Имя Виктория означает победа.

Теги <small> и <big>

Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Тег <big> наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами <small> и <big>:

<p>Это обычный текст.</p>
<p><small>Это текст с меньшими буквами.</small></p>
<p><big>Это текст с большими буквами.</big></p>

Пример: уменьшенный и увеличенный шрифт

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

Это текст с меньшими буквами.

Это текст с большими буквами.

Внимание: Это чисто презентационный код, элемент <big> удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента <big> веб - разработчики должны использовать CSS свойства.

HTML тег <mark>

Тег <mark> используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера <mark>выделяется желтым цветом</mark>как чернильным маркером.

HTML тег <del>

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

HTML тег <ins>

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

HTML тег <sub>

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

HTML тег <sup>

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

Перевод строк и горизонтальные линии

Тег <br> (перевод строк)

Как вы уже видели раньше, тег <p> позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег <br>. Одним из видимых с первого взгляда отличий данного тега от <p> является отсутствие отступов после и перед тегом <br>. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент <br> в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег <hr> (горизонтальная линия)

Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег <hr>. Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Это первый абзац.

Это второй абзац.

Это линия:


Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик


HTML-код с тегами <mark>, <del>, <ins>, <sub>, <sup>:

<p>В тексте есть слово: <mark>удача</mark>.</p>
<p>Слово <del>беда</del> было удалено из текста.</p>
<p>Слово <ins>победа</ins> было добавлено в текст.</p>
<p>Формула воды: Н<sub>2</sub>O.</p>
<p>Скорость ветра: 20м<sup>3</sup>/сек.</p>

Пример: форматирование текста

В тексте есть слово: удача. Слово беда было удалено из текста. Слово победа было добавлено в текст. Формула воды: Н2O. Скорость ветра: 20м3/сек.

Задачи


Итоговое задание [5-10]

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

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

Семантически сильное слово

Выделите слово "профессионалом" жирным шрифтом, обозначив тем самым тем самым особую семантическую важность этого слова.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Семантически сильное слово</title>  
 </head>
 <body>
  <p>Ты должен стать профессионалом своего дела</p>
 </body>
</html>

Акцент на слове

Сделайте акцент на слове "полный". При этом визуально это слово должно отображаться курсивом.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Акцент на слове</title>  
 </head>
 <body>
  <p>За год Земля делает полный оборот вокруг Солнца.</p>
 </body>
</html>

Фоновое выделение

Создайте словно маркером фоновое выделение на слове "равномерно".

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фоновое выделение</title>  
 </head>
 <body>
  <p>Когда тело падает — его скорость равномерно возрастает.</p>
 </body>
</html>

Верхний индекс

Примените форматирование к тексту так, чтобы цифра "2" оказалась в верхнем индексе.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Верхний индекс</title>  
 </head>
 <body>
  <p>Единица измерения площади — м2.</p>
 </body>
</html>

Эффект перечеркивания

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перечеркивания</title>  
 </head>
 <body>
  <p>Я люблю утром выпить чашечку чая кофе.</p>
 </body>
</html>