Официальные принципы использования заголовков?

W3C явно не говорит, как именно мы должны использовать заголовки, или я не могу найти такую ​​информацию.

Ресурсы:

Это очень кратковременно и вызывает много вопросов, таких как:

  1. «Некоторые люди считают, что уровни пропущенных заголовков являются плохими. Они принимают H1 H2 H1 , в то время как они не принимают H1 H3 H1 , поскольку уровень заголовка H2 пропущен. " - так, если мы пропустим их или нет?
  2. При разработке боковой панели - какие заголовки следует использовать? <Код> H2 ?
  3. При разработке нижнего колонтитула - какие заголовки следует использовать? <Код> H2 ?
  4. Заголовки предназначены для использования в списках (например, список сообщений в нижнем колонтитуле)?
  5. Должен ли H1 использоваться только один раз на странице?
  6. При создании «страницы с листами сообщений» - каждая запись обычно состоит из TITLE и EXCERPT - следует ли использовать H1 для заголовков? Или H2 или DIV ?
  7. Поскольку заголовки являются элементами уровня блока, я предполагаю, что ссылки идут внутрь? То же самое для span , которые должны стилизовать заголовки необычным способом?

Если бы кто-нибудь мог пролить свет на это, было бы здорово :) Спасибо.

2
nl ja de
# 1 ... # 6 - «не настоящие вопросы», для # 7 проверьте это: webmasters.stackexchange.com/a/ 20469/8207
добавлено автор Tom Sarduy, источник
Хорошо, измените «не реальные вопросы» на «относительные вопросы» :)
добавлено автор Tom Sarduy, источник
@TomSarduy Если они «не являются реальными вопросами», то что делают заголовки в спецификации? У кого-то, должно быть, была идея, четкое видение, если он представил их. «Не реальные вопросы» звучат так: «они эквивалентны DIV, используйте их, как вам нравится».
добавлено автор Atadj, источник
@TomSarduy Да, теперь это совершенно другое значение :) Я как-то понимаю эту относительность, но я думал, что могу также полагаться на стабильную и согласованную спецификацию (но кажется, что ее просто нет).
добавлено автор Atadj, источник

3 ответы

Вы должны прочитать раздел Заголовки и разделы " спецификация HTML5. Правильное использование заголовков - важный аспект доступности.

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

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

Каждый документ HTML5 имеет контур , который создается с помощью заголовков h1 - h6 hgroup ) и/или элементы секционирования ( section , article , nav , в стороне )). Вы можете думать об этом как о TOC .

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

(1.) John Doe's Example Blog
  (1.1) Navigation
  (1.2) My first year at ACME
  (1.3) Recent blog posts

Это может быть схема следующих примеров документов:

Использование только заголовков:

<body>
  

John Doe's Example Blog

Navigation

My first year at ACME

Recent blog posts

</body>

Использование секционирующих элементов и заголовков с уровнем в соответствии с вычисленным контуром:

<body>
  

John Doe's Example Blog

My first year at ACME

</body>

Использование секционирующих элементов с h1 везде:

<body>
  

John Doe's Example Blog

My first year at ACME

</body>

(Последние два семантически эквивалентны!)

При использовании секционных элементов вы даже можете опустить заголовки вообще, контур все равно будет тем же, хотя «неназванный» (что не очень полезно!):

<body>
  
  
</body>

Это будет соответствующий план:

(1) (Untitled Section)
  (1.1) (Untitled Section)
  (1.2) (Untitled Section)
  (1.3) (Untitled Section)

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

, так что, если мы пропустим их или нет?

Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.

Обратите внимание, однако, в зависимости от того, как именно вы пропустите, особенно если вы не пропустите все заголовки этого уровня, может быть создан неправильный контур. См. Например, этот простой документ:

<body>

Interesting stories

<!-- this is the site heading -->

My first snow

<!-- this is a story -->

What I thought snow would be like

<!-- this is a subsection of that story -->

How I experienced it actually

<!-- also subsection -->

Why I'm disappointed by snow

<!-- also subsection -->

More stories about snow

<!-- this is not part of the story, but a kind of "See also" for the site/page --> </body>

Теперь, если вы измените последний h2 на h3 , вдруг этот раздел «Больше историй» станет подразделением истории. Если вы измените его на h4 , он станет подпунктом.

При разработке боковой панели - какие заголовки следует использовать? <Код> H2 ?   При разработке нижнего колонтитула - какие заголовки следует использовать? <Код> H2

На эти вопросы вообще нельзя ответить. Это зависит от вашего сайта и вашей страницы и вашего контента. Но да, во многих случаях для «типичной страницы» h2 будет правильным кандидатом. Заголовок страницы (не путать с заголовком основного контента!) Является h1 , основным контентом является h2 , вторичный контент (боковая панель и т. Д.) - это h2 . Если вашему нижнему колонтитулу нужен заголовок (не каждый из них), в этом случае это будет h2 .

Заголовки предназначены для использования в списках (например, список сообщений в нижнем колонтитуле)?

Это зависит от содержания и контекста.

Важный вопрос, который вы должны задать (в общем, для всех директив):

  1. Does this content "belong" to the previous heading?
  2. If yes:
    1. Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
    2. Is there no natural "sub-heading" for this content? → don't use a heading here
  3. If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
    • (you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)

Должен ли H1 использоваться только один раз на странице?

Неа. Как я уже говорил, вы можете использовать h1 для all свои заголовки на странице (, если вы используете элементы секционирования!).

При создании «страницы с листами сообщений» - каждая запись обычно состоит из TITLE и EXCERPT - следует ли использовать H1 для заголовков? Или H2 или DIV ?

Вероятно, вы должны использовать элемент article для каждой записи. Таким образом, вы получите заголовок автоматически (= запись в контуре), так сказать, поскольку article является элементом секционирования. Теперь вы можете использовать h1 для него (независимо от того, где размещена статья ), или вы можете использовать рассчитанный уровень курса (если article является прямым дочерним элементом body , вы должны использовать h2 . Если он на один уровень глубже, h3 и т. д.). ,


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

Если вы помечаете веб-страницу, найдите минуту в созданном контуре: имеет ли смысл? Вы понимаете, как структурирована страница, какие разделы она получила? Правильно ли иерархия? В этой схеме отсутствует отдельная область/раздел страницы? Является ли раздел дочерним элементом раздела, к которому он не принадлежит? (например, часто вы видите, что навигация site является дочерним элементом основного содержимого страницы, что, конечно, неверно: обычно они должны быть на уровне same , оба являются дочерними для заголовка сайта ).

3
добавлено
Ваш ответ определенно самый объективный и заслуживающий доверия. Эта страница стала ценным ресурсом сейчас :) Большое вам спасибо за подробное объяснение!
добавлено автор Atadj, источник
@RyanB: Я не хотел передавать, что HTML5 ввел контуры (хотя HTML5, вероятно, является первой спецификацией HTML, которая явно определяет, как создается контур). Вы могли бы сказать, что везде, где у вас есть разные уровни заголовков, у вас тоже есть план, верно?
добавлено автор unor, источник
Фактически контур не является новым для HTML5, датируется 2 или 3
добавлено автор Ryan B, источник
Объяснение определяет? Да, экспликация HTML5 определяет, потому что она объясняет всю концепцию nautural иерархии, которая существует с 1995 года. Yay
, так как я упоминал людей как поток, поэтому h1 будет h1 для всех технологий, кроме движка контуров. Логическое? Неа
добавлено автор Ryan B, источник

1. Некоторые люди считают, что пропустить уровни заголовков - плохая практика. Они принимают H1 H2 H1, пока они не принимают H1 H3 H1, так как уровень заголовка H2 пропускается. "- так, следует ли мы пропустить их или нет?

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

2. При проектировании боковой панели - какие заголовки следует использовать? H2?

I normally put a

in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the

3
добавлено
Спасибо! Особенно полезны ссылки о ролях. Это имеет большой смысл. Итак, да, я обязательно захочу сделать это, как это делают газеты - это самый чистый подход, и здорово, что заголовки и контейнеры допускают большую свободу.
добавлено автор Atadj, источник
добро пожаловать, вы можете изменить принятые ответы, если хотите.
добавлено автор Ryan B, источник

The tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like

is pretty much descriptive for all intents and purposes.

If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5

tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:

  1. Оптимизация в поисковых системах: если вы сделаете часть текста заголовком , вы сообщаете поисковым системам: «Эй, это важно!». В какой степени это имеет значение для другого обсуждения.
  2. Чтение кода: если несколько человек работают над проектом, заголовок - это хороший способ понять, где происходят перерывы в копировании страницы. Вы можете сделать это с помощью к аналогичному эффекту, но для некоторых это перебор.

«Некоторые люди считают, что уровни пропущенных заголовков являются плохими. Они принимают H1 H2 H1, пока они не принимают H1 H3 H1, поскольку уровень заголовка H2 пропускается». - так, если мы пропустим их или нет?

This is at the discretion of the programmer. You might decide to use

for page headings,

for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.

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

Это абсолютно правильно.

The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a

or tag should be used... nightmare fuel!

Если тема, подобная тем, которые были найдены в вопросах 2-6 ​​ выше, не написана на камне, здравый смысл является отказоустойчивым. Это, и поговорить с вашими коллегами и договориться о будущем. Извините, что повторил сам, но стандарты приведены для справки .

Надеюсь, это поможет!

1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing