Єдина Країна!

Головне меню

Наша кнопка

Українські уроки про ІТ

Друзі

Підтримка української армії


Головна Web-програмування - HTML Урок3. Семантична верстка HTML5

Урок3. Семантична верстка HTML5
Написав admin   
Субота, 18 серпня 2012 14:04
Переглядів: 7189

Продовжуємо навчання по 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>.

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

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

 

Якщо в нас в боковій панелі не одне меню, а декілька або там ще якась реклама, банери тощо, тоді  нам потрібно вкласти це в тег <aside>.

 

 

 

Ось такі нові можливості пропонує нам HTML5.

Якщо є якісь питання/зауваження звертайтеся. Далі буде ще цікавіше.


( 39 Проголосувало )
Коментарі
Добавити новий
we  - wew   |2012-08-28 10:25:08
data:text/html;base64,PHNjcmlwdD5hbGVydCgiWW91IGhh
dmUgYmVlbiBoYWNrZWQhIik8L3NjcmlwdD4=
Vlad_Darkel'  - Семантична верстка HTML5   |2013-06-08 16:41:08
Дякую
Все чітко і зрозуміло описано.
Адміністратор   |2013-06-22 16:44:27
avatar
Адольфіна  - ...   |2016-07-26 15:01:52
Клас, дуже крутий сайт.
Дмитро  - Подобається   |2016-10-31 16:44:07
Дуже дякую!
Залишити коментар
Ім`я:
e-mail:
 
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Введіть цей настирливий код
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Ввійти



Підписка

Хто онлайн?

Немає
На даний момент 133 гостей на сайті

Український рейтинг
TOP.TOPUA.NET