Frage zum Wiki-Artikel „header“ - Mehrmals H1-Überschrift

[Klaus]

Hallo zusammen,

ich bin noch sehr Anfang mich mit HTML auseinander zu setzen.

Bei dem Artikel irritieren mich die Beispiele: Sowohl in <header> als auch in <article> wird eine <h1> Überschrift verwendet.

Nun habe ich schon mehrmals (u. a. auch hier im Wiki) gelesen, dass man pro Seite die <h1> Überschrift nur einmal verwenden soll.

Soll man das <h1> im Header weglassen oder zählt das hier nicht, da es in einem anderen Abschnitt <header> bzw. <article> liegt.

Ich bin für Hinweise sehr dankbar.

Beste Grüße und eine gutes neues Jahr! Klaus

[Rolf B]

Hallo Klaus,

Bei dem Artikel irritieren mich die Beispiele

Mich auch.

Ein h1 "Herzlich Willkommen" halte ich für falsch, das ist ein Titeltext, keine Überschrift. Überschriften sollten irgendwie andeuten, worum es in dem überschriebenen Abschnitt geht.

Mehrere h1 in einem Dokument, die so gestyled sind, als wollten sie eigentlich h1, h2 und h3 sein, dürften auch nicht ok sein.

Ich möchte das aber ohne Stellungnahme der Wikipäpste nicht ändern.

Rolf

[Rolf B]

Hallo Rolf,

witzig - ich habe soeben die Änderung der IP 84.182.144.75 nachbearbeitet (das Herzlich Willkommen ist kein h1 und im Artikel-Beispiel sollte es h1/h2/h3 sein) und wollte dann das Frickl anpassen. Und da wurde es schon 2017 von Matthias Scharwies richtiggestellt 😂

Das zweite Beispiel ist nun auch auf h1 / h2 / h3 umgestellt, auch im Frickl.

Rolf

[Matthias Scharwies]

Servus! Rolf schrieb:

witzig - ich habe soeben die Änderung der IP 84.182.144.75 nachbearbeitet (...) und wollte dann das Frickl anpassen. Und da wurde es schon 2017 von Matthias Scharwies richtiggestellt 😂

Da sollte es evtl. doch einen Mechanismus geben, den Code der Beispiele auf der Wikiseite darzustellen. Andererseits will man eben nicht das gesamte HTML-Dokument, sondern oft nur einige wichtige Stellen hervorheben.

Ich hätte wetten können, dass die 2017er Änderung von einer anderen Seite, etwas diesem Tutorial stammen (Dem war aber ncht so.):

HTML/Tutorials/HTML5/Seitenstrukturierung

noch kein Vorschlag sondern eine Überlegung

Wir haben, wie ihr evtl. gesehen habt, die CSS-Referenzen und die CSS-Eigenschaftsseiten zusammengefasst. Bei background-image stießen wir auf eine linearGradient()-Unterseite, bei der die Vorlage nicht passte -> Jetzt haben wir auch eine CSS-Funktions-Referenz. Ich finde es gut, dass die vielen Stubs so in einer einheitlichen Struktur mit einem Inhaltsverzeichnis rechts gelandet sind.

Langfristig hatte ich das auch für die HTML-Elemente vor.

HTML/Seitenstrukturierung/aside hat nur wenig mehr Informationen als die entsprechende Referenzseite, aber kein Inhaltsverzeichnis rechts. (Ein Live-Beispiel für ein Element macht ohne CSS nur in wenigen Fällen Sinn.)

Referenz:HTML/aside Die Tabelle mit Syntax, Elternelementen und Attributen ist aber zu lang, sodass ein ==Siehe auch ==, in dem die Tutorials verlinkt wären, zu weit unten wäre.

Evtl. wäre ein Hauptartikel ganz oben auf das Tutorial die Lösung. Oder dass == Siehe auch == und == Weblinks == nach oben kämen.

Ich habe mal hier was gebastelt: Benutzer:MScharwies/HTML/Elemente/aside

