Семантика сайта. Когда, что следует применять?

vadim.gladikov · 27.Март.2017 18:48:33

Пытался найти исчерпывающую информацию по применению тегов HTML5. В результате нашёл много противоречий и непоняток, которые буду выкладывать в надежде, что здесь на форуме смогу получить разъяснения.
Чужие утверждения буду выкладывать в виде цитат.

На сон грядущий, такие вопросы

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

Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата. http://vaden-pro.ru/blog/html/logicheskaya-struktura-stranicy-html5

Вопрос1: Если это сделано для роботов, значит должны быть чёткие инструкции, как те или иные блоки воспринимаются роботами - индексируются ли, игнорируются, являются приоритетными? Как минимум ребята с Гугла должны видео на ютюбе выкинуть. Может кто располагает ссылками?

Вопрос2: Выложите ссылки на сайты, которые можно считать эталонно (или хотя бы неплохо) свёрстанными под HTML5, чтобы посмотреть код и применение article, section, aside, header и footer

Ineska · 27.Март.2017 19:01:29

По поводу первого вопроса не подскажу.
В качестве образца верстки по html5 могу предложить вам посмотреть страницу блога Академии. По-моему, неплохой пример.

vadim.gladikov · 28.Март.2017 17:09:23

Спасибо. Несколько вопросов по коду этой страницы:

Для <html> прописан класс .muller, а в CSS такой селектор .muller body Что существует такая практика назначать классы для <html> ? Нельзя было просто прописать селектор body?
<time> можно считать самостоятельным строчным элементом, которому можно прописывать класс и стилизовать, или его обязательно нужно заключать в <p>?
Всем <article> и <aside> прописан атрибут role. Судя по его значениям, именно он определяет для поисковиков суть содержимого?
Интересно было бы глянуть страницы с <section> и вложенными хедерами и заголовками.
Здесь использовали <nav> для нескольких блоков. Мне попадались рекомендации - для страницы использовать один раз. этот тег.
Я так понимаю, для поисковика подобная информация будет типа карты сайта. Как проверить, что не намудрил со структурой? Валидаторы это в состоянии выявить?

Ineska · 28.Март.2017 18:17:39

Знаю такую практику. Дело в том, что в многостраничных сайтах у каждой отдельной страницы есть свой body, а css-файл на все страницы один. Стили разных страниц могут отличаться (в данном случае шрифты). Чтобы они не конфликтовали, добавляется класс.
Если у вас элемент состоит только из даты/времени, тогда только <time>. Если дата/время находятся в составе предложения, тогда еще <p> конечно.
Не знаю как для поисковиков, но судя по этой информации, атрибут role больше нужен для пользователей с ограниченными возможностями, которые имеют доступ к контенту сайта с помощью экранных дикторов.
Таких страниц видеть не приходилось, наверное потому что вложенность стала возможной недавно, в html 5.1. Есть только статья с примером использования: http://frontender.info/document-outlines-in-html-5-1/
Валидатор проверяет структуру только на соответствие спецификации, исходя из указанного типа документа.
Спецификация не запрещает использование тега nav несколько раз.

vadim.gladikov · 28.Март.2017 18:37:03

Еще небольшой вопросик. Для той страницы в <html> был прописан атрибут lang=“ru”. А затем этот атрибут встретился и в <article> Является ли необходимым прописывать этот атрибут для статьи, если язык страницы и статьи один и тот же?

vadim.gladikov · 28.Март.2017 18:46:00

И еще момент. В стилях всем этим новым тегам прописан был блочный тип . Это сделано для старых браузеров?

Ineska · 28.Март.2017 18:52:08

Да, блочный тип новым семантическим тегам прописан для старых браузеров. Об особенностях использования атрибута lang не знаю. Если найдете, поделитесь с сообществом.

vadim.gladikov · 08.Апрель.2017 17:15:55

На w3c приведён такой кусок кода, для наглядности применения <article>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>article</title>
</head>
<body>
 <article itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">The Very First Rule of Life</h1>
    <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
    <link itemprop="url" href="?comments=0">
   </header>
   <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
   <p>...</p>
   <section>
    <h1>Comments</h1>
    <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
     <link itemprop="url" href="#c1">
     <footer>
      <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
       <span itemprop="name">George Washington</span>
        </span></p>
      <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
     </footer>
     <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
     <link itemprop="url" href="#c2">
     <footer>
      <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
       <span itemprop="name">George Hammond</span>
        </span></p>
      <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
     </footer>
     <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>
</body>
</html>

Насколько целесообразно заключать вложенные <article> в единственный блок <section> ?
И нельзя ли было сверстать по такой схеме:

<body>
  <article> - весь документ
    <article> - комментарии
      <section> 
        Коммент 1
      </section>
      <section> 
        Коммент 2
      </section>
    </article>
  </article>
</body>

Maximillian · 07.Сентябрь.2017 05:05:26

Хотел создать отдельную тему, но мой вопрос подходит под заголовок данной темы. А именно вопрос в следующем:
из раздела “Знакомство с HTML5” есть контент ознакамливающий нас с тегами nav & aside. Но судя по описанию разница между ними “никакая”. Навигационные блоки не могут что ли являться сайдбарами или боковыми панелями? Так это они и есть, разве нет?
Буду рад разъяснению.