Darstellung einer Überschrift

[Gisela]

Hi,

vor einer Auflistung (<ul>) in dem aside-Bereich möchte ich eine Überschrift, die etwas größer ist als die normale Textgröße.

Ich hatte an <h3> gedacht.

Nun habe ich aber gelesen, dass die Reihenfolge soll sein h1, h2, h3. Die ersteren gibt es aber nicht in meinem aside-Bereich.

Was ist die beste Lösung?

[Gunnar Bittersmann]

@@Gisela

Ich hatte an <h3> gedacht.

Nun habe ich aber gelesen, dass die Reihenfolge soll sein h1, h2, h3. Die ersteren gibt es aber nicht in meinem aside-Bereich.

Was ist die beste Lösung?

h1 ist für die Seitenüberschrift, sollte genau einmal auf einer Webseite auftreten.

Dein aside-Bereich gehört nicht zu einem Unterkapitel (dessen Überschrift h2 wäre)? Dann ist h2 für dessen Überschrift richtig.

Die Hierarchie-Ebene hat nichts mit der gewünschten Darstellung (Schriftgröße) zu tun. Andersrum schon: die visuelle Hierarchie sollte meist die logische Hierarchie widerspiegeln.

🖖 Live long and prosper

[Hierarch]

h1 sollte genau einmal auftreten? Dann hätte man es ja gleich title nennen können!

IMO sollten(!) „die hs“ die Ebenen einer Gliederung (ja, so wie man das mal in der Schule gelernt hat) repräsentieren. Und so eine Glierdung könnte IMHO auch in irgend welchen Elementen, losgelöst von der Seitenhierarchie, wieder auftreten. Mit Bezug zur Frage: auch so ein aside hat das Recht auf eine eigene Hierarchie (die da dann aber oft oder meist besser in da auftauchenden Listen repräsentiert – :first-child, :first-of-type, … – oder auch „nur“ als simpler Absatz [<p>]zwischendrin – und nicht als explizite Auszeichnung als Überschrift [h1 … h6] dargestellt werden sollte).

Das Grundkonzept dahinter sollte eben sehr Ähnlich dem sein, wie es mal im Unterricht gelehrt wurde: erst mal die Gliederung. Eine Gliederung, der die Inhalte folgen. Nicht Inhalte, denen dann oft (meist?) ein Chalos als Gliederung aufgezwungen wird.

Was im Übrigen ja nicht dem wiederspricht, was dazu schon geschrieben wurde. Es ist nur „allgemeiner“.

[Gunnar Bittersmann]

@@Hierarch

h1 sollte genau einmal auftreten? […] IMO sollten(!) „die hs“ die Ebenen einer Gliederung […] repräsentieren.

Ja. Und die erste Ebene (h1) ist das Ganze. (der ganze Inhalt der aktuellen Webseite, nicht der ganze Inhalt der Website)

Also eine h1 pro Webseite.

Dann hätte man es [h1] ja gleich title nennen können!

h1 und title haben oft ähnlichen Inhalt. Wobei im title sinnvollerweise auch der Name der Website genannt wird.

Beispiel: https://gunnarbittersmann.de/buchclub/
title: Buchclub – Gunnar Bittersmann
h1: Buchclub

🖖 Live long and prosper

[Rolf B]

Hallo Hierarch,

dein Problem liegt vermutlich darin, dass HTML originär gar nicht (oder: nicht nur) für Webseiten gedacht war, sondern für Dokumente jeder Art. Wenn ich HTML für ein längeres Dokument nutze, sind mehrere h1 durchaus sinnvoll.

Für Webseiten gilt es aber als gute Praxis, nur eine h1 zu verwenden.

Eine Website hat dann wieder viele h1, eine pro Webseite

Rolf

[Gunnar Bittersmann]

@@Rolf B

dein Problem liegt vermutlich darin, dass HTML originär gar nicht (oder: nicht nur) für Webseiten gedacht war, sondern für Dokumente jeder Art.

Und zwar für Hypertext-Dokumente, also mit Verlinkungen von und zu anderen Dokumenten jeder Art. Und jeder Domain, also von und zu anderen Dokumenten im Web.

