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

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{27-11-2013, 23:55
4 041
0}

Правильне використання Нових семантичних елементів в HTML5.

HTML5 не просто робить існуючу розмітку компактніше, він також визначає нові семантичні елементи.

Код будь-якої сторінки повинен починатися з вказівки доктайпа. Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує в декілька версій. Доктайп (doctype) для HTML5 єдиний і короткий, що спрощує життя верстальника.

Розглянемо структуру сторінки html 5:


<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Назва сторінки</title>
</head>
<body>
  <header>тут логотип</header>
    <nav>
        <a href="#">Главна</a>
    </nav>
      <section>
    <article>
            <h1>Заголовок статті</h1>
            <p>Сама стаття</p>
        </article>
      </section>
        <aside>
            <p>Бокова панель</p>
        </aside>
    <footer>Copyright 2013</footer>
</body>
</html>

<Article> - Елемент, що допомагає пошуковим роботам вірно виділити основний контент сторінки. Пошукові машини індексують розташоване всередині <article> як інформацію, яка несе основне смислове навантаження.
<Section> - Елемент, що відповідає за розмітку веб-сторінки на секції. Усі секції отримують персональні HTML-заголовки - що дозволяє пошуковим машинам правильно орієнтуватися на сторінці.
<Header> - Тег дозволяє пошуковим машинам знайти на сторінці сайту: назва ресурсу, логотип компанії, навігаційну панель.
<Nav> - Даний елемент показує пошуковим системам архітектуру сайту.
<Footer> - Елемент містить додаткову інформацію вашого сайту (копірайт, ліцензійні умови, посилання на статичні сторінки / соціальні медіа та інше).

<nav>

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

Приклад:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
</head>
<body>
<header> <h1>Сайт про фільми</h1> </header>
<nav><a href="1.html">Головна</a> | <a href="2.html">По жанрам</a> | <a href="3.html">Рецензії</a> | <a href="4.html">Контакти</a></nav>
<article>
<h2>Фільми це</h2>
</article>
</body>
</html>

<article>

Елемент <article> задає компонент сторінки, призначений для самостійного розповсюдження або повторного використання, наприклад в синдикації . Це може бути повідомлення форуму, журнальна або газетна стаття, запис у блоз , користувальницький коментар, інтерактивний віджет, гаджет або будь-який інший незалежний контент.

<aside>

В цей тег потрібно брати бокову панель. Цей елемент представляє розділ сторінки , що має непряме відношення до змісту і який можна відокремити від контенту.

<hgroup>

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

Приклад:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hgroup</title>
</head>
<body>
<hgroup>
<h1>Кристина Ветрова</h1>
<h2>Персональный сайт</h2>
</hgroup>
</body>
</html>

<header>

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

<footer>

Задає нижній колонтитул для розділу змісту або підвал для сторінки. Елемент <footer> зазвичай містить інформацію про розділ, таку як: ім'я автора, посилання на відповідні документи, авторські дані тощо. Колонтитули не обов'язково повинні виводитися в кінці розділу, як це зазвичай робиться.

<time>

Являє собою або час в 24- годинному форматі, або точну дату, яку при бажанні можна поєднувати з часом і зазначенням часового поясу.

Приклад:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time</title>
</head>
<body>
<article>
<p>Новини: <time datetime="2012-12-23T08:23:11+07:00">сьогодні</time></p>
<p><time>1957-10-04</time> на майдані зібралось 500 тис людей.</p>
<p><time>1960-08-19</time> Янукович пішов у відставку!.</p>
</article>
</body>
</html>

**Форматы даты и времени**
Значение	Формат	Пример
Год	ГГГГ	2012
Місяць і рік	ГГГГ-ММ	2012-12
Повна дата	ГГГГ-ММ-ДД	2012-12-23
Дата з хвилинами	ГГГГ-ММ-ДДTчч:мм	2004-07-24T18:18
дата з секундами	ГГГГ-ММ-ДДTчч:мм:сс	2004-07-24T18:18:18
Дата з часовим поясом	ГГГГ-ММ-ДДTчч:мм:сс±чч:мм	2004-07-24T18:18:18+02:00