Про нас Кейси Блог Контакти
+380 44 3900439
Замовити проєкт

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

(310)
CRM (21)
WEB 3 (12)
WEB-розробка (56)
Бітрікс24 (92)
Додатки (9)
Маркетинг (34)
Новини (10)
Події (30)
Проекти (26)

21 Серпня 2018

 наступна стаття
Микола Гоцалюк

Тeam lead Frontend

Микола Гоцалюк
HTML5 Семантична верстка

Все життя людина намагається робити все згідно зі здоровою логікою. Якщо вона бачить червону стіну, то так і скаже: «Я бачу червону стіну». Ніхто не буде говорити замість цього про «рожеву стелю», якщо її там теж не буде. Бачиш щось і називаєш це своїм ім'ям — це семантика. Існує навіть ціла наука в лінгвістиці, яка це вивчає.

Але не тільки в мовознавстві є подібне. У веб-розробці теж присутнє поняття «семантичної верстки». І ось з тепер ми поговоримо про це більш детально.

Для початку правильно буде відповісти на питання: «Навіщо потрібна семантична розмітка сторінок?»

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

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

Навіть сьогодні ще можна зустріти безліч сторінок з таким HTML-кодом:

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

<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>.

Елемент <aside> є додатковим не самостійним розділом сторінки, який за змістом прив'язаний до основного контенту. Наприклад, можна використовувати як виносну цитату, бічні панелі для реклами, фільтрів і сортувань товарів або організації навігації. Недоцільно використовувати елемент як основний контент. Елемент <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 хвилин