Семантична верстка – навіщо вона потрібна та які принципи її застосування?

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

У цій статті ми детально розглянемо, що таке семантична розмітка та навіщо вона потрібна. Крім того, на прикладах розберемо, як правильно зверстати сторінку з точки зору семантики.

Що таке семантична верстка?

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

Наведемо приклад:

1.

                    
<aside>    
  <h3>Цікаві факти</h3>    
  <p>Чи знаєте ви, що слони – єдині тварини, які не можуть стрибати?</p>
</aside>

                

2.

                    
<div class="content">    
  <h3>Цікаві факти</h3>    
  <p>Чи знаєте ви, що слони – єдині тварини, які не можуть стрибати?</p>
</div>

                

У першому коді використано тег <aside>, він дає нам зрозуміти, що контент є другорядним тож має менше значення у змісті сторінки. У другому ж прикладі ми використали <div> з класом “content”, у якому не вказано про важливість цього інформаційного блоку.

Відвідувач сайту візуально не помітить різниці, оскільки завдяки мові стилів CSS ми можемо однаково оформити ці два коди. Проте для пошукових роботів та спеціальних програм, які зчитують код, тег <div> не надає жодного семантичного значення.

HTML5 – актуальна версія мови HTML

HTML5 є актуальним стандартом вебу ще з 2014 року. Розробка над п’ятою версією HTML тривала 14 років і стала стрибком у сучасній розробці. У цьому оновленні розробники додали нові семантичні елементи для кращої структуризації інформації на сторінці, а також для стилізації елементів. Теги останньої версії HTML підтримуються всіма найпопулярнішими браузерами.

Ця версія покращила семантичну верстку, оскільки:

• Код став простішим;
• З’явилася вбудована підтримка мультимедіа;
  
• Розширився прикладний програмний інтерфейс (API)
  

Навіщо потрібна семантична верстка?

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

Порівняймо два підходи: текстове позначення цифр та використання тегу <time>. Обидва підходи використовуються для відображення цифр, проте звичайне текстове поле не надає ніякого пояснення про їх сенс, тоді як тег <time> чітко вказує на те, що тут позначено час.

Семантична розмітка дозволяє пошуковим роботам краще розуміти структуру вашої сторінки:

• Які елементи у ній розташовані;
• Що міститься у зображеннях;
  
• Ієрархію контенту – що є важливішим, а що має меншу вагу;
  
• Чи потрібно сканувати гіперпосилання.
  

Завдяки семантичній розмітці ви можете виділити блок з важливою інформацією, який потрібно винести на сторінку пошукової видачі. Як приклад, можна навести “Нову пошту”. При запиті “Нова пошта ціна за доставку” виводиться контент, що відповідає нашій меті, а саме таблиця з тарифами.

Інклюзивність вебсайту. Якщо ви візуально добре оформили сторінку, то звичайний користувач легко зрозуміє її структуру, навіть якщо в коді є помилки. Проте є виняток – відвідувачі сайту, які мають вади зору.

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

Скрінрідер зчитує контент залежно від того, в якому тегу він знаходиться. Якщо текст знаходиться у <h1>, то це головний заголовок; якщо у <nav>, то це навігаційний елемент. Без кодового відокремлення контенту програма надасть його користувачеві як суцільний текст.

Семантична верстка є стандартом. HTML5 вніс нові стандарти, додавши семантичні елементи, які покращують роботу верстальника. Наприклад, раніше для позначення навігаційних елементів використовували конструкцію <div id=”nav”>. Проте вона є застарілою, і код з нею виглядав громіздким, тож на її зміну прийшов простий та зрозумілий тег <nav>.

Основні теги семантичної розмітки

У верстальників-початківців нерідко виникає плутанина при виборі правильних тегів для розмітки контенту на сторінці. Найчастіше труднощі виникають у використанні елементів <article> та <section>. Щоб ви краще розуміли, в яких випадках які семантичні елементи необхідно використовувати, ми пропонуємо розглянути наступний перелік основних тегів для семантичної верстки.

<header>

У хедері (шапці) розташовують навігаційні елементи, які дозволяють користувачеві переміщатися на інші сторінки сайту, такі як “Блог”, “Про нас”, “Залишити заявку”, “Контакти” тощо. Може використовуватися в будь-якому місці на сайті, але зазвичай він розташований у верхній частині.

<nav>

Виведення навігаційних посилань, які дозволяють користувачеві зручно переміщатися сторінкою та переходити на інші сайти в інтернеті. Зазвичай тег <nav> використовують для позначення головного навігаційного блоку.

<main>

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

<h1-6>

H1 – головний заголовок на сторінці, який описує її основний зміст. Може використовуватись лише один раз.

H2 – другорядний заголовок, що детально розкриває тему. Може використовуватись стільки разів, скільки потрібно для структури сторінки.

H3-6 – підзаголовки для кращого наповнення сторінки, мають меншу важливість у ієрархії.

<article>

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

<section>

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

<aside>

