Один из тегов, который вы выучите на ранних этапах веб-дизайн образование - это пара тегов, известных как «теги выделения». Давайте посмотрим, что это за теги и как они сегодня используются в веб-дизайне.
Вернуться к XHTML
Если вы изучали HTML много лет назад, задолго до появления HTML5, вы, вероятно, использовали и полужирный, и курсивный теги. Как и следовало ожидать, эти теги превратили элементы в текст, выделенный жирным шрифтом или курсивом соответственно. Проблема с этими тегами, и почему они были отодвинуты в сторону в пользу новых элементов (которые мы вскоре рассмотрим), заключается в том, что они не являются семантическими элементами. Это потому, что они определяют, как должен выглядеть текст, а не информацию о тексте. Помните, что HTML (где и будут написаны эти теги) - это структура, а не визуальный стиль! Визуальные эффекты обрабатываются CSS и передовой опыт веб-дизайна давно придерживается мнения, что на веб-страницах должно быть четкое разделение стиля и структуры. Это означает отказ от использования несемантических элементов, которые выглядят скорее как детали, чем структура. Вот почему смелые и
курсив теги обычно заменены сильным (жирным шрифтом) и выделением (курсивом).а также
Элементы сильного и акцентированного внимания добавляют информацию к вашему тексту, детализируя контент, который следует рассматривать по-другому и подчеркивать, когда это содержание произносится. Вы используете эти элементы почти так же, как вы использовали бы жирный шрифт и курсив в прошлом. Просто окружите свой текст открывающими и закрывающими тегами ( а также для акцента и а также для сильного выделения), а прилагаемый текст будет выделен.
Вы можете вкладывать эти теги, независимо от того, какой из них является внешним. Вот несколько примеров.
Этот текст выделен и большинство браузеров отображают его курсивом.
Этот текст сильно выделен и большинство браузеров отображают его жирным шрифтом.
В обоих этих примерах мы не диктуем внешний вид с помощью HTML. Да, внешний вид по умолчанию тег будет курсивом, а будет выделено жирным шрифтом, но этот вид можно легко изменить в CSS. Это лучшее из обоих миров. Вы можете использовать стили браузера по умолчанию, чтобы выделить текст в документе курсивом или полужирным шрифтом, не пересекая линию и не смешивая структуру и стиль. Скажи, что ты этого хотел текст не только жирным, но и красным, вы можете добавить его в SCS.
сильный {
красный цвет;
}
В этом примере вам не нужно добавлять свойство для жирного шрифта, поскольку это значение по умолчанию. Однако, если вы не хотите оставлять это на волю случая, вы всегда можете добавить это в:
сильный {
font-weight: жирный;
красный цвет;
}
Теперь у вас будет почти гарантированная страница с полужирным (и красным) текстом везде, где тег используется.
Удвойте акцент
За год мы заметили одну вещь: что произойдет, если вы попытаетесь удвоить акцент. Например:
В этом тексте должны быть жирным шрифтом и курсивом текст внутри него.
Можно подумать, что эта строка создаст область, в которой текст выделен жирным шрифтом И курсивом. Иногда это действительно происходит, но мы видели, что некоторые браузеры учитывают только второй из двух стилей выделения, наиболее близкий к рассматриваемому тексту, и отображают его только курсивом. Это одна из причин, почему мы не удваиваем тэги выделения.
Еще одна причина избегать этого «удвоения» - стилистические цели. Обычно достаточно одной формы акцента, чтобы передать тон, который вы хотите задать. Вам не нужно выделять жирным шрифтом, курсивом, раскрашивать, увеличивать и подчеркивать текст, чтобы он выделялся. Этот текст, со всеми этими разными акцентами, станет ярким. Поэтому будьте осторожны при использовании тегов выделения или стилей CSS, чтобы сделать акцент, и не переусердствуйте.
Примечание о полужирном и курсиве
Последняя мысль - пока жирный () и курсивом () теги больше не рекомендуется использовать в качестве элементов выделения, некоторые веб-дизайнеры используют эти теги для стилизации встроенных областей текста. В основном они используют его как элемент. Это хорошо, потому что теги очень короткие, но использовать эти элементы таким образом обычно не рекомендуется. Мы упоминаем об этом, если вы видите, что на некоторых сайтах он используется не для создания полужирного или курсивного текста, а для создания CSS-хука для какого-либо другого вида визуального стиля.