HTML nur Überschriften zeigen

[Linuchs]

Moin,

ich erinnere mich dunkel und vielleicht auch falsch, dass man zu Beginn des Internets nur die Überschriften <h1> bis <h6> im Browser zeigen konnte.

Das könnte ich jetzt gebrauchen, ein Buchprojekt ist sehr unübersichtlich geworden.

Beim Suchbegriff [HTML Überschriften anzeigen] stoße ich nur auf Tools. Gibt es die Funktion auch eingebaut im Firefox?

Fragt Linuchs

[Samuel fiedler]

Hallo Linuchs!

Wenn ich dich richtig verstehe, suchst du etwas, was nach allen Überschriften im HTML sucht und dann daraus ein Inhaltsverzeichnis generiert oder so etwas ähnliches?

[EDIT] Ich habe gerade recherchiert und ein tolles Firefox-Addon gefunden. [/EDIT]

Au revoir,
Samuel Fiedler

[Matthias Scharwies]

Servus!

Hallo Linuchs!

Wenn ich dich richtig verstehe, suchst du etwas, was nach allen Überschriften im HTML sucht und dann daraus ein Inhaltsverzeichnis generiert oder so etwas ähnliches?

Ich glaube schon.

Ich habe das Tutorial HTML/Tutorials/Listen/Hybride_Nummerierung überarbeitet; bin aber im 3. Kapitel stecken geblieben: dynamisch erstelltes Inhaltsverzeichnis

Herzliche Grüße

Matthias Scharwies

[Linuchs]

Hallo Samuel,

danke, HeadingsMap habe ich installiert. Aber wie wird das aktiviert?

Bei about:addons wird angegeben Schaltfläche für Symbolleiste aktivieren Strg+Umschalt+O da wird aber ein Fenster namens Bibliothek geöffnet.

[Samuel fiedler]

Hallo Linuchs!

Das solltest du folgendermaßen lösen können:

1. Klick auf die drei Punkte oben rechts
2. Klick auf „Weitere Werkzeuge“
3. Klick auf „Symbolleiste anpassen“
4. In dem Fenster, was sich öffnet, solltest du das Icon unten sehen, was du dann an den gewünschten Ort ziehen kannst
5. Wenn du damit fertig bist, klicke auf „Fertig“ (rechts unten)

[EDIT 1] Wenn das auch nicht geht, ist irgendwas komisch. [/EDIT 1]

[EDIT 2] Wenn das nicht geht, habe nur noch einen Verdacht: Du arbeitest ausschließlich in privaten Fenstern und hast dem Add-On nicht erlaubt, in privaten Fenstern zu arbeiten. Das lässt sich auch lösen:

1. Gehe auf about:addons
2. Falls du dort noch nicht bist, klicke auf „Erweiterungen“
3. Klicke auf „HeadingsMap“
4. Wenn du nach unten scrollst, solltest du einen Punkt „In privaten Fenstern ausführen“ sehen. Wenn dieser nicht auf „erlauben“ ist, setze ihn auf „erlauben“.

[/EDIT 2]

Die Bibliothek ist das Verwaltungsfenster für deine Lesezeichen.

Au revoir,
Samuel Fiedler

[Linuchs]

Danke, das Symbol hatte sich ganz unauffällig eingeschlichen. Klick darauf funktioniert.

Habe gerade eine Idee innerhalb eines HTML Dokuments umgesetzt. Sehr unkonventionell, aber funktioniert. Ich blende style Angaben ein und aus.

function toggleInhalt() {
  if ( document.getElementById("inhalt").innerHTML == "" ) {
    document.getElementById("inhalt").innerHTML = `
    <style>
    .main * {
      display:none;
    }
    h1, h2, h3, h4, h5, h6 {
      display: block ! important;
      text-align: left ! important;
    }
    </style>
    `;
  } else {
    document.getElementById("inhalt").innerHTML = '';
  }
}

  <div id="inhalt"></div>
  <center><button onclick="toggleInhalt()">Inhalt</button></center>

  <div class=main>
    <h1>Überschrift h1</h1>
    <br>
    <p>Text Text Text Text Text </p>
    <br>
    <h3>Überschrift h3</h3>

