Валидность HTML5

Уже не для кого не новость что командой W3C рекомендуется HTML5 как стандарт для разметки веб-страниц. Конечно по названию тега HTML5 можно догадаться для чего он предназначен. Но не все так просто. Для правильного использования тегов HTML5 нужно знать их предназначение. В этой статье демонстрация валидной страницы HTML5 с микроразметкой schema.org.

Оглавление:
  1. Валидная страница HTML5
  2. Заключение

Валидная страница HTML5

Демо

Начнем с самого простого тега html он должен информировать на каком языке содержание веб-страницы и может иметь класс. С появлением микроразметки в html документа можно добавить атрибут, который будет говорить поисковой системе к какому типу относится веб-сайт.

<html lang="ru" class="" itemscope itemtype="http://schema.org/WebPage">
<meta itemprop="description" content="Валидная семантическая страница HTML5 с микроразметкой schema.org" />
<meta itemprop="keywords" content="Валидная, страница, HTML5, теги, микроразметка, schema.org" />

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

<body class="post-123">

Для старых технологий, которые не поддерживают новые семантические теги в них Я добавил роли WAI-ARIA.

Шапка веб-страницы имеет важное значение для сайта, внутри тега header должно быть название и описание. Тегов header может быть больше чем один и может содержать не только название и описание, а еще логотип сайта, меню, поиск, карту, версия для печати и т.д.

<header itemscope itemtype="http://schema.org/Blog">
<figure role="banner">
   <img src="logo.png" alt="" height="50" width="50">
</figure>
<h1 itemprop="headline">
       <a href="#" title="" rel="home" itemprop="url">Валидная страница HTML5</a>
</h1>
   <h2 itemprop="description">Валидная семантическая страница HTML5 с микроразметкой schema.org</h2>
</header>

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

Поиск по сайту:

<form action="/" method="get" accesskey="7" name="search">
     <label for="search">Поиск:</label>
     <input id="search" type="search" lang="ru" aria-required="true">
     <input type="submit" value="OK">
</form>

Тег nav применяется для навигации по страницам, если сайт имеет больше чем одну страницу или больше чем один раздел одностраничного сайта. Тегов nav может быть больше чем один.

<nav>
<ul aria-label="Меню" role="menubar" >
   <li role="presentation" itemscope itemtype="http://schema.org/SiteNavigationElement"> 
      <a href="/page-1" title="" itemprop="url" role="menuitem"><span itemprop="name">Страница 1</span></a>
   </li> 
   <li role="presentation" itemscope itemtype="http://schema.org/SiteNavigationElement"> 
      <a href="/page-2" title="" itemprop="url" role="menuitem"><span itemprop="name">Страница 2</span></a> 
   </li> 
</ul>
</nav>

Команда W3C, именно им Я отдаю предпочтение, рекомендует в разметке веб-страницы применять только один тег main и может содержать:

<main>
  <article role="main" itemscope itemtype="http://schema.org/NewsArticle">
   <header>
     <h2 itemprop="headline">Валидная страница HTML5</h2>
            <time class="updated published" datetime="2015-03-18T12:38:01+00:00" itemprop="datePublished">18.03.2015</time>
              Опубликовал:
              <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person"> 
                 <span class="fn" itemprop="name">Виктор</span>
              </span>
   </header>
   <div role="article" itemprop="articleBody">
    Текст
       <h2>Раздел</h2>
    Текст
   </div>

   <section>
       <h2>Похожие страницы</h2>
    Ссылки
   </section>
</article>

<aside>
  <div role="complementary">
       <h3 itemprop="name">Заголовок</h3>
     Текст или ссылки
</div>
</aside>
</main>

Команда W3C описывает элемент main как основной контент страницы. А сообщество WHATWG элемент main описывает как контейнер для доминирующего содержания другого элемента, не имеет никакой ценности и может использоваться больше чем один. Как то так.

Здесь главное понимать что теги article, section, aside должны иметь заголовки h1 .... Кроме этого заголовки не могут быть друг за другом, между ними должен быть обязательно текст. Если не сходится, следует привязать текст к родителю вот таким способом:

<article>
    <h1 itemprop="headline"> 
       Заголовок 
       <span>подзаголовок</span> 
   </h1> 
       текст 
</article>

Нижний колонтитул имеет особое значение и также не мало важное. Существует много вариантов оформить footer, содержать он может следующие теги:

<footer>
  <small role="contentinfo">
     <span itemprop="copyrightYear">2015</span> ©
     <span itemprop="copyrightHolder">
         <a title="" href="/" itemprop="url">Название сайта</a>
    </span>
  </small>

  <address>
          <a href="mailto:js@example.com">Обратная связь</a>
  </address>
</footer>
к меню ↑

Заключение

В примерах важные детали валидной страницы с поддерживаемыми в новых браузерах тегами HTML5 и микроразметкой schema.org. Надеюсь Вы узнали для себя что-то новое. Если произойдут изменения в семантической разметки они будут не существенные, Я постараюсь вовремя информировать Вас о всех изменениях в HTML5.