Вытяните заголовок с семантической сеткой 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>

html css

11.11.2022 10:01

Начала с розового дизайна

Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...

учебник по Javascript

JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

5 распространенных ошибок, которых следует избегать при начале работы с HTML

Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...

Неделя 1 - Карточки с временной шкалой

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

8 репозиториев GitHub, о которых должен знать каждый веб-разработчик

Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

11.11.2022 10:05

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

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

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

11.11.2022 14:43

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

Вы можете использовать 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>

11.11.2022 15:54