Вытяните заголовок с семантической сеткой HTML и CSS

Мою дилемму можно резюмировать следующим образом:

  • Я хочу сохранить семантическую структуру первого примера
  • Я хочу выложить его по второму примеру

Семантически правильным HTML было бы вложение <header> в элемент <article>, поскольку заголовок принадлежит статье.

Однако, чтобы сетка CSS работала, <header> должен быть дочерним элементом контейнера сетки.

Есть ли решение этого конфликта?

Семантически правильно, не работает

.layout {
    display: grid; 
    grid-template-columns: 4fr 8fr; 
    grid-template-rows: auto 1fr; 
    gap: var(--grid-gap);
    grid-template-areas: 
      "top top"
      "menu content"; 
}

.layout nav {
  border: 1px solid aqua;
  grid-area: menu;
}

.layout main {
  border: 1px solid green;
  grid-area: content;
}

.layout header {
  border: 1px solid red;
  grid-area: top;
}
<div class="layout">
<nav>
<p>nav</p>
</nav>
<main>
  <article>
    <header>
      <h1>Title</h1>
      <p>Subtitle</p>
    </header>
    <p>Lorum ipsum content etc</p>
  </article>
</main>
</div>

Семантически неправильно, макет правильный

.layout {
    display: grid; 
    grid-template-columns: 4fr 8fr; 
    grid-template-rows: auto 1fr; 
    gap: var(--grid-gap);
    grid-template-areas: 
      "top top"
      "menu content"; 
}

.layout nav {
  border: 1px solid aqua;
  grid-area: menu;
}

.layout main {
  border: 1px solid green;
  grid-area: content;
}

.layout header {
  border: 1px solid red;
  grid-area: top;
}
<div class="layout">
<nav>
<p>nav</p>
</nav>
<header>
  <h1>Title</h1>
  <p>Subtitle</p>
</header>
<main>
  <article>
    <p>Lorum ipsum content etc</p>
  </article>
</main>
</div>
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
5 распространенных ошибок, которых следует избегать при начале работы с HTML
5 распространенных ошибок, которых следует избегать при начале работы с HTML
Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
0
0
76
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

.layout {
    display: grid; 
    grid-template-columns: 4fr 8fr; 
    grid-template-rows: auto 1fr; 
    gap: var(--grid-gap);
    grid-template-areas: 
      "top top"
      "menu content"; 
}

.layout nav {
  border: 1px solid aqua;
  grid-area: menu;
}

.layout div{
  border: 1px solid green;
  grid-area: content;
}

.layout header {
  border: 1px solid red;
  grid-area: top;
}
<article class="layout">
  <nav>
    <p>nav</p>
  </nav>
  <header>
    <h1>Title</h1>
    <p>Subtitle</p>
  </header>
  <div>
    <p>Lorum ipsum content etc</p>
  </div>
</article>

Стив, твой несемантический подход несемантичен только в том случае, если у <article> отсутствует заголовок... то есть <h2> в данном контексте.

Нет проблем с тем, чтобы каждый <header> на вашем сайте имел уникальный <h1> на каждой странице. См. документы MDN для элемента заголовка

Так что я бы использовал этот подход.

Ответ принят как подходящий

Вы можете использовать display: contents

.layout {
    display: grid; 
    grid-template-columns: 4fr 8fr; 
    grid-template-rows: auto 1fr; 
    gap: var(--grid-gap);
    grid-template-areas: 
      "top top"
      "menu content"; 
}

.layout nav {
  border: 1px solid aqua;
  grid-area: menu;
}

.layout main,
.layout article {
  display: contents;
}

.layout header {
  border: 1px solid red;
  grid-area: top;
}
.layout article > p {
  grid-area: content;
  border: 1px solid green;
  margin: 0;
}
<div class="layout">
<nav>
<p>nav</p>
</nav>
<main>
  <article>
    <header>
      <h1>Title</h1>
      <p>Subtitle</p>
    </header>
    <p>Lorum ipsum content etc</p>
  </article>
</main>
</div>

Другие вопросы по теме