Как правильно сверстать заголовок с задним фоном?

Question

Есть тег main и в нем есть заголовок(h1), но у заголовка сзади фон(только у заголовка). И я думаю по семантике лучше обернуть этот заголовок в header, но тогда если я правильно понимаю заголовок будет озаглалавлять только header, тогда получается единственный вариант обернуть его div(заголовок)?

Answer 1

В тег header обычно размещают логотип и навигацию. Ваш h1 это уже main. Вполне нормально, если для задания фона вы h1 обернёте в div или section.

Answer 2

Вы можете сделать хоть вот так.

body {margin: 0;}

h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: url('//i.imgur.com/raz226g.png') no-repeat center center / cover;
  text-align: center;
  color: #fff;
}

<h1>Заголовок<br>с задним<br>фоном</h1>

По сути, вам никто не запрещает так делать.

Answer 3

Обычно на практике верстальщики используют стили для h1-h6, p, span только визуальные (font-size, color, font-family ....) Поэтому да, лучше завернуть его в div, а этот div в header, так как он более тяготеет к верхней части страницы.

БЛОГ НА HUSL

Как правильно сверстать заголовок с задним фоном?

Ответы (3 шт):