Die Referenz-Tabelle an sich wäre eben erst weiter unten platziert. Was meint ihr????

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Da sollte es evtl. doch einen Mechanismus geben, den Code der Beispiele auf der Wikiseite darzustellen. Andererseits will man eben nicht das gesamte HTML-Dokument, sondern oft nur einige wichtige Stellen hervorheben.

Das ist der Punkt: Beispiele sind oftmals etwas umfangreicher und enthalten auch Bausteine, die zwar für die Funktion des Beispiels wichtig sind, aber auf der Seite nichts verloren haben, auf der das Beispiel steht. Deswegen finde ich die aktuelle Lösung besser.

Aber diese Diskussion hatten wir doch neulich - sollte es einen Zusatzlink für den vollständigen Quellcode der Beispiele geben? Antwort war: nein, bewusst entfernt worden zu Gunsten der „“es gibt im Zweifelsfall im Kontextmenü "Frame-Quelltext anzeigen".

Ich hätte wetten können, dass die 2017er Änderung von einer anderen Seite, etwas diesem Tutorial stammen

Gut, dass Du daran erinnerst, dass Beispiele auf mehreren Seiten verlinkt werden können. Man muss bei Beispieländerungen also immer schauen, wo sie überall auftauchen...

Aber die mehrfache Verwendung ist ein weiterer Grund für die Trennung von vollständigem Beispiel-Source und präsentiertem Source. Je nach Einsatzort möchte man ja unterschiedliche Schwerpunkte setzen.

