Должны ли мы пытаться использовать все H1 до H6 на веб-сайте? - PullRequest
6 голосов
/ 26 января 2010

Должны ли мы использовать все H1-H6 на веб-сайте?

Обычно я использую от h1 до h2. Теперь, как судить и решать, где использовать H3 до h6.

мы должны использовать как это

h3 {display:inline}

<div id="content">
  <h3> some text in bold:</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
  <h3> some text in bold:</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
</div>

или это

span {font-weight:bold}

<div id="content">
  <p><span> some text in bold:</span>
    Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. 
    </p>
  <p><span> some text in bold:</span>
    Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. 
    </p>
</div>

чтобы получить результат

альтернативный текст http://easycaptures.com/fs/uploaded/226/1452064646.png

Оба метода действительны для W3C, с помощью css я могу добиться одинакового вида из обоих методов, так что семантически и доступно?

Ответы [ 8 ]

17 голосов
/ 26 января 2010

Если текст функционирует как уровень заголовка ниже уровня H2, это будет H3. Промыть / повторить для H4 до H6.

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

5 голосов
/ 21 февраля 2010

Заголовок - это заголовок раздела страницы. Он описывает этот раздел в нескольких словах.

Нет простого правила, которое нужно выработать, если данный фрагмент текста, выделенный жирным шрифтом, лучше всего помечать как заголовок.

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

Один из способов решить, должен ли какой-либо текст быть помечен как заголовок, состоит в том, чтобы представить, как будет выглядеть документ, если пользователь сможет видеть только его контур, сгенерированный из его заголовков. Э.Г.

  • <h1>
    • <h2>
      • <h3>
      • <h3>
    • <h2>
      • <h3>
        • <h4>
    • <h2>
      • <h3>

Будет ли текст иметь смысл в схеме? Или это не заголовок, а просто жирный шрифт, потому что дизайнер хотел подчеркнуть это?

3 голосов
/ 26 января 2010

При написании страниц я стараюсь думать об этом, как о написании книги, если контент связан с родительским разделом таким образом, чтобы заслужить свой собственный раздел, тогда используйте H3, H4 ... в противном случае вы можете использовать другой HTML теги, такие как dd (список определений) или ul (неупорядоченный список).

Конечно, если вы собираетесь заниматься SEO, всегда используйте h1 и h2 для заголовков основного контента (или просто информацию, которую вы хотите, чтобы пользователь нашел). А затем, как уже говорилось ранее, попытайтесь заставить его почувствовать себя книгой (публикацией).

1 голос
/ 26 января 2010

С точки зрения доступности не используйте несколько уровней заголовков, если это не имеет смысла для вашей структуры контента.Например, основной документ должен иметь заголовок первого уровня, основные разделы документа должны иметь заголовок второго уровня, а подразделы должны иметь заголовок третьего уровня.Википедия хорошо справляется с этой задачей, например, см. Следующую ссылку, которая имеет разделы и подразделы.http://en.wikipedia.org/wiki/Database_normalization

1 голос
/ 26 января 2010

HTML - это язык разметки , что упрощенно означает описание вашего контента семантически . CSS предназначен для стилизации вашего контента, то есть visual . Точно так же, как <p> означает, что блок текста является параграфом <Hn> означает, что блок текста является заголовком.

Заголовки описывают структуру вашего документа, древовидную структуру данных, если хотите.

Расширение веб-разработчика для Firefox имеет приятную функцию, которая позволяет вам видеть размеченную структуру документа. Вы можете найти его в разделе Информация-> Структура документа.

1 голос
/ 26 января 2010

Обратите внимание, что поисковые системы, такие как Google, используют теги заголовков (H1) при обработке страниц для индексации, ранжирования страниц и т. Д.

См. Как Google использует теги HTML для улучшения поисковой системы?

1 голос
/ 26 января 2010

Вы используете их по мере необходимости, так же, как и с любым другим тегом (за исключением обязательных тегов: html, head и т. Д.) Используйте их, когда они вам нужны, но используйте их правильно.

0 голосов
/ 26 января 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...