HTML5 семантичні елементи

До появи стандарту HTML5 вся розмітка сторінок здійснювалася в основному за рахунок елементів <div>, яким привласнювали класи (class) або ідентифікатори (id) для структурування і наочності розмітки. З їх допомогою в HTML-документі розміщували верхні і нижні колонтитули, бічні панелі, навігацію і багато іншого.

Стандарт HTML5 надав нові елементи для структурування, угруповання контенту і розмітки текстового вмісту. Нові семантичні елементи дозволили поліпшити структуру веб-сторінки, додавши смислове значення укладеним в них вмісту.

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

HTML5-елементи не завжди зрозумілі сучасним браузерам, і за замовчуванням браузер вважає їх рядковими елементами - {display: inline;}. Якщо просто поставити ширину і висоту для таких елементів, то в браузері вони будуть відображатися неправильно. Щоб вирішити цю проблему, потрібно вказати для всіх використовуваних HTML5-елементів {display: block;}.

Для всіх елементів доступні глобальні атрибути.

Опишемо структурні елементи HTML5:

1. Секційні елементи

1.1. Елемент <header>

Утворює вміст верхньої (шапки) частини сторінки або її секції. Об'єднує вступну інформацію і навігаційні елементи, може розташовуватися в будь-якій частині сторінки. У HTML-документі може міститися одночасно кілька елементів <header>. Не є обов'язковим.
<header>
<h1>...</h1>
</header>

Елемент може містити основний заголовок, або групу заголовків, які в свою чергу можна помістити в елементах <hgroup>.

Парний тег <header> не можна поміщати всередину елементів <footer>, <address> або іншого елемента <header>.

1.2. Елемент <hgroup>

Використовується для угруповання елементів <h1> - <h6> в разі, коли заголовок має складну структуру, наприклад, має уточнюючі підзаголовки, альтернативні заголовки і т.д.
<header>
<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>
</header>

1.3. Елемент <nav>

Призначений для створення блоку навігації веб-сторінки або всього веб-сайту, при цьому не обов'язково повинен знаходитися усередині <header>. На сторінці може бути кілька елементів <nav>. Не замінює теги <ul> або <ol>, він просто їх обрамляє:
<nav>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>

Як елементи панелі навігації можна використовувати не тільки елементи списків:
<nav>
<p><a href="">...</a></p>
<p><a href="">...</a></p>
</nav>

Також можна додавати заголовки всередину елемента:
<nav>
<h2>...</h2>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>

1.4. Елемент <article>

Використовується для групування записів - публікацій, статей. Являє собою незалежний, відокремлений блок, призначений для багаторазового використання. Як правило, починається з заголовка.
<article>
<header>
<h2>...</h2>
</header>
<p>...</p>
</article>

1.5. Елемент <section>

Є способом поділу сторінки або статті на тематичні розділи. Не використовується багаторазово, зазвичай містить заголовок. Не є блоком-обгорткою, для цих цілей доречніше використовувати елемент <div>.
<article>
<h1>...</h1>
<section>
<h2>...</h2>
<p>...</p>
</section>
</article>

1.6. Елемент <aside>

Групує вміст, пов'язаний з навколишнім його контентом безпосередньо, але яке можна вважати окремим (тобто, видалення цього блоку не вплине на розуміння основного вмісту). Найчастіше елемент позиціонується як бічна колонка (як в книгах) і включає в себе групи елементів <nav>, цифрові дані і витягнуті цитати:
<aside>
<h2>...</h2>
<p>...</p>
</aside>

1.7. Елемент <footer>

Формує вміст нижньої частини (підвалу) сторінки або її секції. Призначений для розміщення інформації про веб-ресурс, наприклад, відомості про авторські права, посилання на умови використання, контактну інформацію, посилання на пов'язаний вміст і т.д. В одному веб-документі може бути кілька елементів <footer>. Як кожна сторінка, так і кожна стаття може мати свій елемент <footer>, більш того, <footer> можна помістити в елемент <blockquote>, щоб вказати джерело цитування.
<footer>
<address>...</address>
<small>...</small>
</footer>

1.8. Елемент <address>

Використовується для визначення контактної інформації автора/власника документа або статті. Для позначення автора документа тег розміщують всередині елемента <body>, для відображення автора статті - всередині тега <article>. У браузері зазвичай відображається курсивом.

2. Групування контенту

2.1. Елемент <main>

Групує основний контент веб-сторінки. Вміст елемента має бути унікальним на сторінці і не повинен відображатися де-небудь ще на сайті. Тому що повторюваний на сайті контент, наприклад навігація по сайту, пошук по сайту, логотип, контактні дані та інше, не можна поміщати в елемент <main>.

Основне призначення елемента в тому, щоб прив'язати значення main атрибута role ARIA до певного елементу HTML. Це допоможе скрінрідерам визначити, де починається основний зміст документа.

2.2. Елементи <figure> і <figcaption>

Елемент <figure> представляє автономний контент, можливо з заголовком <figcaption>, який є самостійним елементом потоку. Елемент може бути переміщений з основного контенту документа в бічну колонку або додаток, не зачіпаючи потік документа. За допомогою елемента <figure> можна додавати замітки до ілюстрацій, фотографій, діаграм, фрагментів коду, даючи підписи або коментарі.
<figure>
<img src="picture.jpg" alt="Осінь">
<figcaption>Осінній ліс</figcaption>
</figure>

3. Семантика для текстового вмісту

3.1. Елемент <time>

Визначає час (24 години) або дату за григоріанським календарем з можливим зазначенням часу і зміщення часового поясу. Текст, укладений в даний тег, не має стильового оформлення браузером.

Для тега доступний атрибут datetime, вміст якого вказує на те, що буде бачити користувач на екрані свого комп'ютера.

3.2. Елемент <mark>

Текст, поміщений всередину тега <mark>, виділяється за замовчуванням жовтим кольором (колір фону і колір шрифту у виділеному блоці можна змінити, задавши певні css-стилі). За допомогою даного тега можна відзначати важливий вміст, а також ключові слова.

3.3. Елемент <bdi>

Відокремлює фрагмент тексту, який повинен бути ізольований від решти тексту для двонаправленого форматування тексту. Використовується для текстів, написаних одночасно на мовах, що читаються зліва направо і справа наліво. Атрибут dir за замовчуванням має значення auto.

3.4. Елемент <wbr>

Показує браузеру місце, де можна додати розрив довжини рядка в разі потреби.

Приклад використання семантичних елементів:
<header>
<h1>Назва сайту</h1>
<nav>
<ul>
<li><a href="page1.html">Сторінка 1</a></li>
<li><a href="page2.html">Сторінка 2</a></li>
<li><a href="page3.html">Сторінка 3</a></li>
</ul>
</nav>
</header>
<section>
<h2>Свіжі статті</h2>
<article>
<h2>Заголовок статті 1</h2>
<p>Текст статті</p>
</article>
<article>
<h2>Заголовок статті 2</h2>
<p>Текст статті</p>
<aside>Додаткова інформація, яка відноситься до 2 статті</aside>
</article>
</section>
<aside>
<section>
<h3>Реклама</h3>
</section>
</aside>
<footer>
<p>Копірайти</p>
</footer>
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Читайте нас також: