Какой правильный HTML-тег подчеркивает предложение или раздел? - PullRequest
0 голосов
/ 30 апреля 2018

Я понял, что я использовал blockquote во всем своем HTML, чтобы подчеркнуть абзацы, которые должны быть изучены моими учениками - что, очевидно, неправильно, поскольку blockquote предназначен для указания раздела, цитируемого из другого источника.

В моем случае (математика) абзац (-ы) определяют или описывают слово и должны выделяться визуально.

После некоторых исследований я обнаружил тег em , который «помечает текст, который выделен ударением», однако, похоже, он предназначен для отдельных слов или группы слов, но не для абзацев .

Таким образом, вопрос: что такое правильный HTML-тег , чтобы подчеркнуть законченное предложение или раздел (несколько абзацев)?

Ответы [ 4 ]

0 голосов
/ 01 мая 2018

dfn элемент

Если содержание важно , потому что это определение (и все определения важны для вашего документа), вы можете использовать элемент dfn и соответственно стилизовать родительский элемент.

<p class="definition">definition of the <dfn>term</dfn></p>

Ближайший предок p (или li, или section, или группа описания термина в dl) должен определить термин.

Таким образом, если у вас есть несколько абзацев (как в следующем примере), абзацы без потомка dfn семантически не связаны с термином / определением.

<div class="definition">
  <p>paragraph about the term</p> <!-- semantically not part of the definition -->
  <p>definition of the <dfn>term</dfn></p>
  <p>another paragraph about the term</p> <!-- semantically not part of the definition -->
</div>

Если определение состоит из нескольких абзацев, вы можете использовать section или dl, чтобы указать, что все эти абзацы содержат определение, но оба варианта не всегда подходят.

strong элемент

Если содержание важно по другим причинам (например, важно не каждое определение или важны и другие вещи, помимо определений), вы можете использовать элемент strong . Это передает

большое значение, серьезность или срочность его содержания.

Вы даже можете передать относительный уровень важности, используя больше элементов strong:

<p>sentence with an <strong>important part</strong></p>

<p>sentence with a <strong><strong>very important part</strong></strong></p>

<p><strong>important sentence with an <strong>especially important part</strong></strong></p>

Поскольку элемент strong может содержать только формулировку контента , вы не можете пометить несколько абзацев одним элементом strong.


Если контент важен по другим причинам, но содержит определение, конечно, dfn и strong должны быть объединены. И даже если каждое определение имеет важное значение, вы все равно можете использовать strong в дополнение либо для передачи важности определений в этом документе, либо для передачи их относительной важности.

0 голосов
/ 30 апреля 2018

Семантически, если вы что-то определяете - и если соответствует структуре вашего документа - вы должны взглянуть на <dl>: списки определений.

У MDN есть страница, которая объясняет, что вам нужно знать: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

В пределах <dl> у вас есть <dt> (термин определения) и <dd> (описание определения). <dd> является уровнем блока, поэтому может содержать элементы уровня блока, такие как абзацы и списки, но <dt> является встроенным и должен содержать только другие встроенные элементы. Если вы действительно придерживаетесь правил:)

Пример:

<dl>
  <dt>Stack Overflow</dt>
  <dd>
    A place that holds many answers, some of which are <em>mostly</em> correct.
  </dd>
</dl>

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

Существует некоторая дискуссия о доступности списков определений для пользователей программ чтения с экрана: разные браузеры и программы чтения дают разные результаты (см. https://webaim.org/discussion/mail_thread?thread=7089). Это не оптимально, но кажется, что использование списков определений не хуже, чем использование неупорядоченных списков (<ul>), не идеальное решение (потому что на самом деле его нет), но не худший вариант.

0 голосов
/ 30 апреля 2018

Я буду использовать сильный тег.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Элемент предназначен для контента, который имеет «большое значение», в том числе очень серьезного или неотложного (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с близлежащим контентом.

0 голосов
/ 30 апреля 2018

Существует группа элементов DOM, предназначенных для добавления акцента в контент HTML:

  • сильный
  • б
  • ет
  • я
  • 1012 * дель *
  • удар

Однако, хотя это и семантически, это будет указывать на акцент, но программа чтения с экрана (JAWS, Window Eyes и т. Д.) Не будет указывать на это.

...