HTML есть несколько тегов, которые можно использовать, чтобы выделять текст на веб-страницах разными способами. Например, вы можете использовать тег <b>, чтобы сделать текст жирным, тег <i>, чтобы сделать текст курсивом, тег <mark> для пометок в тексте, тег <code> для отображения фрагмента компьютерного кода, теги <ins> и <del> для маркировки редакционных вставок в виде перечеркивания и другие.
В следующем примере демонстрируются наиболее часто используемые теги форматирования в действии. Теперь давайте попробуем понять, как они работают:
<p> Это <b>полужирный текст</b>.</p>
<p> Это <strong>очень важный текст</strong>.</p>
<p> Это <i>курсивный текст</i>.</p>
<p> Это <em>выделенный текст</em>.</p>
<p> Это <mark>выделенный текст</mark>.</p>
<p> Это <code>компьютерный код</code>.</p>
<p> Это <small>маленький текст</small>.</p>
<p> Это <sub>нижний индекс</sub> и <sup>верхний индекс</sup>текста.</p>
<p> Это <del>удаленный текст</del>.</p>
<p> Это <ins>вставленный текст</ins>.</p>По умолчанию тег <strong> обычно отображается в браузере как<b>, а тег <em> отображается как <i>. Тем не менее у этих тегов есть существенные отличия
Разница между тегами <strong> и <b>
Оба тега <strong> и <b> по умолчанию отображают заключенный текст жирным шрифтом, но тег <strong> передает браузеру информацию, что его содержание имеет большую важность, по сравнению с остальным текстом, в то время как тег <b> просто используется для привлечения внимания читателя и не передает браузеру особое семантическое значение.
<p><strong>ПРЕДУПРЕЖДЕНИЕ!</strong> Пожалуйста, используйте с осторожностью.</p>
<p>Концерт состоится в <b>Гайд-парке</b> в Лондоне.</p>Разница между тегами <em> и <i>
Аналогично, теги <em> и <i> по умолчанию отображают текст, выделенный курсивом, но тег <em> указывает браузеру, что его содержимое имеет более важное значение по сравнению с окружающим текстом, тогда как тег <i> используется для разметки, выделяя что-то из обычного текста для удобства чтения, например, технический термин, идиоматическую фразу с другого языка, мысль и т. д.
<p>Кошки - <em>милые</em> животные.</p>
<p>Лайнер <i>Royal Cruise</i> отплыл прошлой ночью.</p>Используйте теги <em> и <strong>, если содержание их текста имеет сильный акцент или важность. Кроме того, в HTML5 теги <b> и <i> были переопределены, ранее они не имели семантического значения.
Использование тегов <blockquote> и <q>
Вы можете легко отформатировать блоки цитат из других источников с помощью HTML-тега <blockquote>.
Цитаты, как правило, отображаются с отступом влево и вправо, вместе с небольшим дополнительным пространством сверху и снизу. Посмотрим пример, чтобы увидеть, как это работает:
<blockquote>
<p>Учись у прошлого, живи сегодня, надейся на завтра. Самое важное в жизни — это не переставать задавать вопросы.</p>
<cite>— Альберт Эйнштейн</cite>
</blockquote>Тег cite используется для указание ссылки на автора или источник цитаты. Он может включать название работы, имя автора (людей или организации) или ссылку.
Для коротких строчных цитат вы можете использовать HTML-тег <q>. Большинство браузеров отображают заключают текст тега в кавычки. Вот пример:
<p>По данным Всемирной организации здравоохранения (ВОЗ): <q>здоровье - это комплексное состояние полного физического, психического и социального благополучия.</q></p>Использование тега <abbr>
Аббревиатура — это сокращенная форма слова, фразы или имени.
Вы можете использовать тег <abbr> для обозначения аббревиатуры. Атрибут title используется внутри этого тега, чтобы показать расшифровку аббревиатуры, которая отображается браузерами как всплывающая подсказка, когда курсор мыши наведен на элемент. Давайте посмотрим на пример:
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> является основной международной организацией по стандартизации <abbr title="World Wide Web">WWW или W3</abbr>. Он был основан Тимом Бернерсом-Ли.</p>Использование тега <address>
На сайтах услуг часто указывают адрес и почту. HTML предоставляет специальный тег <address> для представления контактной информации (физической и/или цифровой) для человека, людей или организации.
В идеале этот тег должен использоваться для отображения контактной информации, связанной с самим документом, например, с автором статьи. Большинство браузеров отображают блок адреса курсивом. Вот пример:
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>
