Валидность веб-страницы HTML5

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

Валидность HTML5

Демонстрация валидной страницы HTML5:

Демо

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



<html lang="ru" class="">


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



<body class="post-123">


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



<body class="post-123" itemscope itemtype="http://schema.org/WebPage">


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

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



<header role="header" itemscope itemtype="http://schema.org/Blog">
<h1 itemprop="headline">
<a href=
http://pixelcom.crimea.ua/"#" title="" rel="home">Название сайта</a>
</h1>
<h2 itemprop="description">Описание сайта</h2>
</header>


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

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



<form action="/" method="get" role="search">
     <label for="search">Поиск:</label>
     <input id="search" type="search">
     <input type="submit" value="OK">
  </form>


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



<nav role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<h3 itemprop="name">Навигация:</h3>
    <ul>
        <li>
          <a href=
http://pixelcom.crimea.ua/"/page-1" title="" itemprop="url">Страница 1</a>
        </li>
        <li>
          <a href=
http://pixelcom.crimea.ua/"/page-2" title="" itemprop="url">Страница 2</a>
        </li>
    </ul>
</nav>


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



<main role="main">
  <article role="article" itemscope itemtype="http://schema.org/BlogPosting">
     <h1 itemprop="headline">Валидная страница HTML5</h1>
     <footer>
         <time datetime="2015-03-18T12:38:01+00:00" itemprop="datePublished">18.03.2015</time>
         Опубликовал:
         <b>
           <a itemprop="author" href=
http://pixelcom.crimea.ua/"/author" rel="author">Имя</a>
         </b>
    </footer>
           <div itemprop="articleBody">
             <p>Текст</p>>
              <h2>Раздел</h2>
               <p>Текст</p>
           </div>
    <section>
         <h2>Похожие страницы</h2>
           <p>Ссылки</p>
    </section>
  </article>
      <aside>
        <h3>Заголовок</h3>
         <p>Текст или ссылки</p>
      </aside>
</main>


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

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



<article>
   <h1>
       Заголовок
       <span>подзаголовок</span>
   </h1>
   <p>текст</p>
</article>


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



<footer role="contentinfo">
  <small>
     <span itemprop="copyrightYear">2015</span> ©
         <span itemprop="copyrightHolder">
         <a title="" href=
http://pixelcom.crimea.ua/"/">Название сайта</a>
    </span>
  </small>
  <address>
          <a href="mailto:js@example.com">Обратная связь</a>
  </address>
</footer>


Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>