header-Seitenkopf und h1 - ?

[Matthias Scharwies]

Servus!

Ich möchte gerne den perfekten Seitenkopf gestalten:

  <header>
    <a id="backlink" href="/">
      <img src="logo.svg" alt="logo">
    </a>
    <h1>Schreinerei Meier</h1>
    <p>Ihre Werkstatt für gutes Wohnen!</p>
  </header>

<h2>individuelle Überschrift</h2>

Soll die h1 in den header und dann die h2 als Seitenüberschrift?

oder

header h2 und dann h1 als Seitenüberschrift?

Die MDN gibt unter examples das Bsp. mit h1 im header. Auch die W3C sagt so.

Und nav in den header oder drunter?

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Ich möchte gerne den perfekten Seitenkopf gestalten:

  <header>
    <a id="backlink" href="/">
      <img src="logo.svg" alt="logo">
    </a>
    <h1>Schreinerei Meier</h1>
    <p>ihre Werkstatt für gutes Wohnen!</p>
  </header>

<h2>individuelle Überschrift</h2>

Ohne auf deine Frage einzugehen, stelle ich mir die Frage, warum die h1 auseinandergerissen werden soll.

<h1>Schreinerei Meier – Ihr Garant für gutes Wohnen</h1>

<img alt="Firmenlogo der Schreinerei Meier">

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ohne auf deine Frage einzugehen, stelle ich mir die Frage, warum die h1 auseinandergerissen werden soll.

Das ist keine technische Frage, sondern eine inhaltliche.

Ist „Schreinerei Meier – Ihr Garant für gutes Wohnen“ die Überschrift?

Oder ist „Schreinerei Meier“ die Überschrift und „Ihr Garant für gutes Wohnen“ gehört als Slogan nicht dazu?

Oder ist „Schreinerei Meier“ die Überschrift und „Ihr Garant für gutes Wohnen“ gehört als Unterüberschrift dazu? Dann:

<header>
  <h1>Schreinerei Meier</h1>
  <p role="doc-subtitle">Ihr Garant für gutes Wohnen</p>
</header>

Lief letztens erst übern Ticker.

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Das ist keine technische Frage, sondern eine inhaltliche.

Ist „Schreinerei Meier – Ihr Garant für gutes Wohnen“ die Überschrift?

This, imho.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

darüber habe ich mir beim Tutorial noch keine Gedanken gemacht, aber man sollte wohl…

Der relevante Abschnitt bei W3C ist vermutlich:

A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

D.h. wenn du in den header der Seite eine Überschrift einbaust, dann muss es die h1 sein. Schau ins Wiki,HTML/outline, da steht, dass die Überschriften die Gliederung der Seite bilden. Ein h2 als erste Überschrift der Seite ist logisch falsch, ein h2 muss immer einem h1 untergeordnet sein.

Wenn es Dir nur um die Darstellung des Textes im Header geht, ist ein Markup als Heading ohnehin falsch. Dann <p> mit entsprechenden Styles.

Nach meiner Auffassung sollten h1 Element und head/title in etwa das gleiche aussagen, weil diese Info auch im Browser-Tab und von Suchmaschinen dargestellt wird. Wenn du im Header also eher einen Slogan stehen haben möchtest, der auf jeder Seite gleich ist, dann das kein Heading. Muss es ja auch nicht. Ich habe das so verstanden, dass jede Seite eines Webauftritts (im Allgemeinen) genau ein h1 hat und damit ein Hauptkapitel im Gesamtdokument des Webauftritts bildet. Gleiche h1 auf zwei Seiten sind deshalb in meinen Augen nicht sinnvoll.

Was man in die h2 Überschrift der Einstiegsseite schreibt, ist eine andere Frage. Vermutlich gehört da so etwas wie <h2>Herzlich Willkommen</h2> hin. Dann ein Intro, dann <h2>Unsere Leistungen</h2>.

