2

高品質のセマンティック HTML5 を作成しようとしています。

次の 2 つのオプションのうち、意味的に優れているのはどれですか。

オプション1：

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

このオプションの下で、SASS で次のようなレストラン名とオファータイトルを選択してスタイルを設定します。

body {

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

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

オプション 2:

スタイルを範囲内にスコープし、クラスまたは ID でタグを付けて、h1 から h6 を使用します。

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

このオプションの下で、SASS で次のようなレストラン名とオファータイトルを選択してスタイルを設定します。

body {

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

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

オプション 1 では、ID を使用してスタイルを定義し、要素を選択してスタイルを設定します。オプション 2 では、h1 から h6 のスタイルを再び使用してスタイルを定義していますが、これらのスタイルは文書全体ではなく記事に適用されます。囲んでいるページには、タイトル用の h1 タグと h2 タグがあり、全体のサブタイトルがあります。

h1 から h6 タグは、サイト全体で 1 つの方法でのみ使用されることになっていますか? それとも、サイトの主要部分内で h1 から h6 の範囲を指定しても問題ないでしょうか? たとえば、上記のサイトでは、ID オファーのあるセクションがサイトの主要部分になり、同様に非常に重要な他のセクションがあります。

オプション 1 の方が説明的であるため、保守しやすいという印象を受けます。ただし、同じ保守性を実現するために、オプション 2 で引き続き ID を使用することを妨げるものは何もありません。オプション 2 は、コードをスリムに保ち、html ファイルと css ファイルを小さく保つという点で優れていると思います。

特に両方でIDを自由に使用している場合、実際に一方が他方よりも意味的に優れているかどうかはわかりません。それでも、私のユースケースでは、h1-h6 とスパンのどちらが意味的に優れているかという問題が残ります。

それがすべて理にかなっていることを願っています。明確にする必要がある場合はお知らせください。

4

1 に答える 1

8

この種のものは非常に主観的ですが、ここにいくつかのコメントがあります。

  • 目標がセマンティック html である場合は、スタイリングを完全に忘れるのが最善です。スタイリングはまったく別のレイヤーで行われるため、全体像を混乱させるだけです。特に、id とクラスは、選択した要素と直交しています。セマンティック目的で要素を選択し、それを id と class で修飾して、スクリプティングとスタイリングに必要なフックを提供するか、microformats でセマンティクスをさらに改良します。

  • オプション 1 では、記事のコンテンツ全体がヘッダーに含まれます。あなたがそこで何を達成しようとしているのか理解できません。ただし、表現したいセマンティクスを表現する他の要素が利用できない場合、div と span の使用は常に最後の手段と見なす必要があります。

  • オプション 1 には見出し (h1-h6) 要素が不十分ですが、オプション 2 には多すぎます。たとえば、price-details 内の見出しは、price-details のメイン コンテンツにのみ適用できます (つまり、見出しにすることができます)。しかし、price-details にはメイン コンテンツがありません。

  • オプション 2 では、offer-title を h3 として指定します。これが本当に見出しかどうかは意見の問題ですが、見出しであると思うが、目次の行として適切ではないと思う場合は、レストラン名とオファーのタイトルを hgroup 要素で囲むことを検討してください。 .

  • また、セクション要素を使いすぎています。HTML5 の考え方は、各セクション要素 (「本文」を含む) のコンテンツには、ヘッダー、メイン コンテンツ、フッターの順にあるというものです。メイン コンテンツを要素でラップする必要はまったくありませんが、スタイルやメンテナンスの理由でそうしたい場合は、"div" 要素を使用する必要があります。「セクション」要素は間違ったセマンティクスを表現し、その結果、「セクション」のコンテンツがアクセシビリティ API に提示される方法を混乱させる可能性が非常に高いため、これらの場合に「セクション」を使用しないでください。

  • HTML5 では、h1 から h6 は各セクション要素内で効果的に「リセット」されるため、たとえば、本文レベルの h1 を各記事内の h1 と同じ意味にする必要はありません。確かに、それらは定義上、異なります。ただし、セクション (または本文) 内の同じレベルのすべての記事で意味が一貫していることをお勧めします。

于 2010-10-14T00:19:08.393 に答える