Семантика HTML5: где находится основной заголовок контента? - PullRequest
6 голосов
/ 26 августа 2011

Каждый раз, когда я создаю страницу HTML5, я бьюсь над тем, куда поместить заголовок главной страницы. Все по-разному справляются с этим ...

Вот ситуация:

Допустим, у меня есть веб-сайт, который называется "Приключения Мео". На этом сайте есть страница «Семантика Абракадабры» с не очень важным подзаголовком, например «lorem ipsum delor»

В верхней части сайта также имеется навигация, нижний колонтитул и некоторое содержимое.

В HTML 4.0 я бы сделал это так:

- div.header
   + div.nav
   + a.siteName:  "Meo's frontend adventures"
- div.contents
   + h1.pageTitle: "Abracadabra Semantics"
   + strong.lead: "lorem ipsum delor"
   - div.cn
     + h2
     + p
     + etc..
+ div.footer 
     +ul.footerNav

Теперь в HTML5 каждый структурный элемент получает H1. Где я должен поставить заголовок фактической страницы?

Я бы сделал так:

- header
   + h1.siteName:  "Meo's frontend adventures"
   + nav
- section.contents
   - header
      -hgroup
        + h1: "Abracadabra Semantics"
        + h2: "lorem ipsum delor"
   - article
     - header
       +h1.ArcticleTitle
     + p
     + etc..
- footer
     + nav 

Я не уверен, правильно ли ставить заголовок реальной страницы в главном разделе или он должен быть в заголовке документа. Я просто сделал это из своего старого мышления HTML4.

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

В HTML 4 легко определиться: h1 = название темы. Но в HTML5 мне не так ясно.

Как Google или программа для чтения с экрана определяет заголовок содержимого? Какую структуру вы бы использовали?

Ответы [ 3 ]

6 голосов
/ 30 августа 2011

Интересный вопрос, на который я поставлю контрапункт для ответа: Как вы оцениваете заголовок?

Допустим, сомнительный заголовок относится к общему документу. В этом случае семантически мы поместили бы этот текст в заголовок документа. Однако заголовок страницы может быть другим. Если мы считаем, что заголовок страницы связан с контентом (например, если Abracadabra Semantics возглавляет саму статью), то он принадлежит не как дочерний элемент страницы, а как дочерний элемент статьи или раздела. Итак, в этом случае наш HTML может выглядеть так:

<!-- Head stuff here -->
<body>
  <header>
    <h1>Meo's frontend adventures</h1>
    <h2>Lorem Ipsum Dolor Sit Amet...</h2>
    <nav>
      <!-- ul of navigation items -->
    </nav>
  </header>
  <section>
    <header>
      <h1>Abracadabra Semantics</h1>
      <h2>Lorem Ipsum Dolor Sit Amet...</h2>
      <!-- optional introductory text -->
    </header>
    <article>
      <p>Lorem Ipsum Dolor Sit Amet...</p>
    </article>
    <!-- Other potential related articles -->
  </section>
  <!-- Possible footer -->
</body>

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

Однако не все воспринимают этот набор семантики одинаково. Например, они могут рассматривать отдельную страницу в качестве рассматриваемого раздела, поэтому они могут включить заголовок своей страницы в заголовок. Или их раздел может быть их доминирующим элементом и заголовком первого потомка раздела. Это точка зрения в отношении вашей оценки содержания. Программы чтения экрана организуют сайт в зависимости от того, в каком порядке вы выложите документ; Однако не все будут делать это одинаково. HTML4 заставил некоторых разработчиков программ для чтения с экрана учитывать позиционирование CSS, но HTML5 пытается исправить это, добавив в игру больше семантических элементов для реорганизации вашего сайта.

Во всяком случае, теперь, когда вам показали, что вы можете делать, и как это работает, вы можете принять собственное решение. Подумайте о том, как вы понимаете свой контент по отношению к контенту вокруг него, и организуйте его соответствующим образом.

Просто чтобы помочь вам немного подробнее, взгляните на спецификацию: http://www.w3.org/TR/html-markup/header.html

0 голосов
/ 26 августа 2011

Интересно почитать на эту тему: http://www.iheni.com/html-5-to-the-h1-debate-rescue/

Используя HTML5, каждый элемент может иметь свой собственный H1, и, в свою очередь, иерархия и вложенность каждого элемента секционирования определяют уровень заголовка каждого H1. Глядя на приведенный выше пример, H1 в пределах ранга будет выше, чем H1 в содержащемся в нем.

0 голосов
/ 26 августа 2011

Заголовок фактической страницы должен оставаться над каждым другим заголовком.

Затем, если у вас есть разные заголовки для разных абзацев или разделов страницы, вы можете написать их перед соответствующим содержанием, следуяпоток текста.

По сути, вы можете разместить теги таким образом, чтобы даже без какого-либо форматирования текст по-прежнему читался правильно.Так, например, сначала заголовок страницы, затем заголовок абзаца и текст абзаца, повторяющийся для каждого абзаца.

...