Программирование

HTML Акцент Теги

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

Вернуться к XHTML

Если вы изучали HTML много лет назад, задолго до появления HTML5 , вы, вероятно, использовали теги жирный и курсив. Как и следовало ожидать, эти теги превратили элементы в текст, выделенный жирным шрифтом или курсивом соответственно. Проблема с этими тегами, и почему они были оттеснены в пользу новых элементов (которые мы вскоре рассмотрим), заключается в том, что они не являются семантическими элементами. Это потому, что они определяют, как должен выглядеть текст, а не информацию о тексте. Помните, что HTML (где эти теги будут написаны) — это все о структуре, а не о визуальном стиле! Визуалы обрабатываются CSSи лучшие практики веб-дизайна давно считают, что вы должны иметь четкое разделение стиля и структуры на своих веб-страницах. Это означает, что не следует использовать несемантические элементы, детали которых выглядят, а не структурируются. Вот почему теги, выделенные жирным шрифтом и курсивом , обычно заменяются сильными (для жирного шрифта) и выделением (для курсива).

<strong> и <em>

Элементы «сильный» и «акцент» добавляют информацию к вашему тексту, детализируя контент, который следует обрабатывать по-разному и подчеркивать при произнесении этого контента. Вы используете эти элементы почти так же, как вы использовали бы жирный шрифт и курсив в прошлом. Просто окружите свой текст открывающими и закрывающими тегами (<em> и </ em> для выделения и <strong> и </ strong> для сильного выделения), и вложенный текст будет выделен.

Вы можете вложить эти теги, и не важно, какой это внешний тег. Вот несколько примеров.

<em> Этот текст выделен </ em>, и большинство браузеров отображают его курсивом.
<strong> Этот текст подчеркнут </ strong>, и большинство браузеров отображают его жирным шрифтом

В обоих этих примерах мы не диктуем визуальный взгляд с помощью HTML . Да, по умолчанию внешний вид тега <em> будет выделен курсивом, а <strong> будет выделен жирным шрифтом, но эти стили легко можно изменить в CSS. Это лучшее из обоих миров. Вы можете использовать стили браузера по умолчанию, чтобы получить курсив или выделенный жирным шрифтом текст в вашем документе, фактически не пересекая линию и не смешивая структуру и стиль. Скажем, вы хотели, чтобы текст <strong> был не только жирным, но и красным, вы можете добавить его в SCS

сильный { 
цвет: красный;
}

В этом примере вам не нужно добавлять свойство для жирного шрифта, так как это значение по умолчанию. Однако, если вы не хотите оставить это на волю случая, вы всегда можете добавить это в:

сильный { 
font-weight: bold;
красный цвет;
}

Теперь вам будет гарантированно иметь страницу с жирным (и красным) текстом везде, где используется тег <strong>.

Удвойте акцент

За год мы заметили одну вещь: что произойдет, если вы попытаетесь удвоить акцент? Например:

Этот текст должен содержать текст <strong> <em>, выделенный жирным шрифтом и курсивом </ em> </ strong>.

Вы могли бы подумать, что эта строка создаст область, текст которой выделен жирным шрифтом И курсивом. Иногда это действительно происходит, но мы видели, что некоторые браузеры используют только второй из двух стилей выделения, наиболее близкий к рассматриваемому тексту, и отображают его только курсивом. Это одна из причин, почему мы не удваиваем теги выделения. 

Еще одна причина, чтобы избежать этого «удвоения», это в стилистических целях. Одной формы акцента обычно достаточно, чтобы передать тон, который вы хотите установить. Вам не нужно выделять жирным шрифтом, курсивом, цветом, увеличивать и подчеркивать текст, чтобы он выделялся. Этот текст, будет все эти различные виды акцентов, станет броским. Поэтому будьте осторожны при использовании тегов выделения или стилей CSS для обеспечения выделения и не переусердствуйте.

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика