Предотвращение появления <nav> в качестве "untitled section" на веб-сайтах html5

Я пытаюсь реализовать правильное разделение с элементами и заголовками html5 при достижении дизайна/макета, мой клиент запросил (включая определенные ограничения).

Общий макет будет примерно таким:

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

Теперь я обеспокоен тем, что, если я использую html5 outliner, я получаю навигационную информацию и главный навигатор отображаются как без названия. Следуя иерархической структуре заголовка, я не могу дать им заголовки ниже h2, и, естественно, я бы не стал "заголовком" их вообще и скрывал заголовок css, чтобы "заголовок" их чувствовал неправильно.

Какой лучший способ оставаться семантически правильным, подтвердить стандарты seo и предотвратить их появление в виде незарегистрированных разделов?

Ответ 1

По-видимому, элементы nav не имеют названия, поскольку они являются элементами секционирования.

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

В этом случае вы можете сделать следующее...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

Затем скройте h2 с помощью css.

Кстати, вы должны, вероятно, изменить div на section, чтобы быть более смысловым... здесь

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>

Ответ 2

Вот рекомендуемый подход от w3c - как упоминалось в их курсе edx.

ЛУЧШАЯ ПРАКТИКА 1: Чтобы НЕ отображать содержимое заголовка на экране, рекомендуемый метод описан в в этой статье Стив Фолкнер. Не используйте отображение: нет или видимость: скрыты в вашей таблице стилей CSS, так как в этом случае содержимое заголовка никогда не будет озвучено с помощью экранных устройств и, в более общем плане, с помощью вспомогательных технологий.

Пример кода в статье:

.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>

Ответ 3

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

Кроме того, учитывая, что вы используете только 3 уровня в своем примере, вы можете очень легко поднять ваши статьи до h3 или h4, чтобы разместить заголовки навигатора. Наличие заголовка (скрытого или иного) действительно является правильным способом семантического названия ваших элементов секционирования.

http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

Ответ 4

Я создал класс CSS для заголовков, которые были важны только для контуров HTML5.

h1.outline, .outline {
  display: none;
}

... затем в html

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

... в контуре, это отображается как

 1. --- Main Navigation ---

Изменить: класс "nocontent" важен, чтобы алгоритмы Google SEO знали, что в теге есть "шаблонный" контент, не имеющий отношения к SEO, поэтому он не подсчитывается за или против вашего рейтинг поисковой системы сайта. https://support.google.com/customsearch/answer/2364585?hl=en В соответствии со страницей, это нормально сочетать другие классы с "nocontent".

Изменить: я не сделал следующий шаг на своем собственном сайте, и в соответствии с Инструментами Google для веб-мастеров он не был оштрафован, а скрытые заголовки не создавали никаких предупреждений или флагов. Однако Google документация рекомендует этот последний шаг, чтобы включить класс "nocontent".

Чтобы включить класс nocontent для целей ранжирования Google, измените файл контекстного сайта:

На панели управления в левом меню выберите Дополнительно.
В разделе Загрузить контекст нажмите Загрузить в формате XML.
Отредактируйте загруженный файл контекста cse.xml, чтобы добавить новый атрибут enable_nocontent_tag = "true" тегу CustomSearchEngine. Для пример, изменить на ,
В разделе Загрузить контекст нажмите Загрузить и загрузите обновленный файл cse.xml.

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