Warum verwenden Sie .h1 statt der tatsächlichen h1?

Innerhalb der Bootstrap-CSS-Projekt, Stile sind für Ihre überschriften-tags (H1, H2, H3, H4, H5, H6), aber es gibt auch eine Reihe von Klassennamen auf der Grundlage der Positionen (.h1 .h2 .h3, .h4, .h5, .h6). Was ist der Vorteil gewonnen, wenn man von den Namen der Klasse eines H1 ohne die richtige Verwendung der H1-tag? Ich würde denken, dass Sie wollen immer sicherstellen, dass Ihre HTML-Spiegel Ihrer visuellen Bedeutung.

Irgendwelche Gedanken zu erklären, einen guten Grund für die Verwendung .h1 statt mit einem h1-tag würde geschätzt.

Kommentar zu dem Problem - Öffnen
Das ist eine gute Frage, da ich ehrlich gesagt nicht denken, ein Grund, dies zu tun. Aber Bootstrap ist etwas bekannt für die Werbung unsemantic-code... Kommentarautor: poke
Bootstrap auch Missbrauch der <i> - element bedeutet Symbol, würde ich davon ausgehen, dass alles, was nicht erscheint sinnvoll, ist Sie Mist. Kommentarautor: Quentin
@PedroEstrada — Aber warum verwenden Sie <div class="h1"> statt <h1>? Kommentarautor: Quentin
@Rahul Tripathi: Das macht es nur noch mehr überflüssig. Kommentarautor: BoltClock♦
In html-standards im Auge des Betrachters, sondern als in Stein gemeißelt. Bootstrap ist versucht, mehr Flexibilität in design, das Sie besonders verwenden könnte, ohne dass eine bestimmte Ansicht, was richtig ist. Dies ist wahrscheinlich nicht die beste Frage, die für stackoverflow, wie es ist, mehr Meinung statt Fakten. Kommentarautor: scrappedcola

