Урок3. Семантична верстка HTML5 - Українське програмування

Головна

Web-програмування

- HTML

Урок3. Семантична верстка HTML5

Написав admin

Субота, 18 серпня 2012 14:04

Продовжуємо навчання по HTML5 і сьогодні я розповім про семантичну верстку документів Html, розкажу про нові семантичні теги і про їх використання.

Для початку, що таке семантика? Якнайпростіше - це певний сенс, логіка, змістовні назви чогось. Щоб краще зрозуміти наведу приклад.

Нам потрібно записати в змінну дату, ми можемо назвати змінну, н-д, number або date. Відчуваєте різницю? Зрозуміло, що перший варіант нічого не говорить нам про значення, яке може бути в змінній, для чого ця змінна, а от другий варіант чітко дає зрозуміти, що в змінній повинна міститись певна дата.

Можливо не зовсім вдалий варіант, але зате зрозумілий.

Семантична верстка - це верстка, в якій використовуються html-теги, які поділяють сторінку на логічні блоки, створюють певну логічну структуру.

Є кілька варіантів верстки(таблична,блочна), які не мають семантичного значення. Верстаючи сторінку з допомогою тегів div або table, розбиваючи її на блоки ми не створюємо ніякої семантичної структури - div аморфний тег, а table означає таблицю.

На щастя, html5 виправляє ці недоліки, тепер можна верстати семантично.)

Для цього введені такі нові теги:

- header

- article

- footer

- nav

- section

- aside

Давайте розглянемо кожен з них,а потім на прикладі, я покажу як ними користуватись.

<header>

Тег <header> представляє собою набір початкових даних і певної навігації. В ньому розміщюють логотипи, заголовки, посилання на сайт, а інколи і меню навігації по сайту. Тобто цей елемент - це "шапка" веб-сторінки.

<article>

Тег який тепер буде дуже поширений=) Він відповідає статті, запису в блозі, замітці, новині. Все що відноситься, н-д, до вашої статті на сайті повинне бути включене в тег <article>(тобто це і заголовок статті,дата, сам контент, а також коментарі). Щодо коментарів, то вони також окремі <article>, але вкладені в основний.

<footer>

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

<nav>

Тег виділяє панель навігації по сайту, меню. На сторінці може бути декілька таких елементів.

<section>

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

<aside>

Тег <aside> використовується для контенту, який повинен розміщуватись окремо від основного. Це може бути бокова панель, частина сторінки перед <footer> абощо. В тезі можна розміщувати меню, рекламу та інший додатковий контент.

А тепер приклад, для засвоєння

Припустимо нам потрібно зверстати сайт по такому макету

Зверставши його на html5 отримаєм такий макет.

Отже, зразу видно, що верхній елемент це наш <header>, по інакшому і бути не може=) Збоку ми маємо меню сайту, це <nav>, центральний контент все ж приходиться формувати <div>. Ви спитаєте,а чому не <section>? Та тому що це не є окремий розділ сайту, він не має заголовку - це просто місце для основного контенту.

А от вже вкладені Новини і Статті цілком підходять для формування тегом <section>. В середині них ми маємо безліч новин і статтей, які виділяються тегами <article>.

І останнім елементом йде <footer>.

Все дуже просто і головне тепер сторінка має логічну структуру.

Зауважу, що наше бокове меню може бути сформоване по-інакшому.