This article has been localized into Russian by the community.
Курсив и полужирный или сильный и подчеркивание (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>
- Вы можете использовать классы в сочетании с этими элементами, что дает вам возможность изменить внешний вид элементов и тем самым использовать элементы семантически, а не визуально
