Причины не использования CSS для визуального переупорядочения порядка элементов HTML

В настоящее время мы немного обсуждаем в офисе об использовании CSS для визуального переупорядочения элементов на странице.

На самом базовом уровне член нашей команды хочет структурировать HTML как это (этот запрос основан исключительно на проектной перспективе)

<div class="secondary-content">
    <h2>Secondary content heading</h2>
    <p>This is the secondary content</p>
</div>
<div class="main-content">
    <h1>Main heading</h1>
    <p>This is the main content</p>
</div>

а затем используйте CSS для визуального размещения div main-content до secondary-content.

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

В качестве стороннего разработчика мои основные проблемы касаются доступности

  • Считыватели экрана/вспомогательные технологии сначала попадут в secondary-content. Для меня это сродни открытию книги, начиная с главы 4, а затем возвращаясь и читаю главы 1, 2, 3, 5, 6 и т.д.
  • Структура заголовка страницы будет разделена (H2 до H1 и т.д.)
  • Если в secondary-content есть контент, для которого требуется информация от main-content, это будет путать для пользователей с отключенными/вспомогательными технологиями CSS и т.д.

Однако настоящая горячая кнопка для людей в бизнесе - это Google/SEO. Поэтому кто-нибудь знает какие-либо хорошие аргументы/статьи о том, почему писать HTML в плохо структурированном виде негативно повлияет на наш SEO?

ОТВЕТЫ

Ответ 1

[Будет ли] писать HTML в плохо структурированном виде негативно повлияет на наш SEO?

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

Вот что говорится в руководстве Google для веб-мастеров:

  • Создайте полезный, богатый информацией сайт и напишите страницы, которые четко и точно описывают ваш контент. [Страницы, содержание которых запутывает фактическое визуальное упорядочение, не ясно и точно не описывают их содержание.]

  • Сделайте сайт с ясной иерархией и текстовыми ссылками. [Ввод <h2> перед тем, как a <h1> нарушает иерархию.]

  • Используйте текстовый браузер, такой как Lynx, чтобы изучить ваш сайт, потому что большинство поисковых роботов видят ваш сайт так же, как Lynx. [Кто-то, использующий текстовый браузер, наверняка будет смущен причудливыми схемами переупорядочения контента.]

Итак, короче говоря, вы вмешиваетесь в "ясную иерархию", которую поисковые системы пытаются индексировать. Это явно нежелательно.

Чтобы ответить на ваш более общий вопрос:

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

В основном, документы HTML - это только те документы, которые предназначены для передачи семантической информации через их структуру.

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

  • В книге вы ожидаете, что глава 7 появится перед главой 6?
  • В газетной статье вы ожидаете, что тело появится перед заголовком?
  • В фильме вы ожидаете, что закрывающие кредиты поступят перед титульной картой?

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

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

И вам будет трудно сделать эквивалентность между фильмом, который предназначен для развлечения, и HTML-документом, который предназначен для информирования.

Ответ 2

Это кажется ужасной идеей. В основном из-за удобочитаемости. Логически не имеет смысла, чтобы вторичное существо было раньше первичного. Если бы я был веб-разработчиком, который смотрел код страницы, и я увидел это, единственное, что я подумал бы в этот момент, - "что".

Это также кажется совершенно бессмысленным, если вы все равно перемещаете визуальные эффекты с помощью CSS. Это не похоже на то, что вам нужно поставить вторичную информацию до первичной, насколько это происходит.

Ответ 3

Это не вопрос, который имеет окончательный ответ. Причина в том, что некоторым форматам макета потребуется переупорядочение источника. Если secondary-content необходимо плавать с main-content, текущим вокруг него (в сторону и ниже), , то он должен быть помещен первым в порядке источника. В этом нет выбора.

Лучше ли размещать контент в исходном порядке, если возможно, да. Всегда возможно, нет.

См. пример: http://jsfiddle.net/ceHGX/3/

Ответ 4

Вторичный ответ от Джона Фэминеллы, WCAG 2.0 содержит несколько методик (против) переупорядочивания контента.
Вот несколько ссылок, связанных с доступностью:

С точки зрения CSS, что вы подразумеваете под

визуально размещайте основной контент div до второго содержимого

Являются ли они столбцами, плавающими (или отображаемыми: inline-block или table-cell, что угодно) или один над другим? В последнем случае любое текстовое масштабирование (IE7, IE6, Пользователи ZoomText, все пользователи, которые отключили графический масштаб, чтобы избежать горизонтального прокрутки и нуждаются в большом количестве масштабирование) сильно нарушатся. Если бизнес интересует только Google/SEO, расскажите им, сколько PARTIALLY зрячих пользователей есть в вашей стране. Я считаю, что в десять раз больше слепых пользователей. Не говоря о старших, таких как наши (великие) родители.
Желают ли они их в качестве клиентов или, может быть, ваша компания достаточно богата и не нуждается в заботе о них и их деньгах?;)