Semantyczny znacznik dla nagłówka strony, nawet z outlinerem - html5, semantyką, znacznikiem, outlinerem

Zwykle podczas kodowania dokumentów HTML5 używam następującej składni:

<header class="site-header">
<hgroup class="site-brand">
<h1 class="brand-name">
Brand Name
</h1>
<h2 class="brans-slogan">
Awesome Slogan
</h2>
</hgroup>
</header>
<article>
<header class="article-header">
<h1 class="article-title">Article Header</h1>
</header>
[... content ...]
</article>

Wydawało się, że tak header odpowiedni tag dla nagłówka witryny, ale po przeczytaniu spec i opisując ten kod, Widziałem dwie wady

• header tag uczyni jego treść pierwszym poziomem, a tytuł artykułu drugim
• Nagłówki stron mogą w ogóle nie zawierać nagłówków, ponieważ ich celem jest poinformowanie użytkownika, do której strony należy.

Jakie byłoby najlepsze podejście?

Odpowiedzi:

1 dla odpowiedzi № 1

Twoim pierwszym problemem jest to, że masz dwa tagi h1. To NIE jest właściwy narzut semantyczny. Masz rację co do tagu nagłówka i najlepiej byłoby umieścić tagi wysokiego poziomu w tym obszarze.

Biorąc to pod uwagę, twoje pierwotne pytanie brzmi:problem projektowania i architektury treści. Jeśli zamierzasz użyć h1 w treści artykułu, powinieneś wybrać inny tag do użycia w nagłówku twojej strony.

Specyfikacja mówi: „Element nagłówka zazwyczaj zawiera nagłówki sekcji (element h1-h6 lub element hgroup) wraz z treściami, takimi jak materiał wprowadzający lub pomoce nawigacyjne dla sekcji. ”

Jednak nie musi. Znacznik h1 (i tytuł) są głównymi znaczeniami semantycznymi strony. NIE chcesz 2 tagów h1 lub tagów nagłówka, ale te dwa tagi nie muszą się ze sobą łączyć ... ale fajnie jest, jeśli możesz tak to skonstruować.

---

0 dla odpowiedzi nr 2

Twoje wykorzystanie header w tym przykładzie jest w porządku.

Jednak nie jest to tak naprawdę potrzebne. Jeśli tylko to uwzględnisz h1-h6 i hgroup, ty nie potrzeba aby określić, że jest to nagłówek, ponieważ z definicji jest już jasny. header jest przydatny, jeśli chcesz dołączyć dodatkową treść, dla której niekoniecznie jest jasne, że powinna ona należeć do nagłówka w porównaniu z treścią główną.

Ale korzystanie z niego nie szkodzi header tylko dla nagłówków, więc kontynuuj, jeśli Ci się podoba, potrzebujesz go do haków CSS / JS, może zawierać dodatkową treść nagłówka w przyszłości itp.

header tag uczyni jego treść pierwszym poziomem, a tytuł artykułu drugim

Nie rozumiem, co masz na myśli header element nie wpływa na kontur dokumentu. Jest to sposób na rozróżnienie między treścią wprowadzającą a treścią główną.

Nagłówki stron mogą w ogóle nie zawierać nagłówków, ponieważ ich celem jest poinformowanie użytkownika, do której strony należy.

The header element nie mieć zawierać nagłówek. Na przykład. ten przykład byłby w porządku:

<article>
<header>I visited Berlin last week and in this post I document what I liked about it.</header>
<p>…</p>
</article>

The footer element jest podobny i dla niektórych treści oba elementy mogą być odpowiednie.

Jeśli chcesz przypisać autora artykułu, przejdzie do footer.

---