Die Trennung von Beschreibung und Referenz ist vermutlich ein Relikt des Münz-Selfhtml. Es hat mich schon öfter gestört, dass man bei der Suche nach Referenzinformationen zuerst die Beschreibung bekommen hat, dann dort nach unten scrollen musste und dort den Link zur Referenz fand (es sei denn, man war so schlau, gleich nach Referenz:HTML/aside statt nach aside zu suchen.

Es gibt durchaus Elemente, zu denen man mehr als nur ein paar Worte verlieren kann. Aside gehört nicht dazu, aber vielleicht table, details und vor allem input und form. An dieser Stelle könnte man aber auch überlegen, sich auf der Seite, die das Element beschreibt, knapp zu halten und für übergreifende Beschreibungen eines Konzepts entsprechende Wikiseiten bereitzustellen. Das wird kein Autorenaufwand sein, das meiste davon dürfte als Tutorial bereits vorliegen.

Ich hätte aber auch kein Problem damit, wenn eine aside-Seite zunächst Text und Beispiel bringt und die Referenz darunter. Um das sichtbar zu machen, kann man der Seite ein Inhaltsverzeichnis geben (wenn es sich lohnt) oder nur einen Link auf den Referenzabschnitt setzen.

Was ist aber überhaupt mit aside passiert? Wenn man im Wiki nach Aside sucht, wirft die Schnellsuche eine ganze Menge Weiterleitungen auf irgendwelche Vorlagen aus. Ist das eine besondere Kunst, oder sollte das besser weg?

Rolf

[Matthias Scharwies]

Servus!

Was ist aber überhaupt mit aside passiert? Wenn man im Wiki nach Aside sucht, wirft die Schnellsuche eine ganze Menge Weiterleitungen auf irgendwelche Vorlagen aus. Ist das eine besondere Kunst, oder sollte das besser weg?

WTF? Stimmt! Und vor allem sind diese WLs nirgendwo verlinkt - ich lösch die mal!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Rolf B,

Aber die mehrfache Verwendung ist ein weiterer Grund für die Trennung von vollständigem Beispiel-Source und präsentiertem Source. Je nach Einsatzort möchte man ja unterschiedliche Schwerpunkte setzen.

Genau so wird es ja zur Zeit im Wiki gehandhabt. Vollständiger Beispiel-Source und präsentierter Source sind vollkommen unabhängig von einander.

Es gibt durchaus Elemente, zu denen man mehr als nur ein paar Worte verlieren kann. Aside gehört nicht dazu, aber vielleicht table, details und vor allem input und form. An dieser Stelle könnte man aber auch überlegen, sich auf der Seite, die das Element beschreibt, knapp zu halten und für übergreifende Beschreibungen eines Konzepts entsprechende Wikiseiten bereitzustellen. Das wird kein Autorenaufwand sein, das meiste davon dürfte als Tutorial bereits vorliegen.

Das ist auch ein Grund, warum @Matthias Scharwies die Tutorials so vorantreibt.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

Genau so wird es ja zur Zeit im Wiki gehandhabt.

Ich wollte nicht behaupten, dass es anders sei. Aber Matthias überlegte ja, ob man es nicht vielleicht doch anders machen solle, und dem wollte ich widersprechen.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Genau so wird es ja zur Zeit im Wiki gehandhabt.

Ich wollte nicht behaupten, dass es anders sei. Aber Matthias überlegte ja, ob man es nicht vielleicht doch anders machen solle, und dem wollte ich widersprechen.

(Gefühlte) 90% der Änderungen im Wiki sind Versuche die Werte der Beispiel zu ändern - und zwar nicht im Frickl, sondern auf der dazugehörigen Seite. Mich nervt das.

Teilweise hatte ich die Seiten dann geschützt. Das verhindert aber auch die Beseitigung von Tippfehlern oder die Aktualisierung.

Herzliche Grüße

Matthias Scharwies

Jetzt muss ich erstmal damit zurechtkommen, dass ich dieses Jahr keinen Fasching in Köln feiern kann, da die Winterferien bei uns gestrichen wurden! 😀

[Matthias Apsel]

Hallo Matthias Scharwies,

(Gefühlte) 90% der Änderungen im Wiki sind Versuche die Werte der Beispiel zu ändern - und zwar nicht im Frickl, sondern auf der dazugehörigen Seite.

Ja, das kommt recht häufig vor, vielleicht in 0,9 % der Fälle. Aber da steckt keine Absicht hinter.

Mich nervt das.

Mich nicht. Das kann man doch mit einem Klick wieder rückgängig machen.

Teilweise hatte ich die Seiten dann geschützt. Das verhindert aber auch die Beseitigung von Tippfehlern oder die Aktualisierung.

Ja, das war dann wohl keine so gute Idee.

Jetzt muss ich erstmal damit zurechtkommen, dass ich dieses Jahr keinen Fasching in Köln feiern kann, da die Winterferien bei uns gestrichen wurden! 😀

Das würde mich ja nerven! 🤪

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

Jetzt muss ich erstmal damit zurechtkommen, dass ich dieses Jahr keinen Fasching in Köln feiern kann, da die Winterferien bei uns gestrichen wurden! 😀

Oh oh. Leeven Mattes. FASCHING in Kölle? Im Leeve nit. Nieee.

Zum Fastelovend kanns do jän kumme. Ävver zum Fasching? Bah, bliev wo do bess!

Bloß dieses Jahr nicht. Da fällt auch der Karneval aus. Den Zoch wollen sie aber vom Hänneschen Theater nachspielen lassen 😂

Rolf

[Matthias Apsel]

Hallo Rolf B,

Zum Fastelovend kanns do jän kumme.

Der Matthias pflegt Einladungen sehr ernst zu nehmen.

Bis demnächst
Matthias

[Der Martin]

Hallo Matthias,

Jetzt muss ich erstmal damit zurechtkommen, dass ich dieses Jahr keinen Fasching in Köln feiern kann, da die Winterferien bei uns gestrichen wurden! 😀

ach ja - ein Jahr ohne Fasching, Fasnet, Karneval?
Corona hat also auch was Gutes! 😀

Live long and pros healthy,
 Martin

[Klaus]

Jetzt muss ich erstmal damit zurechtkommen, dass ich dieses Jahr keinen Fasching in Köln feiern kann, da die Winterferien bei uns gestrichen wurden! 😀

ach ja - ein Jahr ohne Fasching, Fasnet, Karneval?
Corona hat also auch was Gutes! 😀

😀

Schon mal bei der allemannischen Fastnacht (z. B.: Basler Fasnacht) gewesen? Die verstehen da überhaupt keinen Spaß, dass ist eine toternste Sache für die "Betroffenen". 😀

[Der Martin]

Hallo,

ach ja - ein Jahr ohne Fasching, Fasnet, Karneval?
Corona hat also auch was Gutes! 😀

😀

Schon mal bei der allemannischen Fastnacht (z. B.: Basler Fasnacht) gewesen?

nee, zum Glück nicht.
Ich war drei Jahre alt, als mich eine Pflegemutter (in der Zeit, als meine Mutter im Krankenhaus lag) zum Faschingsumzug zum Nelkendienstag^[1] in die Stuttgarter Innenstadt mitgeschleppt hat. Ich fand das furchtbar, wollte nur wieder nach Hause.

Die verstehen da überhaupt keinen Spaß, dass ist eine toternste Sache für die "Betroffenen". 😀

Ich weiß. Professioneller Karneval, professionelle Fasnet ist nichts Lustiges. Aber sowohl diese verbissene Ausübung von Traditionen, als auch die legendäre Heiterkeit auf Kommando finde ich abstoßend.

Ich konnte dem Fasching noch nie etwas abgewinnen - nicht mit fünf Jahren, nicht mit fünfzehm, und auch nicht jetzt mit über fünfzig. Ich empfinde das ganze Theater als lächerlich, nervtötend und kindisch.

Live long and pros healthy,
 Martin

---

1. In Analogie zum Rosenmontag ↩︎

[MudGuard]

Hi,

da die Winterferien bei uns gestrichen wurden

bleibt Dir die harte Strafe

Fasching in Köln

ertragen zu müssen wenigstens erspart 😉

cu,
Andreas a/k/a MudGuard

[Klaus]

Die Referenz-Tabelle an sich wäre eben erst weiter unten platziert. Was meint ihr????

Für mich als Anfänger scheint das aus didaktischer Sicht sehr gut zu sein. Zuerst Erklärungen und Beispiele und dann die Tabelle mit Zusammenfassungen der Verwendung unten.

Beste Grüße Klaus

[Matthias Scharwies]

Servus!

Die Referenz-Tabelle an sich wäre eben erst weiter unten platziert. Was meint ihr????

Für mich als Anfänger scheint das aus didaktischer Sicht sehr gut zu sein. Zuerst Erklärungen und Beispiele und dann die Tabelle mit Zusammenfassungen der Verwendung unten.

Ich habe es mal ausprobiert: HTML/Elemente/header

Das toc-rechts ist jetzt alphabetisch sortiert.

CSS

Ich glaube, dass man das Code-Beispiel und den dazugehörenden Text optional machen sollte. Häufig (z.B. bei p oder hr) benötigt man es wohl nicht. Es existiert ja auch noch das Syntax-Beispiel.

Ich würde das CSS verändern wollen. Sowohl das Beispiel als auch die h2-Überschriften haben sehr große margins, die hier imho nicht nötig sind. Was meint ihr?

weitere Vorgehensweise

1. Einige Elementseiten sind sehr kurz und könnten gleich in die Referenz integriert werden (z.B. HTML/Textstrukturierung/div). Andere haben umfangreiche Seiten.

Sie müssen optimalerweise in Tutorials (innerhalb von Kursen) umgewandelt werden. Bei aside und header gibt's eben das Kapitel zur Seitenstrukturierung. Bei h1-6 wird es schon schwieriger, die nicht-Referenz-Inhalte in ein eigenes Kapitel zu gießen. blockquote und q können in CSS/Tutorials/Zitate_interessant_gestalten integriert werden.

2. Erst wenn diese Seiten / Tutorials überarbeitet wären, würde es sich lohnen, die alten Referenz-Vorlagen zu überarbeiten und die Links anzupassen.

Das würde auch niemandem auffallen, wenn nur die ersten 2 oder 3 Bereiche/Gruppen umgezogen wären. Evtl. könnte man das Ostern erledigen.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Ich würde das CSS verändern wollen. Sowohl das Beispiel als auch die h2-Überschriften haben sehr große margins, die hier imho nicht nötig sind. Was meint ihr?

Die Margins bei den Überschriften sollten unbedingt erhalten bleiben. Das padding-bottom am Beispiel entsteht durch | BeispielText =  , BeispielText ist ein Attribut, was vorhanden sein muss. Das kann man in der Vorlage anpassen.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Ich würde das CSS verändern wollen. Sowohl das Beispiel als auch die h2-Überschriften haben sehr große margins, die hier imho nicht nötig sind. Was meint ihr?

Die Margins bei den Überschriften sollten unbedingt erhalten bleiben.

Ich hatte evtl. gedacht, die Größe der Überschriften zu verändern:

.refcontainer h2{
  font-size: 1em;
 margin-top: 1em; /*anstelle 2em in normalen Inhaltsseiten */
}

Das padding-bottom am Beispiel entsteht durch | BeispielText =  , BeispielText ist ein Attribut, was vorhanden sein muss. Das kann man in der Vorlage anpassen.

Könntest du das irgendwann erledigen? Die geschweiften Klammern und pipes machen mich ganz verrückt!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Die Margins bei den Überschriften sollten unbedingt erhalten bleiben.

Ich hatte evtl. gedacht, die Größe der Überschriften zu verändern:

.refcontainer h2{
  font-size: 1em;
 margin-top: 1em; /*anstelle 2em in normalen Inhaltsseiten */
}

Dagegen!

Könntest du das irgendwann erledigen?

Erledigt.

Die geschweiften Klammern und pipes machen mich ganz verrückt!

{{{{{||{}||}}}}}}