Виділення другорядного контенту у бічній панелі сторінки. Тег дає зрозуміти пошуковим системам, що розміщений в <aside> контент є менш важливим для індексації. Другорядний контент не обов’язково повинен стосуватися основного змісту сторінки, оскільки може містити рекламу або сторонні посилання.

<footer>

Нижня частина сайту, де розташовують додаткову інформацію про сторінку. Зазвичай цей елемент використовується на сторінці один раз, оскільки перенасичення футерами може погано вплинути на утримання уваги користувача. У нижній частині сайту міститься така інформація, як контакти, адреса, логотип, посилання на соціальні мережі та сторонні ресурси тощо.

Правильне застосування семантичних HTML тегів допоможе вам розробити доступну та зрозумілу розмітку сайту як для людей, так і для пошуковиків.

Приклади семантичної верстки

Від теорії перейдемо до практики. Пропонуємо вам переглянути приклади використання основних тегів семантичної розмітки:

header

                    
<header>
    <a class="logo" href="#">Вихідні на природі</a>
</header>

<section>
    <h1>Наш вихідний</h1>
    <time datetime="2024-07-15">15.07.2024</time>
    <p>Вчора ми провели суботній вечір разом з усією родиною! Я люблю такі вечори, вони заряджають мене позитивними емоціями.</p>
</section>

                

nav

                    
<nav>
    <ol class="list">
        <li class="list_item"><a href="#">Жіночий одяг</a></li>
        <li class="list_item"><a href="#">Сукні</a></li>
        <li class="list_item">Сукня black &amp;amp;amp; white</li>
    </ol>
</nav>

<h1>Сукня black &amp;amp;amp; white</h1>
<p>Стильна сукня з коміром, виготовлена з льону. Ідеальний варіант на спекотну, літню пору.</p>

                

section

                    
<h1>Що потрібно для комфортної подорожі?</h1>

<section>
    <h2>Вступ</h2>
    <p>Цей посібник було створено для туристів-початківців, щоб допомогти їм у підготовці до подорожі.</p>
</section>

<section>
    <h2>Що потрібно враховувати у подорожі автобусом?</h2>
    <p>Ви повинні ретельно підготуватись до подорожі цим транспортним засобом, щоб забезпечити собі максимальний комфорт...</p>
</section>

                

footer

                    
<article>
    <h2>Маєте запитання?</h2>
    <p>Заповніть форму, і наш менеджер зв’яжеться з вами якнайшвидше.</p>
</article>

<footer>
    <p>Atlasiko Inc  Copyright © 2024</p>
</footer>

                

Як створити семантичну верстку сайту?

Щоб створити семантичну верстку, недостатньо просто вписати семантичні HTML теги в код. Необхідно детально розглянути макет дизайнера, щоб визначити структуру майбутньої сторінки та підібрати ті теги, які найкраще її опишуть.

Основними етапами у семантичній розмітці є:

1. Визначення структури сторінки та створення її каркасу з використанням тегів <head>, <nav>, <main>, <article>, <section>, <aside> та <footer>.
2. Створення головного заголовка, який описує вміст сторінки, та підзаголовків, в яких буде розміщено основний контент. Для цього використовуйте теги <h1> - <h6>.
   
3. Структуризація контенту та виокремлення важливої інформації для полегшення її сприйняття користувачем. Організуйте контент за допомогою тегів <p>, <ul>, <ol>, <li>, <mark> та <strong>.
   
4. Використання додаткових семантичних тегів для більшої наповненості контентом, наприклад <time>, <figure>, <figcaption>, <details>, <summary> тощо.
   

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

• Elements – перегляд та редагування HTML і CSS розміток;
• Console – можливість виконувати команди JavaScript, переглядати та налагоджувати скрипти;
  
• Sources – перегляд завантажених ресурсів на сторінці, такі як файли з HTML, CSS та JavaScript кодами;
  
• Network – можливість переглядати мережеві запити: їх заголовки, статус та час завантаження;
  
• Performance – аналітика продуктивності сторінки, час її завантаження та рендерингу.
  

Інструмент також надає можливість переглядати, як той чи інший елемент описаний в HTML коді завдяки функції Inspector.

Поради у створенні семантичної розмітки

Якщо ви працюєте над великим проєктом, варто дотримуватись простоти коду, перевіряти його на наявність помилок, а також слідкувати за правильною вкладеністю тегів. Якщо цього не дотримуватись, вам буде складно орієнтуватися в коді.

Наведемо приклад того, як теги можуть вкладатись один в одного:

                    
<article>
    <h1> заголовок </h1>
    <div>
      <p> контент </p>
    </div>
<article>

                

Щоб перевірити можливість вкладеності тегів, ви можете скористатися допоміжним інструментом “Caninclude”. Це онлайн-платформа для перевірки вкладення одного тегу в інший. Після порівняння наданих користувачем тегів “Caninclude” видає сторінку з вердиктом.

Ви також можете використовувати у роботі інструменти для перевірки валідації коду, наприклад W3C. Це онлайн-сервіс для перевірки коду на правильність та коректність відображення.

Висновки

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

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

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