Soll das Logo der einzige Backlink zur Startseite sein oder soll das ein Zusatzangebot zum Textmenü sein? Je nachdem wäre eine andere Unterstützung assistiver Techniken erforderlich. Allerdings bin ich da sehr unerfahren. Nach dem, was Gunnar in den letzten Jahren so schrieb, müsste ein Link im Logo einen visuell versteckten Linktext mitbringen, den ein Screenreader vorliest. Liest ein Screenreader das alt-Attribut eines Bildes vor? Wenn ja, könnte man dort statt "Logo" auch "Logo, Link zur Startseite" unterbringen. Es ist dann möglicherweise immer noch nicht optimal (weil ein Screenreader das a Element als "Link" ankündigen dürfte und dann den Inhalt vorträgt. Ergebnis könnte sein: "Link, Bild mit Logo, Link zur Startseite"

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

darüber habe ich mir beim Tutorial noch keine Gedanken gemacht, aber man sollte wohl…

Der relevante Abschnitt bei W3C ist vermutlich:

A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

D.h. wenn du in den header der Seite eine Überschrift einbaust, dann muss es die h1 sein. Schau ins Wiki,HTML/outline, da steht, dass die Überschriften die Gliederung der Seite bilden. Ein h2 als erste Überschrift der Seite ist logisch falsch, ein h2 muss immer einem h1 untergeordnet sein.

Ich hatte es irgendwie im Sinn, dass jemend (evtl @Gunnar Bittersmann ) das h1 im header kritisiert hätte. Bis jetzt hatten wir's aber auch immer so gemacht.

Wenn es Dir nur um die Darstellung des Textes im Header geht, ist ein Markup als Heading ohnehin falsch. Dann <p> mit entsprechenden Styles.

Nein, ich will einen Header mit Überschrift und backlink. Das p class="slogan?" sollte so ähnlich wie ein span sein - das hätte ich dann nicht einführen müssen.

Nach meiner Auffassung sollten h1 Element und head/title in etwa das gleiche aussagen, weil diese Info auch im Browser-Tab und von Suchmaschinen dargestellt wird. Wenn du im Header also eher einen Slogan stehen haben möchtest, der auf jeder Seite gleich ist, dann das kein Heading.

Überschrift + Slogan - finde ich schon, dass das Teil eines headers ist.

Soll das Logo der einzige Backlink zur Startseite sein oder soll das ein Zusatzangebot zum Textmenü sein?

Zusatz zur Nav (und eine Möglichkeit das id-Attribut einzuführen!)

Je nachdem wäre eine andere Unterstützung assistiver Techniken erforderlich. Allerdings bin ich da sehr unerfahren. Nach dem, was Gunnar in den letzten Jahren so schrieb, müsste ein Link im Logo einen visuell versteckten Linktext mitbringen, den ein Screenreader vorliest.

Ja

Liest ein Screenreader das alt-Attribut eines Bildes vor?

Ja

Wenn ja, könnte man dort statt "Logo" auch "Logo, Link zur Startseite" unterbringen. Es ist dann möglicherweise immer noch nicht optimal (weil ein Screenreader das a Element als "Link" ankündigen dürfte und dann den Inhalt vorträgt. Ergebnis könnte sein: "Link, Bild mit Logo, Link zur Startseite"

Ja, ich hatte an einen (unsichtbaren) Linktext und dann an einen SVG-Hobel als background-image gedacht.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Soll die h1 in den header und dann die h2 als Seitenüberschrift?

Nö.

header h2 und dann h1 als Seitenüberschrift?

Hm, eher nicht. AFAIK soll der Titel der Website gar keine Überschrift sein. Außer auf der Homepage, wenn es dort keine andere Hauptüberschrift außerhalb des Headers gibt.

Das heißt: verschiedene Header für Homepage:

<header>
  <img src="logo.svg" alt="Logo">
  <h1>Schreinerei Meier</h1>
  <p>Ihre Werkstatt für gutes Wohnen!</p>
</header>

und andere Seiten:

<header>
  <a href="/">
    <img src="logo.svg" alt="Startseite">
  </a>
  <p>Schreinerei Meier</p>
  <p>Ihre Werkstatt für gutes Wohnen!</p>
</header>

Beachte auch den je nach Funktion unterschiedlichen Alternativtext.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Hm, eher nicht. AFAIK soll der Titel der Website gar keine Überschrift sein.
(...)
andere Seiten:

<header>
  <h1>Schreinerei Meier</h1>
</header>

Hm? Wie nun? Mathematikersyndrom (sagt A, meint B, schreibt C...)?

Dass der Titel keine Überschrift sein sollte - vor allem nicht, wenn er auf allen seiten gleich ist - das würde ich so gerne annehmen wollen. Siehe meine Gedanken zum "Gesamtdokument Webseite".

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hm? Wie nun? Mathematikersyndrom (sagt A, meint B, schreibt C...)?

Genau. Berichtigt.

😷 LLAP