Na?

Bis demnächst
Matthias

[Auge]

Hallo

Die Referenz-Tabelle an sich wäre eben erst weiter unten platziert.

Für mich als Anfänger scheint das aus didaktischer Sicht sehr gut zu sein. Zuerst Erklärungen und Beispiele und dann die Tabelle mit Zusammenfassungen der Verwendung unten.

Ich habe es mal ausprobiert: HTML/Elemente/header

Das toc-rechts ist jetzt alphabetisch sortiert.

Das gefällt mir.

Einige Elementseiten sind sehr kurz und könnten gleich in die Referenz integriert werden (z.B. HTML/Textstrukturierung/div). Andere haben umfangreiche Seiten.

Ist das dann nicht inkonsistent? Für manche Elemente gibt es Seiten, für andere (außerhalb der Referenz) nicht.

Sie müssen optimalerweise in Tutorials (innerhalb von Kursen) umgewandelt werden. Bei aside und header gibt's eben das Kapitel zur Seitenstrukturierung. Bei h1-6 wird es schon schwieriger, die nicht-Referenz-Inhalte in ein eigenes Kapitel zu gießen.

Gehört die hierarchische Struktur von Überschriftenabfolgen nicht zumindest mittelbar zur Seitenstrukturierung?

Tschö, Auge