InformationsquelleAutor der Frage Hynes | 2013-09-30

  1. 56

    Fragen Sie:

    Warum .h1 anstelle der tatsächlichen h1?

    Kurze Antwort:

    Ziel ist, beide zu verwenden, zusammen.

    Die Nützlichkeit der .h* Klassen ins Spiel kommt, wenn die Größe der Typografie in der Gestaltung nicht direkt mit den semantisch entsprechenden überschrift-Ebenen. Durch die Aufteilung des Problems in zwei, können wir sauber lösen, für beide.

    Das erste bit ist das element - /tag. Die '<h*>' kümmert sich um Semantik, Zugänglichkeit und SEO.

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

    Lange Antwort:

    Ich glaube, dass die Ursprünge dieser Klassen kommen aus OOCSS Projekt:

    Object-Oriented CSS

    Die neueste iteration von OOCSS hat sich ein wenig geändert, seit ich zuletzt sah es an, aber hier ist der relevante heading.css - Datei aus einem älteren commit, der hat die .h1 - .h6 Klassen, die ich bin vertraut mit:

    6e481bc18f oocss - /Kern - /überschrift / - überschrift.css

    Ab in die Kommentare:

    .h1-.h6 Klassen sollten verwendet werden, um zu halten die semantisch entsprechenden überschrift-Ebenen - NICHT für die Verwendung auf nicht-überschriften

    ...

    falls weitere überschriften erforderlich sind, sollten Sie erstellt werden, über zusätzliche Klassen, nie über Standort abhängig styling

    Hinweis: die Schwerpunkt vor.

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

    1. stubbornella.org: Nicht Stil der Überschriften Mithilfe von HTML5-Abschnitte (Nicole, der Autor dieses Beitrags, ist der Schöpfer von OOCSS)
    2. csswizardry.com: Pragmatische, praktische Größe der schriftart in CSS
    3. Google Groups › Object Oriented CSS › Überschriften Frage: Grundlegendes Konzept/Nutzung? (Eine Frage, die ich im September '12)

    Relevanten Zitate aus dem oben von links:

    1. stubbornella.org

    ... [HTML5] "Section" - Elemente dienen dann der browser herauszufinden, welcher Ebene die überschrift richtig ist, aber nicht unbedingt, um zu entscheiden, wie es Stil.

    So, wie wir Stil überschriften in HTML5-Welt?

    ... Sollten wir nicht die Verwendung strukturierender Elemente für das styling. Wir sollten lassen Sie Sie die Arbeit machen, für die Sie bestimmt waren, die Sortierung der Dokument-Baum, und lösen styling-Fragen eine andere Weise, die unsere Ziele besser mit der einfache wiederverwendbare Klassen-Namen, die angewendet werden können, um jede unserer Rubriken egal wie tief Sie auch sein mögen in der strukturierender Elemente.

    Ich empfehle abstrahiert Seite große überschriften in Klassen, weil Sie dann tragbar sind, vorhersehbar, und trocken. Rufen Sie Sie, was Sie wollen.

    2. csswizardry.com

    Anderen absolut stellaren Goldklumpen von Weisheit [Nicole Sullivan hat] uns gegeben ist, nenne ich double-stranded überschriften-Hierarchie. Dies ist die Praxis von der Definition einer Klasse jedes mal, wenn Sie eine überschrift in der CSS.

    ... Durch die Zuordnung einer Klasse zusammen mit jeder überschrift Stil, den wir jetzt haben alle Stile befestigt, um eine sehr flexible Auswahl, die verschoben werden können, überall, eher als eine sehr spezifische und nicht-beweglichen.

    3. groups.google.com

    Hier ist ein pseudo-html5-Beispiel (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 komplette Artikel (und thread) über den Link oben für weitere detaillierte Informationen zu diesem Frage/Thema.

    InformationsquelleAutor der Antwort mhulse

  2. 32

    Meisten stylesheets haben eine Reihe von schriftart-Größen entsprechen, die mit den Formatvorlagen überschrift 1 bis 6. Manchmal, an anderer Stelle auf der Seite, web-Designer wollen, verwenden Sie dieselben Schriftgrößen für text sollte nicht ein Teil einer überschrift-element, um semantische Gründe. Statt Sie als Namen für jede dieser Größen wie .size-12, .size-14, .size-16 etc, ist es einfacher, nur um Sie alle zu nennen, das mit der Klasse ähnliche Namen wie Ihre überschriften. So wissen Sie, dass der text die gleiche Größe wie ein H1-element, obwohl es nicht wirklich ein H1-element. Ich habe dies ein paar mal gemacht mich.

    InformationsquelleAutor der Antwort animuson

  3. 8

    Ein paar Gründe die ich mir denken kann:

    • Mit div anstatt richtigen tag zu Holen Sie sich die Optik ein header ohne Auswirkungen auf SEO
    • , Um Komplikationen zu vermeiden von browser-Inkonsistenzen
    • Kompatibilität mit anderen Bibliotheken und frameworks, die beschließen, das gleiche zu tun für Gründe 1 und 2
    • Design-Flexibilität (wie bereits von @scrappedcola in den Kommentaren)

    InformationsquelleAutor der Antwort Mike H.

  4. 5

    Dies ermöglicht eine Trennung der visuellen Hierarchie bilden semantische Hierarchie. zB möchte ich sagen, dass der viewer eine Sache, während das erzählen von einem computer (Suchmaschinen) etwas anderes.

    <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>

    Finden Sie unter:

    InformationsquelleAutor der Antwort Byran

  5. 1

    Das einzige was ich mir vorstellen kann offhand ist für die Suchmaschinen. Viele betrachten eine tatsächliche h1-tag als Titel oder Thema eine Seite und verwenden, die für Durchsuchungen, etc. Mehrere h1-tags verwirren die Suchmaschinen und können mit Schraube sucht, würde zurückkehren Ergebnisse für Ihre Website (ich habe auch gehört, kann es bekommen Sie auf der "schlechten Seite" Liste mit einigen Spinnen wie Google).

    Dass die Stile, die Ihnen erlaubt, um die gleiche Optik zu einem element ohne Schrauben Suchmaschinen.

    InformationsquelleAutor der Antwort Becuzz

  6. 0

    Einem anderen Grund, ich habe vor kurzem... das ist nicht Eckig aber es dient als gutes Beispiel:

    Möchte ich für die Erstellung von dynamischen/deklarative Formen in Eckige (siehe Dynamische Formen in Eckigen Kochbuch) und ermöglichen styled-text-Elemente. Maximale Flexibilität nennen würde, die mir erlaubt, um deklarativ hinzufügen beliebiger HTML-Elemente, um meine Formulare, aber das ist offen, scripting-Angriffen und Bedarf der ausdrücklichen subversion der Angular compiler selbst es zulassen. Stattdessen Erlaube ich, dass text-Elemente Hinzugefügt werden, Formen, zusammen mit einer Klasse für controlling-Stil. So kann ich mit der .h1 style, aber nicht die h1-element.

    InformationsquelleAutor der Antwort Peter Swords

Schreibe einen Kommentar