HTML5 семантичні елементи
До появи стандарту HTML5 вся розмітка сторінок здійснювалася в основному за рахунок елементів <div>, яким привласнювали класи (class) або ідентифікатори (id) для структурування і наочності розмітки. З їх допомогою в HTML-документі розміщували верхні і нижні колонтитули, бічні панелі, навігацію і багато іншого.
Стандарт HTML5 надав нові елементи для структурування, угруповання контенту і розмітки текстового вмісту. Нові семантичні елементи дозволили поліпшити структуру веб-сторінки, додавши смислове значення укладеним в них вмісту.
Для відображення зовнішнього вигляду елементів не задано жодних правил, тому елементи можна стилізувати на свій розсуд.
HTML5-елементи не завжди зрозумілі сучасним браузерам, і за замовчуванням браузер вважає їх рядковими елементами - {display: inline;}. Якщо просто поставити ширину і висоту для таких елементів, то в браузері вони будуть відображатися неправильно. Щоб вирішити цю проблему, потрібно вказати для всіх використовуваних HTML5-елементів {display: block;}.
Для всіх елементів доступні глобальні атрибути.
Опишемо структурні елементи HTML5:
1. Секційні елементи
1.1. Елемент <header>
Утворює вміст верхньої (шапки) частини сторінки або її секції. Об'єднує вступну інформацію і навігаційні елементи, може розташовуватися в будь-якій частині сторінки. У HTML-документі може міститися одночасно кілька елементів <header>. Не є обов'язковим.
Елемент може містити основний заголовок, або групу заголовків, які в свою чергу можна помістити в елементах <hgroup>.
Парний тег <header> не можна поміщати всередину елементів <footer>, <address> або іншого елемента <header>.
1.2. Елемент <hgroup>
Використовується для угруповання елементів <h1> - <h6> в разі, коли заголовок має складну структуру, наприклад, має уточнюючі підзаголовки, альтернативні заголовки і т.д.
1.3. Елемент <nav>
Призначений для створення блоку навігації веб-сторінки або всього веб-сайту, при цьому не обов'язково повинен знаходитися усередині <header>. На сторінці може бути кілька елементів <nav>. Не замінює теги <ul> або <ol>, він просто їх обрамляє:
Як елементи панелі навігації можна використовувати не тільки елементи списків:
Також можна додавати заголовки всередину елемента:
1.4. Елемент <article>
Використовується для групування записів - публікацій, статей. Являє собою незалежний, відокремлений блок, призначений для багаторазового використання. Як правило, починається з заголовка.
1.5. Елемент <section>
Є способом поділу сторінки або статті на тематичні розділи. Не використовується багаторазово, зазвичай містить заголовок. Не є блоком-обгорткою, для цих цілей доречніше використовувати елемент <div>.
1.6. Елемент <aside>
Групує вміст, пов'язаний з навколишнім його контентом безпосередньо, але яке можна вважати окремим (тобто, видалення цього блоку не вплине на розуміння основного вмісту). Найчастіше елемент позиціонується як бічна колонка (як в книгах) і включає в себе групи елементів <nav>, цифрові дані і витягнуті цитати:
1.7. Елемент <footer>
Формує вміст нижньої частини (підвалу) сторінки або її секції. Призначений для розміщення інформації про веб-ресурс, наприклад, відомості про авторські права, посилання на умови використання, контактну інформацію, посилання на пов'язаний вміст і т.д. В одному веб-документі може бути кілька елементів <footer>. Як кожна сторінка, так і кожна стаття може мати свій елемент <footer>, більш того, <footer> можна помістити в елемент <blockquote>, щоб вказати джерело цитування.
1.8. Елемент <address>
Використовується для визначення контактної інформації автора/власника документа або статті. Для позначення автора документа тег розміщують всередині елемента <body>, для відображення автора статті - всередині тега <article>. У браузері зазвичай відображається курсивом.
2. Групування контенту
2.1. Елемент <main>
Групує основний контент веб-сторінки. Вміст елемента має бути унікальним на сторінці і не повинен відображатися де-небудь ще на сайті. Тому що повторюваний на сайті контент, наприклад навігація по сайту, пошук по сайту, логотип, контактні дані та інше, не можна поміщати в елемент <main>.
Основне призначення елемента в тому, щоб прив'язати значення main атрибута role ARIA до певного елементу HTML. Це допоможе скрінрідерам визначити, де починається основний зміст документа.
2.2. Елементи <figure> і <figcaption>
Елемент <figure> представляє автономний контент, можливо з заголовком <figcaption>, який є самостійним елементом потоку. Елемент може бути переміщений з основного контенту документа в бічну колонку або додаток, не зачіпаючи потік документа. За допомогою елемента <figure> можна додавати замітки до ілюстрацій, фотографій, діаграм, фрагментів коду, даючи підписи або коментарі.
3. Семантика для текстового вмісту
3.1. Елемент <time>
Визначає час (24 години) або дату за григоріанським календарем з можливим зазначенням часу і зміщення часового поясу. Текст, укладений в даний тег, не має стильового оформлення браузером.
Для тега доступний атрибут datetime, вміст якого вказує на те, що буде бачити користувач на екрані свого комп'ютера.
3.2. Елемент <mark>
Текст, поміщений всередину тега <mark>, виділяється за замовчуванням жовтим кольором (колір фону і колір шрифту у виділеному блоці можна змінити, задавши певні css-стилі). За допомогою даного тега можна відзначати важливий вміст, а також ключові слова.
3.3. Елемент <bdi>
Відокремлює фрагмент тексту, який повинен бути ізольований від решти тексту для двонаправленого форматування тексту. Використовується для текстів, написаних одночасно на мовах, що читаються зліва направо і справа наліво. Атрибут dir за замовчуванням має значення auto.
3.4. Елемент <wbr>
Показує браузеру місце, де можна додати розрив довжини рядка в разі потреби.
Приклад використання семантичних елементів:
Стандарт 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>