web-dev-qa-db-de.com

Warum .h1 anstelle von h1 verwenden?

Innerhalb des Bootstrap-CSS-Projekts werden Stile für die Überschriften-Tags (H1, H2, H3, H4, H5, H6) bereitgestellt. Es gibt jedoch auch eine Reihe von Klassennamen, die auf den Überschriften basieren (.h1,. h2, .h3, .h4, .h5, .h6). Was ist der Vorteil, wenn Sie den Klassennamen eines H1 verwenden, ohne das H1-Tag richtig zu verwenden? Ich denke, Sie möchten immer sicherstellen, dass Ihr HTML Ihre visuelle Bedeutung widerspiegelt.

Jeder Gedanke, der einen guten Grund für die Verwendung von .h1 anstelle eines h1-Tags erläutert, wäre zu begrüßen.

61
Hynes

Du fragst:

Warum .h1 anstelle von h1 verwenden?

Kurze Antwort:

Das Ziel ist, beide zusammen zu verwenden.

Die Nützlichkeit der .h*-Klassen kommt zum Tragen, wenn die Größe der Typografie im Design nicht mit den semantisch passenden Überschriftenebenen korreliert. Indem wir das Problem in zwei Hälften teilen, können wir beide sauber lösen.

Das erste Bit ist das Element/Tag. Der '<h*>' kümmert sich um Semantik, Zugänglichkeit und SEO.

Das zweite Bit ist die Klasse. Der '.h*' kümmert sich um visuelle Semantik und typografische Hierarchie. 

Lange Antwort:

Ich glaube, dass die Ursprünge dieser Klassen vom OOCSS-Projekt stammen:

Objektorientiertes CSS

Die letzte IOCteration von OOCSS hat sich seit meinem letzten Blick ein wenig geändert, aber hier ist die relevante heading.css-Datei aus einem älteren Commit, die die .h1 - .h6-Klassen hat, mit denen ich vertraut bin:

6e481bc18foocss/core/überschrift/heading.css

Aus den Kommentaren:

.h1-.h6 Klassen sollten verwendet werden, um die semantisch geeigneten Überschriftenebenen beizubehalten - NOT für Nichtüberschriften.
...
Wenn zusätzliche Überschriften benötigt werden, sollten sie über zusätzliche Klassen erstellt werden, niemals über ein ortsabhängiges Styling

Beachten Sie die Hervorhebung über.

