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> </nav> |
Використовується для уточнення набору посилань навігації по сайту.
ВАЖЛИВО! Не всі набори посилань потрібно обертати тегом <nav>. Якщо такі елементи як, наприклад <footer> і <header> справляються з покладеними на них завданнями в одиничному екземплярі, то <nav> можна використовувати більше одного разу на сторінку. Можна розміщувати в <header>, але часто виносять після нього.
|
<body>
<article>
<aside>...</aside>
</article> |
|
|
Основний контент
<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> |
<figure> і <figcaption>
|
<figure> |
Таким чином, елементи можуть використовуватися для підпису картинок, діаграм, таблиць і т.д.
<mark> використовується для виділення важливого тексту.
Тег <time> виділяє дату / час читану людиною. Також може використовуватися з атрибутом datetime для уточнення часу машинно-читабельним способом. Наприклад, клієнт-програма зможе додати нагадування або записати дату народження в календар користувача автоматично. А пошукові системи зможуть видавати глибші результати пошуку.
|
<p>We open at <time>10:00</time> every morning.</p> |
Підбиваючи підсумок під написаним вище, можна констатувати, що всі елементи важливі по-своєму. Їх потрібно знати і використовувати відповідно до призначення. Величезна кількість розумних голів по всьому світу спеціально вигадують нові теги і варіанти їх використання, щоб і розробники, і користувачі отримали якісніший продукт. Однак, в гонитві за новими технологіями, не варто забувати про своєрідність браузерів! Деякі з них «не знають» нових (а іноді і старих) тегів і виводять інформацію некоректно.
Продукт, який обʼєднує у собі багатофункціональність, універсальність та різноманітні можливості для бізнесу різних масштабів. Лідер серед eCommerce-платформ у світі — Magento. І наша команда здатна забезпечити ваш бізнес ефективним ІТ-рішеннями.
Однією з безумовних переваг CMS Magento 2 є здатність до практично нескінченного розвитку та покращення за рахунок поповнення переліку використаних модулів. Вже сьогодні загальна їхня кількість у Маркетплейсах чи вільному доступі просто захмарна та зростає з кожним днем. І все це тому, що кожен користувач може створити або замовити у розробників власний модуль. Давайте розглянемо, що таке модуль, як він виглядає та на що здатний.
Оформлення замовлень клієнтів на інтернет-магазину — завжди відповідальна справа. В ідеалі, ваш співробітник має добре орієнтуватися у назвах та артикулах продуктів, щоб уникнути помилок та непорозумінь. Але якщо продуктів багато, то самі лише букви та цифри можуть просто збити з пантелику будь-кого. У цій статті досвідчений розробник Авіві ділиться досвідом створення модуля для Magento 2, що дозволяє адміністраторам бачити зображення товарів при оформленні замовлень.
Ми зв'яжемось з Вами протягом 10 хвилин