HTML5. Семантичні елементи

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Семантика - це вивчення значень слів і фраз в мові.

Семантичні елементи = елементи зі значенням.


Що таке семантичні елементи?

Семантичний елемент чітко описує його значення як для браузера, так і для розробника.

Наприклад, несемантичні елементи: <div> та <span> - нічого не говорять про їх зміст.

Наприклад, семантичні елементи: <form>, <table> та <article> - чітко визначають свій зміст.


Підтримка браузерами

Так Так Так Так Так

Семантичні елементи HTML5 підтримуються у всіх сучасних браузерах.

Крім того, ви можете "навчити" старих браузерів, як обробляти "невідомі елементи".

Читайте про це в розділі HTML5 Підтримка браузерами.


Нові семантичні елементи в HTML5

Багато веб-сайтів містять HTML-код: <div id="nav"> <div class="header"> <div id="footer">
для позначення навігації, заголовка та нижнього колонтитула.

HTML5 пропонує нові семантичні елементи для визначення різних частин веб-сторінки:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Семантичні елементи


HTML5 елемент <section>

Елемент <section> визначає розділ в документі.

Відповідно до документації HTML5 W3C: "Розділ є тематичним групуванням вмісту, як правило, із заголовком."

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

Приклад:

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Спробуйте самі! »

HTML5 елемент <article>

Елемент <article> визначає незалежний, автономний зміст (статтю).

Стаття повинна мати сенс сама по собі, так, щоб її можна було читати незалежно від решти веб-сайту.

Приклади використання елемента <article>:

Приклад:

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Спробуйте самі! »

Вкладання <article> в <section> або навпаки?

Елемент<article>визначає незалежний, автономний зміст

Елемент <section> визначає розділ у документі.

Чи можемо ми використовувати визначення, щоб вирішити, як вставити ці елементи? Ні, ми не можемо!

Отже, в Інтернеті ви знайдете HTML-сторінки з елементами <section> що містять елементи <article> та елементи <article> що містять елементи <section>.

Ви також знайдете сторінки з елементами <section> що містять елементи <section> та елементи <article> що містять елементи <article>.

Приклад із газети: Спортивна стаття <article> в спортивному розділі section, може містити технічний розділ section в кожній статті <article>.


HTML5 елемент <header>

Елемент <header> визначає заголовок для документа або розділу.

Елемент <header> повинен використовуватися як контейнер для вступного змісту.

Ви можете мати кілька елементів <header> в одному документі.

Наступний приклад визначає заголовок статті:

Приклад:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>
Спробуйте самі! »

HTML5 елемент <footer>

Елемент <footer> визначає колонтитул для документа або розділу.

Елемент <footer> повинен містити інформацію, що міститься в ньому.

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

Може бути кілька елементів <footer> на одній веб-сторінці.

Приклад:

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
Спробуйте самі! »

HTML5 елемент <nav>

Елемент <nav> визначає набір навігаційних посилань.

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

Приклад:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
Спробуйте самі! »

HTML5 елемент <aside>

Елемент <aside> визначає деякий вміст, окрім вмісту, в якому він розміщений (як бічна панель)

Зміст <aside> повинен бути пов'язаний з навколишнім змістом.

Приклад:

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Спробуйте самі! »

HTML5 елементи <figure> та <figcaption>

Підпис до зображення робиться для того, щоб додати пояснення, що на ньому зображено.

В HTML5 зображення та підпис до нього можна згрупувати в елемент <figure>:

Приклад:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Спробуйте самі! »

Елемент <img> визначає зображення, елемент <figcaption> визначає підпис до зображення.


Чому семантичні елементи?

Починаючи з HTML4, розробники використовували свої власні назви id/class для стилізації елементів: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav та ін.

Це зробило неможливим для пошукових систем визначити правильний вміст веб-сторінки.

З новими HTML5 елементами (<header> <footer> <nav> <section> <article>) це стало легше.

Згідно визначення з W3C, Semantic Web: "Дозволяє обмінюватися даними і повторно використовувати їх у різних програмах, на підприємствах і в спільнотах".


Семантичні елементи в HTML5

Нижче наведено алфавітний список нових семантичних елементів у HTML5.

Посилання на повний HTML5 Довідник тегів.

Тег Опис
<article> Визначає статтю
<aside> Визначає вміст, окрім вмісту сторінки
<details> Визначає додаткові деталі, які користувач може переглядати або ховати
<figcaption> Визначає підпис для елемента <figure>
<figure> Визначає автономний вміст, наприклад, ілюстрації, діаграми, фотографії, списки кодів тощо.
<footer> Визначає нижній колонтитул для документа або розділу
<header> Визначає заголовок для документа або розділу
<main> Визначає основний вміст документа
<mark> Визначає позначений / виділений текст
<nav> Визначає навігаційні посилання
<section> Визначає розділ у документі
<summary> Визначає видимий заголовок для елемента <details>
<time> Визначає дату/час


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.