Wenn semantische HTML zu schreiben, was ist besser: Scoping mit

Question

Ich versuche, qualitativ hochwertigen semantischen HTML5 zu schreiben.

Welche der folgenden beiden Optionen sind besser semantisch:

---

OPTION 1:

Definieren Sie die Stile von Auswahl Spannweiten-IDs:

%body
  %header#global-header
    %h1
      My Startup Name
    %h2
      Home of the best offers in the Motor City

  %section#offers
    %h1
      Today's Offers
    %h2
      Here are the current offers for your city:

    %article.offer
      %header.offer-header
        %span.restaurant-name 
          Some Burger Joint
        %span.offer-title 
          80% off a burger
        %section.price-details
          %ul
            %li.original-price
              %p
                Original Price
              %p
                $30
            %li.offer-price
              %p
                Price
              %p
                $10
        %section.offer-description
          %p
            Some burger joint is the most popular burger joint in the Motor City. Buy a big burger or a bunch of belly bombers.

    %article.offer
      ...another offer...

Im Rahmen dieser Option würde ich wählen und Stil des Restaurant-Name und Angebot-Titel mit so etwas wie diesem in SASS:

body {

  h1 { font-size: 3em; }
  h2 { font-size: 2em; } 

  article {
    .restaurant-name { font-size: 1.25em; }
    .offer-title { font-size: 1.5em; }
  }
}

---

OPTION 2:

Mit h1 bis h6 durch Scoping das Styling innerhalb und Tags nach Klasse oder ID:

%body
  %header#global-header
    %h1
      My Startup Name
    %h2
      Home of the best offers in the Motor City

  %section#offers
    %h1 
      Today's Offers
    %p
      Here are the current offers for your city:  
    %article.offer
      %header.offer-header
        %h2.restaurant-name 
          Some Burger Joint
        %h3.offer-title 
          80% off a burger
      %section.price-details
        %ul
          %li.original-price
            %h4
              Original Price
            %h4
              $30
          %li.offer-price
            %h4
              Price
            %h4
              $10
      %section.offer-description
        %p
          Some burger joint is the most popular burger joint in the Motor City. Buy a big burger or a bunch of belly bombers.

    %article.offer
      ...another offer...

Im Rahmen dieser Option würde ich wählen und Stil des Restaurant-Name und Angebot-Titel mit so etwas wie diesem in SASS:

body {

  h1 { font-size: 3em; }
  h2 { font-size: 2em; } 

  article {
    %h1 { font-size: 1.25em; }
    %h2 { font-size: 1.5em; }
  }
}

---

Mit der Option 1, ich definieren den Stil-IDs mit dem Element und Stil, um es auszuwählen. Mit Option 2, bin definiere ich den Stil von Styles für h1 bis h6 wieder verwenden, aber diese Stile sind zu dem Artikel und nicht das gesamte Dokument scoped. Die umschließende Seite hat h1 und h2-Tags für die Titel und Untertitel für die gesamte.

Sind h1 bis h6 Tags sollten nur in einer Art und Weise über einen gesamten Standort verwendet werden? Oder ist es in Ordnung, Umfang h1 bis h6 in großen Stücken einer Website? Zum Beispiel in der Stelle über den Abschnitt mit der ID Angeboten wird ein großes Stück von der Website sein und es wird andere Abschnitte von ähnlich großer Bedeutung sein.

Ich habe den Eindruck, dass die Option 1 ist besser wartbar, da es mehr beschreibend ist. Allerdings gibt es nichts, um mich von noch zu halten mit IDs in Option 2, um die gleiche Wartbarkeit zu erreichen. Option 2 scheint mir besser zu sein, soweit halten den Code schlank und meine HTML und CSS-Dateien kleiner.

Ich bin mir nicht sicher, ob man in der Tat besser als die anderen semantisch, vor allem, wenn ich IDs zügig in beide verwenden. Die noch Blätter uns mit der Frage, welche ist besser semantisch für meinen Anwendungsfall, h1-h6 oder Spannweiten?

Ich hoffe, alles das machte Sinn. Lassen Sie mich wissen, wenn ich muss klarer sein.

Answer 1

Diese Art von Material ist sehr subjektiv, aber hier ein paar Kommentare.

• Wenn Ihr Ziel semantische HTML ist, würden Sie am besten tun, um Styling ganz zu vergessen. Styling geschieht auf einer ganz anderen Ebene, und dient daher nur das Bild zu verwirren. Insbesondere ids und Klassen sind orthogonal zu dem Element ausgewählt. Wählen Sie das Element für semantische Zwecke, dann qualifizieren sie mit der ID und Klasse der notwendigen Haken für Skripting zu schaffen und Styling, oder weiter zu refine die Semantik mit Mikroformaten.

• Option 1 hat den gesamten Inhalt des Artikels in der Kopfzeile. Ich verstehe nicht, was Sie versuchen, es zu erreichen. Allerdings sollte mit Divs und Spannweiten immer ein letztes Mittel in Betracht gezogen werden, wenn kein anderes Element zur Verfügung, welche die Semantik zum Ausdruck bringt Sie wollen zum Ausdruck bringen.

• Die Option 1 unzureichende Überschriften (h1-h6) Elemente hat, Option 2 hat zu viele. Zum Beispiel können die Positionen innerhalb Preis-Details nur zu (das heißt, eine Überschrift) die wichtigsten Inhalte der Preisdetails gelten. Aber Preis-Details haben keine wesentlichen Inhalte.

• Im Falle der Option 2, haben Sie Angebot-Titel als h3. Es ist eine Frage der Meinung, ob dies wirklich eine Überschrift ist oder nicht, aber wenn Sie denken, es ist, aber glaube nicht, als eine Linie in einem Inhaltsverzeichnis geeignet ist, sollten Sie das Einwickeln die Restaurantnamen und Angebot-Titel in einem hgroup Elemente .

• Sie sind überbeanspruchend auch den Abschnitt Element. Die Idee ist, dass in HTML5 der Inhalt jedes Schneideelement (einschließlich der „Körper“) mit einem Header hat, dann den Hauptinhalt, dann eine Fußzeile. Es gibt keine semantischer Notwendigkeit, die wichtigsten Inhalte in jedem Element überhaupt wickeln, aber wenn für das Styling oder Wartungsgründen Sie dies tun möchten, sollten Sie ein „div“ -Element verwenden. Sie sollten nicht „Abschnitt“ in diesen Fällen verwenden, da das „Abschnitt“ Element das ausdrücken würde falsch Semantik und in der Folge möglicherweise die Art und Weise verwirren, dass der Inhalt des „Abschnitts“ vorgestellt um die Zugänglichkeit APIs.

• In HTML5, h1-h6 sind effektiv „Reset“ in jedem Element sectioning, so gibt es keine Notwendigkeit, sagen wir, auf der Körperebene in jedem Artikel die gleiche wie h1 bedeuten haben h1. Tatsächlich sind sie per Definition anders. Allerdings würde ich vorschlagen, dass es gute Praxis ist, dass die Bedeutung für alle Artikel auf der gleichen Ebene innerhalb eines Abschnitts konsistent ist (oder Körper).