Элемент HGROUP удален из спецификации HTML5. Какой альтернативный метод можно использовать вместо этого?

Как некоторые из вас услышали бы, что элемент hgroup удаляется из Спецификация HTML5. (Для получения дополнительной информации см. решение рабочей группы W3C HTML по запросу для удаления hgroup из HTML5 в архивах публичных списков W3C.)

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

Мои текущие мысли состоят в том, чтобы просто добавить еще один тег hX под основным заголовком, но я не уверен, что это будет достаточно семантическим для этого.

 <h1>Darren Reay</h1>
 <h2>A developing web developer</h2>
 <p>Hello World</p>

Может ли кто-нибудь придумать альтернативу для использования подзаголовков или по крайней мере указать мне в правильном направлении?

Ответ 1

Несколько моментов, которые следует учитывать:

  • Даже если тег удален из спецификации HTML5, это не значит, что он перестанет работать всю ночь. Браузеры поддерживают обратную совместимость в течение длительного времени (AFAIK, если не все браузеры по-прежнему отображают <font> правильно!)

  • Даже если браузеры откажутся от поддержки в одночасье, они все равно будут отображать страницу правильно, потому что я не думаю, что тег hgroup добавляет какой-либо собственный стиль и (современные) браузеры очень снисходительны к тому, t признать.

  • Я мог бы неправильно прочитать вопрос, но между строками это звучит так, как будто вы злоупотребляли тегом hgroup. (Не допускается содержать ничего, кроме элементов заголовка.)

Я не вижу никаких проблем при полном удалении тегов или замене их на div.

Ответ 3

Я бы пошел с альтернативой, предложенной W3C в предложение о замене hgroup, предложенном Ларсом Гюнтером и использующим заголовок и абзац.

Ваш пример будет выглядеть следующим образом

<header>
    <h1>Darren Reay</h1>
    <p>A developing web developer</p>
</header>

Я чувствую, что это читается правильно и семантически.

Ответ 4

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

<header>
  <h1>
    <a href="#" onclick="location.href='http://www.jdclark.org/'; return false;">Jordan Clark</a>
    <small>Personal and Professional Website</small>
  </h1>
</header>

(Тогда, конечно, я просто использую CSS для повторного стиля элемента <small>. Я также лично считаю, что моя техника более семантически точна, чем просто использование абзаца - и хотя я не эксперт по SEO, я я уверен, что сохранение текста подзаголовка в h1 даст ему более высокое значение, чем базовый абзац.)