Внешний вид текста в html-документе
|
Форматирование теста | Yocton
Вообще большинство HTML-тегов используются для создания элементов, но в HTML также имеются теги форматирования текста, позволяющие применять определенные стили к частям текста. В этом разделе приведены примеры форматирования текста в формате HTML, такие, как пометка, выделение жирным шрифтом, подчеркивание, индекс и перечеркнутый текст.
Элемент <mark>
является новым в HTML5 и используется для пометки или выделения текста в документе Наиболее распространенным примером его использования является выделение результата поиска.
<p>Ниже приведен некоторый контент, содержащей запрос <mark>поиск</mark>. Выделение текста облегчит пользователю нахождение искомого. </p>
Отобразит:
Ниже приведен некоторый контент, содержащей запрос поиск. Выделение текста облегчит пользователю нахождение искомого.
Обычное стандартное форматирование для данного элемента — черный текст на желтом фоне, но это можно изменить с помощью CSS.
Для полужирного текста используйте теги <strong>
или <b>
:
<strong>Это жирный текст</strong>
или
<b>Это жирный текст</b>
Разница между ними только в семантике. Тег <strong>
используется для обозначения важного текста, тег <b>
не указывает на такое значение, а просто представляет текст, который должен быть выделен полужирным шрифтом.
Если использовать тег <b>
, то голосовые браузеры не будут выделять отмеченные слова и они будут звучать так же как любое из других слов вокруг него. Используя тег <strong>
голосовые браузеры будет выделять такие слова, чтобы передать, что текст в какой-то мере важен.
Для использования курсива применяйте теги
или <i>
:
<em>Это курсивный текст</em>
или
<i>Это курсивный текст</i>
Разница между ними только в семантике. Тег <em>
используется , чтобы указать, что текст должен иметь дополнительный акцент, который следует подчеркнуть, тег <i>
не указывает на такое значение, а просто представляет текст, который должен быть выделен курсивом.
Например, если вы хотите подчеркнуть действие внутри предложения, можно сделать это, выделив его курсивом через
: «Вы уже отправили отчет?»
Но если вам нужно идентифицировать книгу или газету, которую обычно выделяют стилистически, вы можете использовать просто <i>
: «Я прочитал Ромео и Джульетту в старшей школе.»
Хотя сам элемент <u>
устарел еще в HTML4, он был повторно введен с альтернативным смысловым значением в HTML5 — для представления неартикулированной, нетекстовой аннотации. Вы можете использовать такое выделение для обозначения текста с ошибками или для выделения имени пользователя в Китае.
Рекомендуется избегать использования элемента <u>
там, где его можно спутать с гиперссылками.
<p>Этот параграф содержит некоторый <u> ошЫбочный </u> текст.</p>
Этот параграф содержит некоторый ошЫбочный текст.
Чтобы отметить какое-то выражение как аббревиатуру, используйте тег <abbr>
:
<p>Мне нравится писать на <abbr title = "Язык гипертекстовой разметки">HTML</abbr>!</p>
Мне нравится писать на HTML !
Если присутствует, атрибут title
, то он позволяет увидеть полное описание такой аббревиатуры.
Чтобы пометить текст как вставленный, используйте тег <ins>
:
<ins> Новый текст </ins>
Новый текст
Чтобы пометить текст как удаленный, используйте тег <del>
:
<del> Удаленный текст </del>
Удаленный текст
Элемент del
представляет собой удаление из документа. Такие элементы не должны пересекать подразумеваемые границы абзаца.
Чтобы пометить текст как перечеркнутый, используйте тег <s>
:
<s> Перечеркнутый текст </s>
Перечеркнутый текст
Элемент s
представляет собой содержимое, которое больше не является точным или не актуально.
Чтобы сместить текст вверх или вниз используются теги <sup>
и <sub>
.
Чтобы создать верхний индекс:
x<sup>2</sup>+x-4=0
x2+x-4=0
Чтобы создать нижний индекс:
HCl+NaOH=H<sub>2</sub>O+NaCl
HCl+NaOH=H2O+NaCl
css — Как сделать текст жирным в HTML?
Кто-нибудь может сказать мне, что я делаю не так?»
«полужирный» никогда не был элементом HTML («b» является ближайшим соответствием).
HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезным стилем и элементами управления навигацией пользователям, которые не могут видеть предложенный вами жирный стиль (например, пользователям поисковых систем, полностью слепым пользователям, использующим программы чтения с экрана, слабовидящим пользователям, использующим свои собственные цвета и шрифты, компьютерные пользователи, использующие текстовые браузеры, пользователи голосовых браузеров, таких как Opera для Windows). Таким образом, правильный способ сделать текст жирным зависит от
Хотите отличить заголовки от остального текста? Используйте элементы заголовков (от «h2» до «h6») и предложите жирный шрифт для них в вашем CSS («h2, h3, h4, h5, h5, h6 {начертание шрифта: полужирный;}».
Хотите выделить метки для полей формы? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («метка {font-weight: жирный шрифт;»}).
Хотите выделить заголовок для группы связанных полей в форме, например для группы выбора радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).
Хотите отличить заголовок таблицы от названия таблицы? Используйте элемент «caption» и предложите жирный стиль для него в вашем CSS («caption {font-weight: bold;}»).
Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите жирный стиль для него в вашем CSS («th {font-weight: bold;}»).
Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент «цитировать» с классом («цитировать») и предложите жирный стиль для него в вашем CSS («».movie-title {font-weight: bold;}»).
Хотите отличить определенное ключевое слово от окружающего текста, определяющего или поясняющего его? Используйте элемент «dfn» и предложите жирный стиль для него в вашем CSS («dfn {font-weight: bold;}»).
Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите жирный стиль для него в вашем CSS («код {font-weight: полужирный;}»).
Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите жирный стиль для него в вашем CSS («var {font-weight: bold;}»).
Хотите указать, что некоторый текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите жирный стиль для него в вашем CSS («ins {font-weight: bold;}»).
Хотите слегка подчеркнуть текст («Я люблю котят!»)? Используйте элемент «em» и предложите жирный стиль для него в вашем CSS (например, «em {font-weight: bold;}»).
Хотите сильно подчеркнуть какой-то текст, возможно, для предупреждения (« Осторожно, собака! «)? Используйте «сильный» элемент и предложите жирный стиль для него в вашем CSS (например, «сильный {font-weight: полужирный;}»).
… Вы поняли (надеюсь).
Не удается найти элемент HTML с правильной семантикой, чтобы выразить /почему/ вы хотите сделать этот конкретный текст полужирным? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование выделения этого текста («Позвольте мне начать эту новостную статью с предложения, резюмирующего ее.) и предложите полужирный стиль для него в вашем CSS («».lede {font-weight: bold;»}. Прежде чем придумывать свои собственные имена классов, вы можете проверить, существует ли микроформат (microformats.org) или общее соглашение для того, что вы хочу выразить
Типы текста для специальных возможностей, полужирный, сильный, курсив, выделение
Перейти к основному содержанию Центр помощиИзменено: пн, 17 октября 2022 г., 15:16
Создание акцента в тексте важно для передачи сообщения. Это помогает показать читателю, что он должен принять к сведению определенные слова и фразы.
Использование выделения помогает сканировать содержимое для зрячего человека, например:
«Я хочу получать уведомления до электронная почта , а не другие формы связи».
«Его любимая книга «Гроздья гнева» ».
Но выделение текста не должно ограничиваться зрячими. средства чтения с экрана. Существует несколько способов выделения текста, некоторые из которых лучше, чем другие. В этой статье обсуждаются распространенные подходы.
путают с заголовком, а выделенный курсивом абзац, как известно, особенно трудно читать9.0004
- Приемлемый метод
- Приемлемый в некоторых случаях
- Методы, которых следует избегать
- Заключение
Приемлемый метод
Использование выбора слов для передачи ударения является наиболее подходящим методом. В большинстве случаев теги и код разметки, используемые для выделения текста, игнорируются программой чтения с экрана с настройками по умолчанию.
Выбор слов для выделения — единственный способ гарантировать четкое изложение важного содержания. Это может означать повторение и перефразирование важной информации. В некоторых случаях вы можете даже написать слово «важно» вместе с текстом, чтобы подчеркнуть мысль.
Примеры:
- Эта техника привела к увеличению продаж на 30%, да, на 30%.
- Важно! Не подливать масла в огонь
Приемлемо в некоторых случаях
Теги Strong и Emphasis
Теги Strong, , и теги Emphasis, считаются семантической разметкой, которая позволяет придать дополнительное значение вашему содержание. В некоторых случаях они могут служить указанием на акцент для программы чтения с экрана.
Семантическая разметка лучше, чем разметка, используемая исключительно для стилизации, но, к сожалению, многие программы чтения с экрана игнорируют эти теги по умолчанию. Некоторые программы чтения с экрана (например, JAWS и NVDA) могут быть настроены на объявление выделения, но для этого требуются некоторые технические знания.
Руководство по обеспечению доступности веб-контента (WCAG) обсуждает эти методы в этой статье — Использование семантической разметки для выделения выделенного или специального текста.
Методы, которых следует избегать (т. е. не использовать эти методы)
Жирный шрифт
и курсивИх не следует использовать. Теги , выделенные полужирным шрифтом, и теги , выделенные курсивом, перечислены как ошибки уровня A соответствия требованиям WCAG.
Средства чтения с экрана обычно не сообщают пользователю об этих тегах. Однако некоторые (например, JAWS) можно настроить так, чтобы они выделялись полужирным шрифтом и курсивом.
Мы не рекомендуем использовать жирный шрифт и курсив , если вы хотите выделить слово или отрывок.
Стиль HTML
Атрибуты стиля HTML используются для добавления стиля к элементу, например цвет, шрифт, размер и т. д.
Например, чтобы сделать текст жирным, его можно объявить в HTML, используя:
style="font-weight:bold"
Если ваш текст должен быть выделен жирным шрифтом, но не должен сообщаться как акцент, то для этого можно использовать атрибут стиля или CSS (каскадные таблицы стилей). Однако эта информация не будет передана кому-либо, использующему программу чтения с экрана.
Теги заголовков
Теги заголовков важны для доступности, позволяя пользователям программ чтения с экрана быстро просматривать страницу. С помощью сочетаний клавиш программа чтения с экрана может читать заголовки на странице и переходить к интересующей главе. Заголовки экономят время всех пользователей сайта.
Однако заголовки не должны использоваться для выделения текста. Они используются как способ указать, где вы находитесь в документе
Заключение
Мы рекомендуем вам использовать сам письменный текст, чтобы подчеркнуть важное содержание.
Если вы решите использовать визуальное выделение, мы рекомендуем использовать семантические теги Strong и Emphasis , а также избегать использования Bold и Italic
Даже если вы используете Strong и Emphasis , нет гарантии, что они будут переданы средством чтения с экрана.