[Matthias Scharwies]

Servus!

Ich habe es mal ausprobiert: HTML/Elemente/header

Das toc-rechts ist jetzt alphabetisch sortiert.

Das gefällt mir.

Danke, dass Du mir Feedback gibst!

Einige Elementseiten sind sehr kurz und könnten gleich in die Referenz integriert werden (z.B. HTML/Textstrukturierung/div). Andere haben umfangreiche Seiten.

Ist das dann nicht inkonsistent? Für manche Elemente gibt es Seiten, für andere (außerhalb der Referenz) nicht.

Ja, aber … Bisher waren wir konsistent und hatte jeweils 2 kurze, oft ziemlich inhaltsgleiche Seiten. Es gab aber immer schon HTML-Element-Seiten, die sehr umfangreich waren, wie z.B. zu input und seinen verschiedenen Typen. Seit 2018 haben wir die konsistente Struktur mit kleinen Übersichtsseiten und dann kurzen Einzelseiten zugunsten von zusammenhängenden Kursen ergänzt.

Nun ist evtl. der Zeitpunkt gekommen, die Dopplungen in den kurzen Seiten zusammenzuführen. Für manche Themen gibt es aber kein Tutorial.

Sie müssen optimalerweise in Tutorials (innerhalb von Kursen) umgewandelt werden. Bei aside und header gibt's eben das Kapitel zur Seitenstrukturierung. Bei h1-6 wird es schon schwieriger, die nicht-Referenz-Inhalte in ein eigenes Kapitel zu gießen.

