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>

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.