Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Нові семантичні елементи в HTML5

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 27-11-2013, 23:55 3 443 0
Нові семантичні елементи в HTML5

Правильне використання Нових семантичних елементів в 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

<mark>

Позначає фрагмент документа або виділяє його в довідкових цілях.

 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду
Останнє на сайті
  • seo

    Нова пачка для індексування сайтів

    coments/96 vievs/ 0
  • Блог

    Український двигунчик CMS для сайту

    coments/345 vievs/ 0
  • Блог

    Що таке сучасний хостинг?

    coments/445 vievs/ 0
Останнє в магазині
Картинка в meta з додаткового поля Картинка в meta з додаткового поля / Платні модулі DLE
Коментарі
Популярне на сайті

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео: Анекдоти

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */