Какой элемент для текста заголовка компонента - PullRequest
Новая
       12

Какой элемент для текста заголовка компонента

0 голосов
/ 28 января 2020

У меня есть компонент, которому нужен текст заголовка, такой как 

<div class="custom-component">
  <h?>MY COMPONENT HEADER</h?>
  <p>My component content</p>
</div>

Какой элемент мне следует использовать здесь (вместо <h?>)?

Если я использую <h3> или <h4> или что-то еще, я рискую нарушить дерево заголовков, потому что этот компонент может использоваться где угодно на странице и может быть ниже <h1>, <h2>, <h3> или что-то еще. (Примечание: HTML spe c требует, чтобы <h3> не следовал <h1>, если между ними нет <h2>)

Есть ли какие-либо общие c способ определения элемента заголовка, который соответствующим образом определяет его содержимое в качестве заголовка без необходимости заранее знать, где на странице он будет отображаться по отношению к другим <h#> элементам?

Чтобы уточнить, я не нужно никаких CSS советов. Мне нужен тег заголовка semanti c HTML, который указывает себя как заголовок (для моего компонента), который не требует какого-либо предвидения других <h#> в документе - то есть он должен быть гибким для использования в различных местах или на страницах.

Ответы [ 2 ]

1 голос
/ 28 января 2020

Я нашел ответ на свой вопрос!

Ответ таков: в настоящее время нет решения с использованием простого HTML. : (

Интересно, что Тим Бернерс-Ли (основатель всемирной паутины) на самом деле предложил обобщенный тег c <h> еще в 1991 ! Но он никогда не был принят официально или используется в каких-либо еще крупных браузерах.

Если вы используете React или Vue, , вот достойное решение, которое, вероятно, будет работать в большинстве случаев .

0 голосов
/ 28 января 2020

Я считаю, что вы находитесь в ситуации, когда вы можете извлечь выгоду из использования соглашений БЭМ.

В БЭМ у вас есть блок, элементы и модификаторы.

Для этого конкретного случая c Я бы сделал это. 

<div class="custom-component">
  <div class="custom-component__header">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

Просто определите стили, необходимые для того, чтобы компонент выглядел так, как вы хотите.

Но как насчет того, чтобы указать c случай, когда текст должен немного отличаться в шапке? Допустим, сделать его больше? 

<div class="custom-component">
  <div class="custom-component__header custom-component__header--big">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

Вам просто нужно написать все css подходящим образом. Я могу порекомендовать вам прочитать эту документацию:

http://getbem.com/

...