Семанти c HTML: Какой заголовок, какой подзаголовок? - PullRequest
Новая
       30

Семанти c HTML: Какой заголовок, какой подзаголовок?

0 голосов
/ 07 февраля 2020

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

body {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
h2 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.tagline {
  margin: 0 0 20px 0;
  font-size: 24px;
}
<h2>Section Title</h2>
<p class="tagline">A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>

Мой первоначальный инстинкт - сделать первую часть элементом заголовка с помощью <h2> и превратить второй раздел в абзац (как вы можете видеть в моем примере ). Но будет ли это правильно? Большой текст определенно то, что люди, скорее всего, прочтут первым, но меньший текст - лучшее название для раздела.

Мой вопрос в том, хорош ли я с этим или я должен поменять его местами и сделать небольшой текст абзац и большой текст тег заголовка?

Кроме того, мне интересно, должен ли я также обернуть эти два "заголовка" в тег <header>?

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

Основное правило при работе с HTML семантика никогда не работает над частью представления с HTML. Вот почему у нас есть CSS.

В настоящее время все веб-сайты меняют там HTML семантику, чтобы соответствовать стандартам WCAG . Говоря простыми словами, это некоторые стандарты, которые, когда они следуют разработчикам, помогают людям с проблемами доступности легко заходить в Интернет.

Для получения более подробной информации: https://www.w3.org/WAI/standards-guidelines/wcag/

Поэтому я предлагаю правильно сохранить заголовок и подзаголовок с правильной семантикой . Подумайте о презентации с точки зрения CSS.

Я не уверен, что это ответ, который вы ищете, но я надеюсь, что это поможет принять решение ..

0 голосов
/ 16 февраля 2020

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

Программы чтения с экрана не представляют CSS пользователям, поэтому спросите себя: «Имеет ли смысл« структура »контента, когда css уменьшается?» Если вы используете правильную семантику, то структура будет сохранена, но со стилями насмешек (такими как стиль заголовка, примененный к тегу ap) потеряет свое значение при удалении CSS. Это означает, что программы чтения с экрана будут просто представлять строку тега в виде текста абзаца, а не представлять его как подзаголовок. Люди перемещаются или просматривают заголовки с помощью программ чтения с экрана, поэтому тег p p не будет отображаться в заголовках.

Имеет ли это смысл? Рада прояснить что-нибудь непонятное.

...