Lange Rede, kurzer Sinn: HTML war originär für Hypertext-Dokumente im Web gedacht, d.h. für Webseiten.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

ja, und in der Welt von 1989-1992 gab es noch keine Suchmaschinen und Web-Visitenkarten, sondern Forschungsergebnisse, die man austauschen wollte. Das war ein anderes Web als das, was wir heute kennen.

Wenn es von Anfang an und für jegliche Dokumente best practice gewesen wäre, nur ein h1 Element pro HTML Seite Dokument zu haben, dann wäre dieses Element tatsächlich fehlbenannt.

Context is King, wie immer.

Rolf

[Auge]

Hallo

ja, und in der Welt von 1989-1992 gab es noch keine Suchmaschinen und Web-Visitenkarten …

… und ebenso kein HTML. Laut der deutschsprachigen Wikipedia war dessen Erstveröffentlichung 1992, laut der englischsprachigen Wikipedia 1993.

Wenn es von Anfang an und für jegliche Dokumente best practice gewesen wäre, nur ein h1 Element pro HTML Seite Dokument zu haben, dann wäre dieses Element tatsächlich fehlbenannt.

Context is King, wie immer.

Hmm, der Titel bliebe immer noch die erste Überschrift in der Hierarchie. Insofern passt h1 meiner Meinung nach ganz gut. Das hätte zwar durchaus title sein können aber (hierarchisch gesehen) unterhalb des Titels einer Seite die Hierarchie mit h1 zu beginnen, kommt mir auch komisch vor.

Davon ausgehend, dass, zumindest abseits der ursprünglich angesprochenen wissenschaftlichen Klientel, die Websitebastler in den ersten Jahren die Elemente eben doch anhand ihrer Darstellung auswählten, kann zu dieser Zeit von einer Best Practise nicht die Rede sein. Nun entwickelt und verändert sich so eine Best Practise im Laufe der Zeit sowieso. Jetzt lautet sie eben so, wie sie lautet, nämlich dass h1 die Hauptüberschrift eines einzelnen Dokuments enthält.

Tschö, Auge

[Rolf B]

Hallo Auge,

deswegen schrieb ich '89 bis '92, weil ich die gleichen Quellen konsultiert hatte. Die Idee des WWW ist 3 Jahre älter als HTML. Das hatte mich auch erstaunt; ich dachte immer, das WWW wäre eine Wirkung von HTML gewesen und nicht HTML die für das WWW designte Markup-Sprache.

Zumindest ist die Idee von Hypertext älter…

Ich habe über's Wochenende nochmal über das Thema sinniert und bin zu der Folgerung gekommen: eigentlich sind h1-h6 ein Fehldesign. Es ist doch vollkommener Unfug, dass ich als Autor die Überschriftenebene festlegen und die Überschriften nummerieren muss. Die Schachtelungsstruktur von HTML liefert die Überschriftenstufe eigentlich automatisch, und die Nummerierung ergibt sich ganz von selbst. Zumindest dann, wenn es zwischen Dokument und Datei eine 1:1-Beziehung gibt. Wenn ein Dokument auf mehrere Dateien verteilt wird, sieht das anders aus, aber auch hier wäre die Überschriftentiefe und -nummer eher etwas, das sich als Hint in einem Attribut zu verstecken hätte, den der Browser ignorieren kann, wenn ich die einzelnen Kapitel zu einem Gesamtdokument zusammeninkludiere.

Aber dieses Bad ist wohl schon längst inklusive des Kindes in den Brunnen umgefüllt worden; ein <h> Element, das sich automatisch levelt und nummeriert, werden wir wohl nicht bekommen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber dieses Bad ist wohl schon längst inklusive des Kindes in den Brunnen umgefüllt worden; ein <h> Element, das sich automatisch levelt und nummeriert, werden wir wohl nicht bekommen.

Nein, das werden wir nicht.

In XHTML 2 war das vorgehen. Und als Hixie HTML5 entwickelte, dachte er wohl ‚XHTML ist XML ist Scheiße; und außerdem ist es nicht von mir, also muss es Scheiße sein.‘ Oder er dachte: Alte Browser würden ein ihnen unbekanntes h-Element ignorieren, damit wäre für diese keine Überschrift da. Also gab es in HTML5 kein h-Element, das sich seine Hierarchie-Ebene aus dem Outline-Algorithmus selbst bestimmt.

