При написании семантического HTML, что лучше: Scoping с тегами от <h1> до <h6> или с атрибутами id и <span>тегами?

Question

Я пытаюсь написать высококачественную семантическую HTML5.

Какой из следующих двух вариантов лучше семантически:

---

ВАРИАНТ 1:

Определите стили, выбрав пролеты, используя идентификаторы:

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

Использование h1-h6 путем определения области внутри и тегов по классу или 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...

В этом варианте я бы выбрал и обозначил название ресторана и название предложения в SASS следующим образом:

body {

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

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

---

В варианте 1 я определяю стиль с помощью идентификаторов, чтобы выбрать элемент и стилизовать его. В варианте 2 я определяю стиль, снова используя стили от h1 до h6, но эти стили ограничиваются статьей, а не всем документом. На вмещающей странице есть теги h1 и h2 для заголовков и субтитры для всего.

Должны ли теги h1-h6 использоваться только одним способом на всем сайте? Или это нормально, чтобы охватить h1 до h6 в основных частях сайта? Например, на сайте выше раздел с предложениями идентификаторов будет основной частью сайта, и будут другие разделы, имеющие столь же важное значение.

У меня сложилось впечатление, что вариант 1 более удобен в обслуживании, поскольку он более нагляден. Однако ничто не мешает мне использовать идентификаторы в Варианте 2 для достижения той же ремонтопригодности. Вариант 2 кажется мне лучше, так как я держу код на одном уровне, а мои html и css файлы меньше.

Я не уверен, что один из них фактически семантически лучше другого, особенно если я свободно использую идентификаторы в обоих. Это все еще оставляет нас с вопросом о том, какой вариант семантически лучше для моего варианта использования, h1-h6 или span?

Надеюсь, все это имело смысл. Дайте мне знать, если мне нужно быть более ясным.

Answer 1

Такие вещи очень субъективны, но вот несколько комментариев.

• Если ваша цель - семантический html, вам лучше всего забыть о стилях. Стилизация происходит в совершенно другом слое, и, следовательно, только запутывает картину. В частности, идентификаторы и классы ортогональны выбранному элементу. Выберите элемент для семантических целей, затем укажите его для идентификатора и класса, чтобы обеспечить необходимые хуки для создания сценариев и стилей, или для дальнейшего уточнения семантики с микроформатами.

• Вариант 1 содержит весь заголовок статьи. Я не понимаю, чего ты там пытаешься достичь. Однако использование div и span всегда должно рассматриваться как последнее средство, когда нет другого доступного элемента, выражающего семантику, которую вы хотите выразить.

• В то время как в варианте 1 недостаточно элементов заголовков (h1-h6), в варианте 2 слишком много. Например, заголовки внутри ценовых деталей могут применяться только (то есть быть заголовком) к основному содержанию ценовых деталей. Но детали цены не имеют основного содержания.

• В варианте 2 заголовок предложения обозначен как h3. Это вопрос мнения, действительно ли это заголовок или нет, но если вы думаете, что это так, но не считаете это целесообразным в качестве строки в оглавлении, подумайте об упаковке названия ресторана и заголовка предложения в элемент hgroup. .

• Вы также чрезмерно используете элемент section. Идея в HTML5 состоит в том, что содержимое каждого элемента секционирования (включая «тело») имеет заголовок, затем основное содержимое, а затем нижний колонтитул. Нет семантической необходимости заключать основное содержимое в какой-либо элемент вообще, но если вы хотите сделать это по стилю или из-за необходимости обслуживания, вы должны использовать элемент "div". Вы не должны использовать «section» в этих случаях, потому что элемент «section» будет выражать неправильную семантику , и, как следствие, вполне может сбить с толку способ представления содержимого «section» API специальных возможностей.

• В HTML5 h1-h6 эффективно «сбрасываются» внутри каждого элемента секционирования, поэтому нет необходимости, скажем, иметь h1 на уровне тела, что означает то же самое, что h1 внутри каждой статьи. Действительно, они по определению разные. Тем не менее, я хотел бы предположить, что это хорошая практика, что значения согласованы для всех статей на одном уровне в разделе (или тела).