Gehört die hierarchische Struktur von Überschriftenabfolgen nicht zumindest mittelbar zur Seitenstrukturierung?

Voll erwischt! In der Spec sind Überschriften unter 4.3 sections einsortiert.

Kapitel 4.4 "grouping content" umfasst die „Textstrukturierung“ (BTW: das SELFHTML-Wort gibt es nur im Zusammenhang mit der SELF-Doku und den „geklonten“ Seiten). Eigentlich gehört es als Folgekapitel hinter die Seitenstrukturierung. Mit p, br, und hr passt es aber eigentlich nicht in das Oberthema HTML5, mit einem Unterkapitel figure und figcation aber wieder doch!

Herzliche Grüße

Matthias Scharwies

[Archimedes Plutonium]

H1 wird nur 1x vergeben! Das entsprechende Wiki-bsp. Muss verbessert werden.

[Auge]

Hallo

Bei dem Artikel irritieren mich die Beispiele: Sowohl in <header> als auch in <article> wird eine <h1> Überschrift verwendet.

Nun habe ich schon mehrmals (u. a. auch hier im Wiki) gelesen, dass man pro Seite die <h1> Überschrift nur einmal verwenden soll.

Soll man das <h1> im Header weglassen oder zählt das hier nicht, da es in einem anderen Abschnitt <header> bzw. <article> liegt.

Befrage dazu zehn Leute und du wirst 13 Antworten erhalten.

Viele verwenden die H1 pro Seite nur einmalig für die Seitenüberschrift. Dann gehört sie in den Header der Seite. Gibt es auf der nämlichen Seite mehrere Article-Abschnitte, haben diese dann eine H2 (falls es nicht noch eine „Zwischenebene“ geben sollte, die eine H3 oder gar H4 nötig macht). Die Artikelüberschrift kann dann gerne mit anderen Metainfos zu dem Artikel in einem Header in diesem Artikel stehen.

Es gibt aber auch Autoren, die auch bei mehreren Artikeln in einem Dokument (einer Seite) eine H1 pro Artikel haben wollen. Meiner Meinung nach passt das im Normalfall nicht zur Hierarchie solch einer Seite aber andere werden dafür vermutlich nachvollziehbare Gründe vorbringen.

Tschö, Auge

[Gunnar Bittersmann]

@@Klaus

Bei dem Artikel irritieren mich die Beispiele: Sowohl in <header> als auch in <article> wird eine <h1> Überschrift verwendet.

Das Beispiel ist schlecht.

Soll man das <h1> im Header weglassen

Ja. „Herzlich Willkommen!“ ist nicht die Hauptüberschrift. (Und überhaupt zweifelhaft.)

h1 sollte die Hauptüberschrift der jeweiligen Seite sein; nicht die Kennung der Website.

😷 LLAP

[Klaus]

Herzlichen Dank für die vielen schnellen Antworten mit wertvollen Hinweisen.

Der Wiki-Artikel ist jetzt ja auch geändert und ich verstehe es jetzt besser.

Vielen Dank

Klaus