Stattdessen sollte man für alle Überschriften h1 verwenden, was sich seine Hierarchie-Ebene aus dem Outline-Algorithmus selbst bestimmt. Nur dass Browserhersteller keine Anstalten machten, den Outline-Algorithmus zu implementieren.

Siehe Diskussion zwischen mir und molily von 2014.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Rolf B

Das hatte mich auch erstaunt; ich dachte immer, das WWW wäre eine Wirkung von HTML gewesen und nicht HTML die für das WWW designte Markup-Sprache.

Nö, Timbo^[1] entwickelte HTML, um sein Hypertext-System am CERN zu implementieren. Aber nicht aus dem Nichts:

“HTML wasn’t the first markup language to be used at CERN. Scientists there were already sharing documents written in a flavour of SGML—Standard Generalized Markup Language. Tim Berners‐Lee took this existing vocabulary from CERN SGML and used it as a starting point for his new markup language. Once again, it made sense to build on what people were already familiar with rather than creating something from scratch.”
— Jeremy Keith, Resilient Web Design, Chapter 1: Foundations

Und dann war er überrascht, welche Kreise HTML zog:

“Tim Berners‐Lee assumed that most URLs would point to non‐HTML resources; word‐processing documents, spreadsheets, and all sorts of other computer files. HTML could then be used to create simple index pages that point to these files using links. Because HTML didn’t need to do very much, it had a limited vocabulary. That made it relatively easy to learn. To Tim Berners‐Lee’s surprise, people began to create fully‐fledged documents in HTML. Instead of creating content in other file formats and using HTML to link them up, people began writing content directly in HTML.”

Zumindest ist die Idee von Hypertext älter…

Ein paar Zeilen höher:

“Tim Berners‐Lee did not invent hypertext. That term was coined by Ted Nelson, a visionary computer scientist who was working on his own hypertext system called Xanadu. Both Ted Nelson and Tim Berners‐Lee were influenced by the ideas set out by Vannevar Bush in his seminal 1945 essay, As We May Think. Bush, no doubt, was in turn influenced by the ideas of Belgian informatician Paul Otlet. Each one of these giants in the history of hypertext was standing on the shoulders of the giants that had come before them. Giants all the way down.”

🖖 Live long and prosper

PS: Wer Resilient Web Design noch nicht gelesen hat, sollte dies nachholen. Jeremy Keith schreibt über die Urprünge des Webs, grundlegende Technik, und Grundgedanken wie progressive enhancement.

Und wer nicht gerne liest, kann das auch als Hörbuch genießen. Gelesen vom Autor, nur echt mit den kreischenden Möven von Brighton.

---

1. Wo hab ich den Namen her? Ich glaube, Bruce Lawson nennt ihn so. ↩︎

[Felix Riesterer]

Lieber Gunnar,

nur echt mit den kreischenden Möven von Brighton.

wo findet man das? War vor wenigen Wochen erst in Brighton...

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

wo findet man das?

Auf der Startseite unter Audio

Hm, der den Viewport ausfüllende Titel lädt nicht zum Rumterscrollen ein?

🖖 Live long and prosper

[Felix Riesterer]

Lieber Gunnar,

wo findet man das?

Auf der Startseite unter Audio

ähm, da höre ich in der Introduction aber keine Möwen. Schon gar nicht aus Brighton. Schade...

Hm, der den Viewport ausfüllende Titel lädt nicht zum Rumterscrollen ein?

Am PC habe ich dieses Problem nicht.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

ähm, da höre ich in der Introduction aber keine Möwen.

Ach so, du hast es speziell auf die Viecher abgesehen. Die sind ab und zu mal im Hintergrund zu hören.

Jetzt haste (noch) einen Grund, das ganze Buch durchzuhören.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Timbo […] Wo hab ich den Namen her? Ich glaube, Bruce Lawson nennt ihn so.

Ah, ja.

🖖 Live long and prosper

[MudGuard]

Hi,

ja, und in der Welt von 1989-1992 gab es noch keine Suchmaschinen und Web-Visitenkarten …