[Jonathan Harker]

Hallo Linuchs,

Sehr unkonventionell, aber funktioniert.

<center><button onclick="toggleInhalt()">Inhalt</button></center>

    <h1>Überschrift h1</h1>
    <br>
    <p>Text Text Text Text Text </p>
    <br>
    <h3>Überschrift h3</h3>

Sehr unkonventionell, aber häufig ist es ja so, dass mit der Zeit die alten Dinger wie center, font und br wieder in Mode kommen!

Bis bald! Jonathan

[Rolf B]

Hallo Jonathan,

du hast zwar recht, aber lass es bitte. Linuchs ist gegen Urin dieser Art imprägniert, ihn damit anzupinkeln hat sich als sinnlos erwiesen. Die Self-Prioritäten sind nicht seine.

Rolf

[Rolf B]

Hallo Linuchs,

ein style Element im Body funktioniert, ist aber nicht standardkonform.

Meine Anregung wäre, es über eine Klasse zu steuern. So:

.outlinemode :not(:is(h1,h2,h3,h4,h5,h6)) *,
.outlinemode > :not(:is(h1,h2,h3,h4,h5,h6)) {
  display: none;
}
.outlinemode :is(h1,h2,h3,h4,h5,h6) {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
.outlinemode h2 {
  margin-left: 1em;
}

Also: Alles, was kein h1-h6 Element als Mama oder Papa hat, wird ausgeblendet. Damit die direkten Nichtüberschrift-Kids des .outlinemode Elements auch verschwinden, muss auch die > Regel dazu.

Das hab ich deshalb so gemacht, weil Du ggf. ein <font>, <br> oder <center> Element innerhalb einer Überschrift verwenden könntest. Oder ein <img>. Hm. Möglicherweise HAST Du Bilder in Überschriften und WILLST sie im Outline-Mode ausblenden? Dann müsste man das noch feintunen.

Die :is Pseudoklasse erspart Dir eine lange kommaseparierte Liste von Selektoren. Mit dem Margin an tieferen Überschriften hast Du auch gleich eine eingerückte Gliederung.

Du musst dann nur die outlinemode Klasse hinzufügen. Entweder auf dem Body, oder auf dem .main Element. Zum Entfernen F5 drücken 😉 - oder dafür sorgen, dass der Toggle-Button nicht vom Outline gefressen wird.

Bei etwas komplexeren Seitenlayouts mit Grid oder Sticky-Zeugs könnte es sein, dass die genannten Eigenschaften nicht reichen. Aber das wirst Du dann ja merken und kannst es ergänzen. Mit scheint, als wäre das primär ein Tool nur für Dich.

Eine nur mausbedienbare Methode, die Gliederung auszuschalten und den gewünschten Abschnitt anzuspringen, bestünde darin, noch einen click-Eventhandler zu registrieren und bei click auf eine Überschrift den outline-Mode auszumachen und dann auf der Überschrift die scrollIntoView-Methode zu rufen. Das muss man ggf. über setTimeout hinter die Layoutphase verschieben.

Um sicher zu sein, dass deine Regeln Vorrang haben, ohne dass Du mit Atombomben werden musst, kannst Du versuchen, mit @layer zu arbeiten. Der Fuchs kann das schon, Chrome auch, Edge angeblich nicht obwohl er doch verchromt wurde.

Rolf

[Der Martin]

Hallo,

ein style Element im Body funktioniert, ist aber nicht standardkonform.

das war mal, soweit ich weiß.
Aber es ist in HTML wie in der deutschen Rechtschreibung: Nicht alles, was das Regelwerk inzwischen als gültig akzeptiert, ist auch sinnvoll.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Linuchs

ich erinnere mich dunkel und vielleicht auch falsch, dass man zu Beginn des Internets nur die Überschriften <h1> bis <h6> im Browser zeigen konnte.

[…] Gibt es die Funktion auch eingebaut im Firefox?

Es gibt die Funtion eingebaut im Validator: ▾ More Options ☑︎ Show outline. (via Manuel Matuzović, danke)

Dank auch an Kerstin Probiesch, die die (schon erwähnte) Erweiterung HeadingsMap · in den Ring warf.

🖖 Живіть довго і процвітайте