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