… und ebenso kein HTML. Laut der deutschsprachigen Wikipedia war dessen Erstveröffentlichung 1992, laut der englischsprachigen Wikipedia 1993.

Hm. Laut RFC 1866 war HTML bereits seit 1990 in Benutzung.

Siehe 2. Absatz im Abstract.

cu,
Andreas a/k/a MudGuard

[Auge]

Hallo

ja, und in der Welt von 1989-1992 gab es noch keine Suchmaschinen und Web-Visitenkarten …

… und ebenso kein HTML. Laut der deutschsprachigen Wikipedia war dessen Erstveröffentlichung 1992, laut der englischsprachigen Wikipedia 1993.

Hm. Laut RFC 1866 war HTML bereits seit 1990 in Benutzung.

Ich halte es durchaus für plausibel, dass die Sprache mindestens innerhalb des CERN schon vor ihrer öffentlichen Freigabe in Benutzung war. Die Jahresangaben, die in der Wikipedia zu finden sind, beziehen sich ja auf die „Veröffentlichung“ (des Standards?).

Siehe 2. Absatz im Abstract.

Du hast auch zuviel Zeit, oder? 😉😆

Tschö, Auge

[MudGuard]

Hi,

Du hast auch zuviel Zeit, oder? 😉😆

Derzeit leider ja.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

benutzt, ja, aber nicht richtig spezifiziert.

Wann das geschah, darüber unterscheiden sich die deutsche und englische Wikipedia.

EN: TBL veröffentlichte 1991 einen ersten Entwurf mit 18 Tags und die IETF brachte 1993 eine richtige Spec heraus

DE: Timeline „Am 13.03.89 von TBL vorgeschlagen, 03.11.92 Urversion nur für Text, 30.04.93 fett+kursiv+Bilder“

Man könnte ja Tim mal fragen, wie er sich das 1989 gedacht hatte 😉. Wenn man https://info.cern.ch/ als Antwort ansieht, dann denkt er sich das Gleiche: eine Seite, ein h1

Rolf

[Gunnar Bittersmann]

@@Hierarch

h1 sollte genau einmal auftreten? Dann hätte man es ja gleich title nennen können!

Nö.

“[Title] is not normally displayed in the text of a document itself. Contrast titles with headings.”
— HTML Tags – die Urfassung (Vorläufer) der HTML-Spec?

title und h1 haben unterschiedliche Funktionen:

“It is suggested that the first heading be one suitable for a reader who is already browsing in related information, in contrast to the title tag which should identify the node in a wider context.”

🖖 Live long and prosper

[Hierarch]

Also ich hätte damals™ für Aufsätze (und ähnliche Texte) mit einem Aufbau der Bauart

<h1>Einleitung</h1>
<h2>Abschnitt 1</h2>
<h3>Abschnitt 2</h3>
<h4>Zusammenfassung</h4>
<h5>Nachwort</h5>

bestimmt keine … oder doch? … eine „bemerkenswerte“ Note bekommen.

Und wenn es zwar mehrere h2…h6, sicher aber keine h7 … h?, dafür aber explizit nur ein h1geben darf, ist die 1 hinter dem h eine mentale „Herausforderung“. — Es entspräche damit wohl (ungefähr) einem

body > title:first-of-type { … /*!important?*/ }

Und „das ist in Web-Seiten nicht sinnvoll“? Es ist vielleicht überwiegend untypisch. Aber spätestens wenn ich hier meinen 19"er hochkant drehe, könnte ich darauf locker den Text von 2 A4-Seiten in lesbarer, von 3 sochen Seiten in Mikro-Schrift, darstellen lassen. — Und der 19" hätte auch noch ein oder zwei „große Brüder“.
Ich mach’ das nicht, aber irgendwo wurde hier doch „Wissenschaft“ erwähnt: na, haben wir es denen gezeigt, wie wir ihnen „ihr“ Web wegnehmen können?

Ach ja: das Beispiel mit body > oder ein vergleichbares Konstrukt hielte ich für so einen „es darf nur Einen geben“ Zweck doch besser angebracht.

[Rolf B]

Hallo Hierarch,

eine „bemerkenswerte“ Note bekommen.

und das aus gutem Grund. Es hätten alles h2 sein müssen. Davor dann aber

