TOC

This article has been localized into Russian by the community.

Основы HTML:

Курсив и полужирный или сильный и подчеркивание (Italic & Bold or Strong & Emphasize)

Ранее я уже указывала, что HTML не должен использоваться, чтобы влиять на внешний вид вашей веб-страницы. Но вы можете делать слова или предложения жирным или курсивом с помощью HTML так же как и в Word. До сих пор элементы <b>, <i>, <em> и <strong> были чисто презентационными, но в HTML5 к этим четырем элементам добавлено семантическое значение.

  • Элемент <i> был для курсивного текста, теперь он также используется для альтернативного текста, такого как иностранные слова, технические термины или встроенные инструкции
  • Элемент <b> был для жирного текста, теперь он также используется в качестве стилистического смещения, такого как ключевые слова в документе с названиями продуктов
  • <em> был для акцента, теперь он используется для слов или предложений, которые вы произносите по-другому
  • Наконец, элемент <strong> для чего-то с сильным акцентом, он представляет важность

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

<!DOCTYPE html>
A foreign word, <i>smuk</i>, means beautiful in Danish <br /><br />
The phrase <b>semantinc meaning</b> might be keywords in this document<br /><br />
Alternate accentuation? Use the <em>em</em>, not the italic element.<br /><br />
If you want to write semantic code <strong>it is important that you understand the differences</strong>!
</html>

Пример

В следующем примере отрывок из «МакБет» Шекпира, <i> используется для указания направления сцены, тогда как элемент <b> используется, чтобы указать, к какому персонажу относится строка:

Входят Макбет и Банко

Макбет Страшней и ярче дня ещё не видел.

Банко Далеко ли до Форреса? Кто это?
Как жалок вид их и как дик наряд!
Они так отличаются от прочих жильцов земли, и все ж они на ней!
Кто вы такие? Вы живые твари?
Вас можно спрашивать? Как будто да.
Вы поняли меня и приложили
Сухие пальцы к высохшим губам.
Вы - женщины, но бороды на лицах
Как будто говорят нам о другом.

Макбет Кто вы, ответьте, если речь дана вам!

Первая ведьма Хвала тебе, Макбет, гламисский тан!

Вторая ведьма - Хвала тебе, Макбет, кавдорский тан!

Третья ведьма Хвала Макбету, королю в грядущем!

Использование элементов <i> и the <b> в этом действительно создает одну проблему - что если вы вдруг решите, что хотите, чтобы он выглядел по-другому? Вот где CSS-стилизация пригодится. Добавляя атрибут class к каждому<i> или <b>, вы можете использовать семантические свойства элементов, но при этом иметь полный контроль над их внешним видом. Класс направления сцены может быть сокращен до stg-direc, а класс символов может быть сокращен до char, и тогда разметка будет выглядеть следующим образом:

<p>
<i class="stg-direc">Enter MACBETH and BANQUO</i>
<b class="char">MACBETH</b> So foul and fair a day I have not seen.
<b class="char">BANQUO</b>How far is't call'd to Forres? What are these
…
</p>

Чему вы научилсиь

  • Если вы не используете CSS для стилизации своих элементов, содержание в <em> и <i> элементы будут выглядеть одинаково
  • Если вы не используете CSS для стилизации своих элементов, содержание в <strong> и <b> элементы будут выглядеть одинаково
  • следует отдать предпочтение элементам <em> и <strong>, в отличие от lt;i> и <b>
  • Эти элементы не должны использоваться для цитирования и извлечения цитат, вместо этого вы должны использовать <blockquote> и <aside>
  • Вы можете использовать классы в сочетании с этими элементами, что дает вам возможность изменить внешний вид элементов и тем самым использовать элементы семантически, а не визуально
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!