предотвращение появления <nav>в качестве «раздела без названия» на сайтах html5 - PullRequest
Новая
       23

предотвращение появления <nav>в качестве «раздела без названия» на сайтах html5

21 голосов
/ 25 августа 2011

Я пытаюсь реализовать правильное секционирование с помощью элементов секционирования 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 и не допустить появления этих разделов в виде разделов без названия?

Ответы [ 4 ]

7 голосов
/ 25 августа 2011

Очевидно, что 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 s с помощью 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>
5 голосов
/ 27 июня 2015

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

ЛУЧШАЯ ПРАКТИКА 1: Чтобы НЕ отображать содержимое заголовка на экране, рекомендуемая техника описана в эта статья Стива Фолкнера .Не используйте display: none или visibility: скрыто в вашей таблице стилей 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 голосов
/ 16 апреля 2013

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

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

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

1 голос
/ 22 ноября 2013

Я создал класс 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" важен , чтобы позволить алгоритмам SEO Google знать, что в теге есть "шаблонный" контент, не относящийся к SEO, поэтому он не учитывается для или против рейтинга вашего сайта в поисковых системах. https://support.google.com/customsearch/answer/2364585?hl=en Согласно странице, можно комбинировать другие классы с "nocontent".

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

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

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

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

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

Похожие темы

...