Für eine gute Erklärung, warum man diese Klassen verwenden würde, siehe:

  1. stubbornella.org : Überschriften nicht mit HTML5-Abschnitten formatieren (Nicole, die Autorin dieses Beitrags, ist der Schöpfer von OOCSS)
  2. csswizardry.com : Pragmatische, praktische Größenanpassung in CSS
  3. Google Groups ›Objektorientiertes CSS› Überschrift-Frage: Grundkonzept/Verwendung? (Eine Frage, die ich im September '12 gestellt habe.)

Relevante Zitate aus den obigen Links:

1. stubbornella.org

... [HTML5] Abschnittselemente sollen dem Browser helfen herauszufinden, auf welcher Ebene sich die Überschrift wirklich befindet, müssen jedoch nicht unbedingt entscheiden, wie sie gestaltet werden soll.

Wie gestalten wir Überschriften in einer HTML5-Welt?

... Wir sollten keine Schnittelemente für das Styling verwenden. Wir sollten sie die Aufgabe erledigen lassen, für die sie entwickelt wurden, nämlich den Dokumentbaum sortieren, und die Stilfragen auf eine andere Weise lösen, die unsere Ziele besser erfüllt: mit einfachen wiederverwendbaren Klassennamen, die auf alle Überschriften angewendet werden können, egal wie tief sie sind Sie können im Schnittinhalt enthalten sein.

Ich empfehle die Zusammenfassung von Überschriften für die gesamte Site in Klassen, da diese tragbar, vorhersehbar und trocken sind. Sie können sie beliebig nennen.

2. csswizardry.com

Ein weiteres absolut herausragendes Nugget der Weisheit, das [Nicole Sullivan] uns gegeben hat, ist das, was ich als doppelsträngige Überschriftenhierarchie bezeichne. Dies ist die Praxis, eine Klasse jedes Mal zu definieren, wenn Sie eine Überschrift in CSS definieren.

... Durch das Zuweisen einer Klasse zu jedem Überschriftenstil werden diese Stile nun an einen sehr flexiblen Selektor angehängt, der an einen beliebigen Ort verschoben werden kann und nicht an einen bestimmten und nicht beweglichen.

3. groups.google.com

Hier ist ein Pseudo-HTML5-Verwendungsbeispiel (h/t Jamund Ferguson ):

<body>
    <div class="main">
        <h1>Main Heading</h1>
        <section>
            <h1 class="h2">Section Header</h1>
        </section>
    </div>
    <aside class="side">
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
    </aside>
</body>

Bitte lesen Sie die vollständigen Artikel (und den Thread) über die obigen Links, um genauere Informationen zu dieser Frage/diesem Thema zu erhalten.

57
mhulse

Die meisten Stylesheets verfügen über eine Reihe von Schriftgrößen, die den Überschriftenformaten 1 bis 6 entsprechen. In anderen Bereichen der Seite möchten Webdesigner dieselben Schriftgrößen für Text verwenden, der nicht Teil einer tatsächlichen Überschrift sein sollte Element aus semantischen Gründen. Anstatt Namen für jede dieser Größen wie .size-12, .size-14, .size-16 usw. anzugeben, ist es einfacher, alle Namen mit Klassennamen zu benennen, die Ihren Überschriften ähneln. Auf diese Weise wissen Sie, dass der Text die gleiche Größe wie ein H1-Element haben wird, obwohl es sich nicht um ein H1-Element handelt. Ich habe das selbst einige Male gemacht.

32
animuson

Ein paar Gründe, die mir einfallen können:

  • Verwenden Sie div anstelle des richtigen Tags, um das Bild eines Headers zu erhalten, ohne Einfluss auf SEO
  • Um Komplikationen durch Browserinkonsistenzen zu vermeiden
  • Kompatibilität mit anderen Bibliotheken und Frameworks, die sich aus den Gründen 1 und 2 dafür entscheiden 
  • Designflexibilität (wie von @scrappedcola in den Kommentaren angegeben)
8
Mike H.

Dies ermöglicht eine Trennung der visuellen Hierarchie von der semantischen Hierarchie. Zum Beispiel möchte ich dem Betrachter etwas sagen, während er einem Computer (Suchmaschinen) etwas anderes mitteilt.

<article>
    <h1 class="h1">Page Title</h1>
    <p>Some content</p>
    <section>
        <h1 class="h2">Section Heading</h1>
        <div class="h6">Sub Heading</div>
        <p>Some content</p>
    </section>
    <section>
        <h1 class="h2">Section Heading 2</h1>
        <div class="h6">Sub Heading 2</div>
        <p>Some content 2</p>
    </section>
</article>

Sehen:

5
Byran

Das einzige, was mir spontan einfällt, ist für Suchmaschinen. Viele werden ein reales h1-Tag als Titel oder Betreff einer Seite betrachten und dieses für Suchen usw. verwenden. Mehrere h1-Tags können die Suchmaschinen-Spider verwirren und Suchanfragen verfälschen, die Ergebnisse für Ihre Website zurückgeben würden (ich habe das Ich habe auch gehört, dass es Sie mit einigen Spinnen wie Google auf die Liste der "schlechten Seiten" bringen könnte.

Durch die Verwendung der Stile können Sie einem Element dieselbe visuelle Optik verleihen, ohne die Suchmaschinen zu stören.

1
Becuzz

Dies würde definitiv dazu beitragen, dass Ihre SEO und Google-Crawler Ihre Seite besser verstehen. Wenn Sie h1 lesen, wird davon ausgegangen, dass das, was sich darin befindet, der Schwerpunkt der Seite sein muss. H2 wäre die zweite Komponente und so weiter. Auf diese Weise kann Google den "Umfang" der Inhalte Ihrer Seite verstehen.

Nicht ganz sicher, aber eine große Variable wäre meiner Meinung nach der "Lese" -Modus von Seiten. Dies würde es Geräten und Lesern ermöglichen, Inhalte insbesondere für Geräte zu organisieren, die von sehbehinderten Personen verwendet werden.

Außerdem gibt es Struktur für die Seite und ein Gefühl für Ordnung.

0
agc

Ein anderer Grund, den ich in letzter Zeit gesehen habe ... das ist nicht speziell für Angular, aber es ist ein gutes Beispiel:

Ich möchte dynamische/deklarative Formulare in Angular erstellen (siehe Dynamische Formulare im Angular Cookbook) und gestattete Textelemente zulassen. Maximale Flexibilität würde bedeuten, dass ich beliebige HTML-Elemente deklarativ zu meinen Formularen hinzufügen kann. Dies ist jedoch offen für Skriptangriffe und erfordert eine explizite Subversion des Angular-Compilers. Stattdessen erlaube ich, dass Textelemente zusammen mit einer Klasse zum Steuern des Stils zu Formularen hinzugefügt werden. Ich kann also den .h1-Stil verwenden, aber nicht das h1-Element.

0
Peter Swords