О нас Блог Кейсы Отраслевые решения Контакты
+7 499 3467460
Заказать проект

HTML5 Семантическая вёрстка

(180)
CRM (18)
WEB-разработка (28)
Битрикс24 (52)
Маркетинг (26)
Приложения (10)
Проекты (19)
События (22)

21 Августа 2018

 следующая статья
Николай Гоцалюк

Тeam lead Frontend

Николай Гоцалюк
HTML5 Семантическая вёрстка

Всю жизнь человек старается делать все согласно здравой логики. Если он видит красную стену, он так и скажет: “я вижу красную стену”. Никто не будет говорить вместо этого о “розовом потолке”, если его там тоже не будет. Видишь что-то и называешь это своим именем, - это семантика. Существует даже целая наука в лингвистике, которая это изучает.

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

Для начала правильно будет ответить на вопрос:


"Зачем нужна семантическая разметка страниц?"


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

HTML5 и семантика. Что нового?

Даже сегодня еще можно встретить множество страниц с таким HTML-кодом:

“<div id = "nav"> <div class = "header"> <div id = "footer">”. Он используется для обозначения навигации хедера и футера.

<html>

<html>

  <head>

      <title>...</title>

  </head>

 <body>

   <div id="header">... </div>

   <div id="main-content"> ...</div>

   <div id="footer"> ... </div>

 </body>

</html>


HTML5 для тех же целей предлагает нам новые семантические элементы: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.

И даже сегодня при, уже казалось бы, “развязанных руках”  у разработчиков, SEO специалисты не могут получить 100% семантически валидной верстки. В основном правильно используют <footer>, <header>, <nav>, реже или неправильно используют  <aside> <main>  <section>. Остальные элементы если не совсем редко, то вообще не используют.

Пример правильной семантической разметки HTML5:

<html>

    <head>

      <title>...</title>

 </head>

 <body>

      <header>...</header>

      <nav>...</nav>

      <main>...</main>

      <footer> ... </footer>

 </body>

</html>


Тег <nav>

      <nav>
 <a href="#">...</a>
 <a href="#">...</a>
 <a href="#">...</a>

      </nav>


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

ВАЖНО! Не все наборы ссылок нужно оборачивать тегом <nav>. Если такие элементы как, к примеру <footer> и <header> справляются с положенными на них задачами в единичном экземпляре, то <nav> можно использовать больше одного раза на страницу. Можно размещать в <header>, но зачастую выносят после него.

<body>

        <article>
   <header>...</header>
   <nav>...</nav>

         <aside>...</aside>
   <main>...</main>
   <footer> ... </footer>

        </article>
</body>


Основной контент


     <main>
   <h1>...</h1> 
   <p>...</p> 
   <section> 
     <h2>...</h2> 
     <p>...</p>    

         </section>

         <section>

         <h2>...</h2>

         <p>...</p>

        </section>

        <section>

        <h2>...</h2>

        <p>...</p>

   </section>

</main>


Элемент <article> представляет из себя независимую или самостоятельную контентную композицию многоразового использования. Он может быть, к примеру, постом на форуме, записью в блоге, газетной статьей, отзывом пользователя или отдельным виджетом. Разрешается делать вложения один <article> в другой. Однако, в таком случае нужно, чтобы дочерние  элементы несли в себе контент, который семантически связан с родителем. Например, цепочка комментариев.

Когда основное наполнение страницы является самостоятельным элементом (например виджет), то его можно “обернуть” в  <article>. Но в большинстве случаев это будет технически лишним.

Элемент <section> является ничем иным  как блоком страницы или тематической группой контента обычно с заголовком <h> группы.

Когда вам нужен элемент только для стилизации или сценария скрипта, то рекомендуется использовать <div>  вместо <section>.

Элемент <aide> является дополнительным не самостоятельным  разделом страницы который по смыслу привязан к основному контенту. К примеру можно использовать как выносную цитату, боковые панели для рекламы, фильтров и сортировок товаров или организации навигации.  Нецелесообразно использовать элемент как основной контент. Элемент <main> можно использовать как основной контейнер для контента страницы. Хотя ограничений, что касаются количества даных элементов на странице нет, разработчики рекомендуют использовать его в одиночном количестве.

<details> - выпадающее меню или  дополнительные детали которые юзер может скрыть или показать.

<summary> используется как видимый заголовок элемента <details> по клику на который можно показать/спрятать его.

<details>
       <summary>Copyright 1999-2014.</summary>
         <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>


 

<figure> и <figcaption>

<figure>
       <img src="pic.jpg" alt="<span style="color: #37b44a;">The Picture" width="300" height="200">
       <figcaption>The Picture 2009</figcaption>
</figure>



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

<mark> используется для выделения важного текста.

Тег <time> выделяет дату / время читаемую человеком. Также может использоваться с атрибутом datetime для уточнения времени машинно-читабельным способом. Например, клиент-программа сможет добавить напоминание или записать дату рождения в календарь пользователя автоматически. А поисковые системы смогут выдавать более глубокие результаты поиска.

<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>


Подводя итог под написанным выше, можно констатировать, что все элементы важны по-своему. Их нужно знать и использовать в соответствии с предназначением. Огромное количество умов по всему миру специально придумывают новые теги и варианты их использования, чтоб и разработчики и пользователи получили более качественный продукт. Однако, в погоне за новыми технологиями, не стоит забывать о своеобразности браузеров! Некоторые из них “не знают” новых (а иногда - и старых) тегов и выводят информацию не корректно.



следующая статья

Похожие статьи

Записаться на консультацию

Мы свяжемся с вами в течении 10 минут