Розмітка майбутньої веб-сторінки повинна мати смислове значення, як сторінка газети або журналу. На сторінці є секції, заголовки, списки, зображення, абзаци тексту тощо. Для опису всього цього багатства типів контенту існують відповідні теги. Тобто семантика спочатку є частиною HTML, але вона марна, якщо реалізована неправильно.
Семантична розмітка - підхід до створення HTML-розмітки ґрунтується на використанні тегів за їх призначенням відповідно до специфікації і, які відповідають типу контенту, що розмічується.
Здебільшого семантична розмітка - це просто використання здорового глузду. Під час розмітки абзацу тексту ми використовуємо тег <p>, для розмітки посилання існує тег <a>, контентне зображення представлено тегом <img> тощо.
Тобто семантична розмітка означає, що теги не вибираються на підставі того, як вони відображаються в браузері - вони вибираються на підставі типу та структури контенту, який розмічується.
Нові семантичні елементи в 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 елемент <header> - заголовок
Елемент <header> являє собою контейнер для вступного контенту або набору навігаційних посилань.
Елемент <header> зазвичай містить:один або кілька елементів заголовку (<h1> - <h6>)
- лого або іконку
- інформацію про авторство
Примітка: В одному HTML-документі може бути кілька елементів <header> Однак <header> неможна помістити в <footer>, <address> або інший елемент <header>.
HTML5 елемент <nav> - навігація
Елемент <nav> визначає набір навігаційних посилань.
Зверніть увагу, що НЕ всі посилання документа повинні бути всередині елемента <nav>. Елемент <nav> призначений тільки для основного блоку навігаційних посилань.
Браузери, такі як програми читання з екрану для користувачів з обмеженими можливостями, можуть використовувати цей елемент, щоб визначити, чи слід пропустити початкову візуалізацію цього вмісту.
HTML5 елемент <section>
секція Елемент <section> визначає розділ в веб-документі.
Згідно документації W3C по HTML5: "Розділ - це тематичне угруповання контенту, зазвичай з заголовком."
Домашню сторінку зазвичай можна розділити на розділи (секції) для ознайомлення, змісту і контактної інформації.
HTML5 елемент <article> - стаття
Елемент <article> визначає незалежний, автономний контент.
Стаття повинна мати смисл сама по собі, і має бути можливість читати її незалежно від іншої частини сайту.
Приклади того, де елемент <article> може використовуватись:
- Повідомлення на форумі
- Публікація в блозі
- Газетна стаття
Елемент<article> визначає незалежний, автономний зміст.
Елемент <section> визначає розділ в документі.
Чи можемо ми використовувати визначення, щоб вирішити, як вставити ці елементи? Ні, ми не можемо!
Отже, в Інтернеті ви знайдете HTML-сторінки з елементами <section> які містять елементи <article> та елементи <article>, які містять елементи <section>.
Ви також знайдете сторінки з елементами <section>, які містять елементи <section> та елементи <article>, які містять елементи <article>.
HTML5 Елемент <footer> - нижній колонтитул
Елемент <footer> визначає нижній колонтитул для документа або розділу.
Елемент <footer> має містити інформацію про елемент, який його містить.
Елемент <footer> зазвичай містить:
- інформація про авторство
- інформація про авторські права
- контактна інформація
- мапа сайта
- посилання повернення вгору
- пов’язані документи
Може бути кілька елементів <footer> в одному документі.