<h1>foo</h1>

und im <head>

<title>Aufsatz von Hierarch zum Thema foo</title>

Takeaway: eine Webseite ist kein Aufsatz. Sir Tim hatte auch nie im Sinn, html-Aufsätze zu schreiben. Nur Indexseiten, die auf Aufsätze in anderen Formaten zeigen. Das war mir vor diesem Thread auch nicht so klar.

Rolf

[Hierarch]

Eine Site ist kein Aufsatz, kein Brief, keine Akte, kein …

Aber: ist ist oder kann sein: eine Darstellung solcher Dinge.

Überlegung: was „die Hs angeht“ einfach mal so etwas wie einen Konstruktionsplan entwerfen. Vielleicht mit/in Markup? Bei dem beschwert sich kaum jemand über

# Grundsatz
## die Fragestellung
## Überlegung
## weitere Gedanken
# Umsetzung
## allgemeine Gestaltung
…
# Zusammenfassung
# Stichwort-Verzeichnis

Und wenn die da genutzte Software obendrein „irgendwie und sowieso“ (meist) oben drüber einen Titel darstellt …

Ja, so eine einzelne Web-Darstellung von Inhalten mag meist nicht mehr als einen Textabschnitt der obersten Hierarchiestufe sinnvoll darstellen können (aber man darf durchaus auch mal ganz schön weit „nach unten scollen“ oder Navigations-Lösungen dafür benutzen). Aber ähnliches kann auch mal untergeordnete Ebenen treffen: was, wenn unter h1 zwei Dutzend h2 mit jeweils vielleicht 20 bis 50 Zeilen Text …?

BTW: Mit Köpfchen wird es womöglich noch richtig schön? Schon früh habe ich mich z.B. bei diesem Word (also als ich das noch benutzen mußte) darüber geärgert, daß die Formatvorlagen von Überschriften (und anderen hierarchisch angehauchte Elemente) nicht aufeinander aufbauen. Das wäre, von Fall zu Fall und wenn man meint „das muß so“, leicht auszuhebeln. Umgekehrt den „Untergebenen“ den Gehorsam beizubringen, daß sie z.B. die gleiche Schrift verwenden, ist dagegen reine Schikane.

:heading { font: … }
:heading(2,3) { font-size: 80%; }
:heading(4,5) { font-size: 60%; }
:heading(1,2,4) { font-weight: bolder; }

Allerdings läßt mich “h1:heading(3) will match any <h1> element that is exposed as a level 3 heading.” schon wieder ins Grübeln kommen.

[Rolf B]

Hallo Hierarch,

„Vererben“ von h1 auf h2 geht nicht, richtig, aber du kannst jederzeit Selektorlisten für mehr als eine Überschrift verwenden. Entweder nackig, mit :is() oder mit :where()

:heading() ist Selectors Level 5 und bisher nur im Firefox Nightly verfügbar.

Unterschied 1 zwischen :heading(2,3) und h2,h3 ist, dass :heading eine Klasse ist und darum höhere Spezifität hat als die Typselektorliste h2,h3.

Unterschied 2 wird sein, dass :heading() das headingoffset Attribut unterstützt. Mit Typselektoren geht das nicht.

headingoffset? Wird bald in Chrome und Firefox ankommen, aber hinter dem Experimental-Flag versteckt. MDN hat dazu noch keine Artikel.

Was das soll?

<section headingoffset="1">
   <!-- #include file="tutorials.inc" -->
</section>
<h2>Referenz</h2>

tutorials.inc wird als Server Side Include eingebunden und kann ein <h1>Tutorials</h1> enthalten. Wird tutorials.inc direkt aufgerufen (naja, fast direkt, es braucht schon ein Rahmen-HTML), ist das h1 auf Level 1. Wird es wie gezeigt inkludiert, ist das h1 durch den headingoffset auf Level 2.

Wer kein SSI auf seinem Server hat, nimmt <?php include "tutorials.html"; ?> oder schreibt ein JavaScript, das den Tutorials-Teil per fetch nachlädt.

Aktueller Stand ohne headingoffset ist, dass man per PHP oder JavaScript die Heading-Elementtypen je nach Kontext zurechtpatchen muss. Oder man verwendet Markdown und gibt dem Markdown-to-HTML Compiler mit, welchen Headingstufe er für # generieren soll. Hier im Forum ist # = h3.

Rolf

[Hierarch]

Danke für die doch recht umfangreiche Antwort!

Die Kurzfassung ist, für mich, etwas wie „da denkt jemand (z.T.) so wie ich auch“.

Auch das „es kann(darf) nur ein <h1> geben“ erledigt sich damit einigermaßen: wenn z.B. ein „Buch“ als Sammlung von Seiten mit einzelnen Kapiteln dargestellt werden soll, dann darf das „Buch“, am Stück präsentiert (da gab’s doch auch @media print …), h1 für jedes Kapitel verwenden. Und erscheint dann vielleicht, in so einer „Kaptielsammlungs-Darstellung“, noch ähnlich wie in Büchern: Seitzenzahlen, vielleicht Kapitel-Überschriften oder ähnliche Dinge klein an den Rändern (obenunten, links/mitte/rechts). Während die anderen, <h[2-6]>, in der Darstellung „befördert“, also meist „massiger“, angeboten werden.

Ansonsten geb’ ich mal diesen Mönch aus „Der Krieg des Charlie Wilson“: da ja sicherlich noch mit Änderungen, auch größeren, zu rechnen ist: „man wird sehen“.

---

Hoppla. @media print… das muß ich doch unbedingt mal ausprobieren! Wie groß erscheint so ein PDF in der Vorschau? Was macht vlt. so ein Reader Mode mit solchen Dingen? — Der Bildschirm wäre ja der gleiche. Und man weiß doch nicht, aus welcher Entfernung da die 96dpi …

Anders als in Preview oder vlt. so einem Reader? Die (wenigstens einige davon) wissen ja seltsamerweise solche Dinge dann doch.

[Gunnar Bittersmann]

@@Hierarch

Auch das „es kann(darf) nur ein <h1> geben“ erledigt sich damit einigermaßen:

Wieso?

wenn z.B. ein „Buch“ als Sammlung von Seiten mit einzelnen Kapiteln dargestellt werden soll,

Hä?

dann darf das „Buch“, am Stück präsentiert […], h1 für jedes Kapitel verwenden.

Das Buch als Gesamtes hat einen Titel – der ist h1. Jedes Kapitel hat eine Überschrift h2.

🖖 Live long and prosper

[Felix Riesterer]

Lieber Gunnar,

[EDIT] section > h1 sollte ein section > h2 sein.[/EDIT]

Das Buch als Gesamtes hat einen Titel – der ist h1. Jedes Kapitel hat eine Überschrift h2.

und wozu benötigt man dann noch das <title>-Element? Ich stelle mir das Buch als HTML-Dokument so vor:

<html>
  <head>
    <title>Mein Buch</title>
  </head>
  <body>
    <nav>
      <h1>TOC</h1>
      <ul>
        <li>
          <a href="#c1">Chapter 1</a>
          <ul>
            <li><a href="#c1_1">Chapter 1.1</a></li>
          </ul>
        </li>
        <li><a href="#c2">Chapter 2</a></li>
        ...
      </ul>
    </nav>
    <article id="c1">
     <h1>Chapter 1</h1>
     <p>...</p>
      <section id="c1_1">
       <h2>Chapter 1.1</h2>
       <p>...</p>
      </section>
    </article>
    <article id="c2">
     <h1>Chapter 2</h1>
     <p>...</p>
    </article>
    ...
  </body>
</html>

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

und wozu benötigt man dann noch das <title>-Element?

h1 gehört zum dargestellten Seiteninhalt.
title gehört zu den Metadaten über die Webseite, wird verwendet für Beschriftung des Browsertabs, Lesezeichen, in Suchergebnissen, …

Und was ich hier im Thread schon sagte

🖖 Live long and prosper

[Hierarch]

„Sag ich doch!“?

The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.

Also, in Analogie zum Buch (oder irgendwie ähnlichen Schriftstück): außen auf dem Umschlag. Mittendrin wird der dann vielleicht noch mal erwähnt (Klappentext o. ä.; und mit dem „lebenswichtigen JS“ — <noscript> anybody? — kommt man da ja auch dran). Aber sonst? Doch nicht auf jeder Seite oder zu jedem Kapitel. Im „Buch“ drin gliedert der Titel genau nichts.

Mein Fazit: es gibt kein (grundlegendes) <h1>-Limit.

[JürgenB]

Hallo,

hier noch mal meine Meinung:

h1 entspricht dem Buchtitel, den gibt es nur einmal. h2, h3, ... sind dann die (Unter-)Kapitelüberschriften.

title entsprecht dem Kurztitel. Der kann mit dem Buchtitel übereinstimmen, muss aber nicht. Der erscheint dann in irgendwelchen Listen, evtl. auch auf dem Buchrücken.

Gruß
Jürgen

[Rolf B]

Hallo Hierarch,

Mein Fazit: es gibt kein (grundlegendes) <h1>-Limit.

Was alle „count(h1) > 1“-Fans vergessen:

HTML ≠ FooText^[1]

und damit

h1 ≠ Überschrift Stufe 1

Rolf

---

1. Ersetze FooText durch das Textverarbeitungs- oder Desktop Publishing Programm deines geringsten Misstrauens ↩︎

[Felix Riesterer]

Lieber Rolf,

h1 ≠ Überschrift Stufe 1

ja, MDN sagt Avoid using multiple <h1> elements on one page, aber sie sagt auch:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Und mit Heading level 1 lese ich ganz klar Dein „Überschrift Stufe 1“, auch wenn level genau genommen Ebene bedeutet.

Wenn man das Buch als einen Baum von Überschriften-Ebenen sieht, will man eine oberste Ebene haben. Klar. Dass die zwingend ein h1 sein muss, leuchtet ein. Aber die hx-Elemente sind eben keine Titel, sondern Überschriften. Und Überschriften kann es eben mehrere auf ein und derselben Ebene haben. Auch auf der obersten Ebene. Dass man den Titel mit einem Überschriften-Element auszeichnet, ist nach meinem Dafürhalten eine Notlösung und keine zwingend sich aus der Spec ergebende Lösung.

Aber es darf ja noch immer ein jeder Mensch in diesem Land seine Meinung haben und auch vertreten. So lange sie einen Sinn hat, kann ich nicht einfach „falsch“ schreien und dem anderen vorwerfen, er befände sich völlig im Irrtum. Und dann ist da noch die Frage der Verhältnismäßigkeit. Eine reguläre Internetseite (also kein Buch), organisiert ihre Inhalte etwas anders, als es ein Buch tun würde, das selbst eben genau keine Internetseite ist. Die MDN spricht bei ihrer Avoid...-Empfehlung aber explizit von page, also einer (Internet-)Seite und nicht von der Seite eines Buches. Also ist die Anwendbarkeit in diesem speziellen Falle vielleicht unverhältnismäßig. Noch ein Grund mit in Stein gemeißelten Argumenten etwas vorsichtiger zu hantieren.

Liebe Grüße

Felix Riesterer

[Felix Riesterer]

Lieber Gunnar,

h1 gehört zum dargestellten Seiteninhalt.

völlig richtig.

title gehört zu den Metadaten über die Webseite, wird verwendet für Beschriftung des Browsertabs, Lesezeichen, in Suchergebnissen, …

Völlig richtig.

Und was ich hier im Thread schon sagte

Ja, aber das klingt dann sehr nach „für mich folgt daraus zwingend...“ und nicht nach „laut Spec darf das unmöglich anders sein“. Also ergänze ich mein Beispiel noch einmal:

<html>
  <head>
    <title>Mein Buch</title>
  </head>
  <body>
    <header>
      <h1>Mein Buch</h1>
      <p>Gewidmet meine(r|m) ...</p>
      <p>(Ort) (Datum)</p>
    </header>
    <nav>
      <h1>TOC</h1>
      <ul>
        <li>
          <a href="#c1">Chapter 1</a>
          <ul>
            <li><a href="#c1_1">Chapter 1.1</a></li>
          </ul>
        </li>
        <li><a href="#c2">Chapter 2</a></li>
        ...
      </ul>
    </nav>
    <article id="c1">
     <h1>Chapter 1</h1>
     <p>...</p>
      <section id="c1_1">
       <h2>Chapter 1.1</h2>
       <p>...</p>
      </section>
    </article>
    <article id="c2">
     <h1>Chapter 2</h1>
     <p>...</p>
    </article>
    ...
  </body>
</html>

Was ich eigentlich voraussetze, ist die automatische Nummerierung der Überschriften. Im Beispiel habe ich 1 und 1.1 ausgeschrieben. Das sollte CSS übernehmen. Und ja, das sollte es auch nur in den article- und section-Elementen tun. Im „Einband“ (oder wie das heißt, das ich als <header> umgesetzt habe) und im Inhaltsverzeichnis (<nav>) soll keine Nummerierung stehen.

Ich fände es wenig nachvollziehbar, wenn in <header> und <nav> die h1 jeweils eine h2 sein sollte. Und an welcher Stelle im Dokument diese stehen, wäre mir zwar nicht so wichtig, aber dass sie keine übergeordnete h1 haben, sollte überall so sein, daher können sie auch da bleiben, wo sie gerade sind.

Liebe Grüße

Felix Riesterer

[Robert B.]

Moin Rolf,

Unterschied 2 wird sein, dass :heading() das headingoffset Attribut unterstützt. Mit Typselektoren geht das nicht.

headingoffset? Wird bald in Chrome und Firefox ankommen, aber hinter dem Experimental-Flag versteckt. MDN hat dazu noch keine Artikel.

Was das soll?

<section headingoffset="1">
   <!-- #include file="tutorials.inc" -->
</section>
<h2>Referenz</h2>

tutorials.inc wird als Server Side Include eingebunden und kann ein <h1>Tutorials</h1> enthalten. Wird tutorials.inc direkt aufgerufen (naja, fast direkt, es braucht schon ein Rahmen-HTML), ist das h1 auf Level 1. Wird es wie gezeigt inkludiert, ist das h1 durch den headingoffset auf Level 2.

Ah, es hat mal wieder ein Workaround für ein initial mit XHTML 2 vorgeschlagenes Konstrukt auf komplizierterem Weg zu HTML 5 gefunden:

<section>
    <h>Relative „Top-Level-Überschrift“ innerhalb des Abschnitts</h2>
    <p>Im obigen Beispiel wäre das eine <code>&lt;h2&gt;</code>.</p>
    <section>
        <h>H3</h>
        <p>…</p>
    </section>
</section>

Viele Grüße
Robert

[Felix Riesterer]

Liebe(r) Gisela,

Nun habe ich aber gelesen, dass die Reihenfolge soll sein h1, h2, h3.

Reihenfolge? Wo hast Du denn von einer Reihenfolge gelesen? Nicht Reihenfolge sondern Hierarchie:

• h1 - Hauptüberschrift
• h2 - Unter-Überschrift (z.B. Kapitel)
• h3 - Unter-Unterüberschrift (z.B. Abschnitt)
• usw.

Was ist die beste Lösung?

Am besten ist die Lösung, die am meisten Sinn hat. Also Sinn im Sinne von „mit Logik“.

Liebe Grüße

Felix Riesterer

[Gisela]

Hallo Felix,

Reihenfolge? Wo hast Du denn von einer Reihenfolge gelesen? Nicht Reihenfolge sondern Hierarchie:

OK, ich meinte Hierarchie.

• h1 - Hauptüberschrift
• h2 - Unter-Überschrift (z.B. Kapitel)
• h3 - Unter-Unterüberschrift (z.B. Abschnitt)
• usw.

Es gibt aber im Hauptteil bereits eine Hierarchie h1,h2,h3

Es handelt sich bei der Überschrift zu der Auflistung nicht um eine Hierarchiebezeichnung sondern nur einen größeren Text.

Ist hier dann ein p- oder div-tag mit entsprechendem Attribut sinnvoll?

[Rolf B]

Hallo Gisela,

ich würde behaupten, dass hier eine h2 Überschrift angemessen ist, als weiterer Abschnitt neben dem Inhalt.

Mit

aside h2 {
   font-size: 120%;
}

könntest Du eine Schriftgröße anfordern, die 20% als die Schriftgröße des aside-Elements ist.

Rolf