Html 5 структурні елементи

Відео: HTML5 Tutorials # 8 - Figure and Figcaption

Відео: Html 5 tutorial - 10 - Using Nav element.mp4

У цій статті ми обговоримо можливості HTML 5 по створенню структури документа. Я впевнений, що якщо Ви займалися версткою HTML-документа, то неодноразово використовували тег, причому цей тег Вам доводилося ставити всюди: на початку і в кінці сторінки, в меню, в різних інших частинах сторінки. Це не дуже добре, тому в HTML 5 для кожної частини сторінки є свій елемент.

Ось їх список і коротке призначення:

1) section. Призначення - визначення секцій. Його використовують для опису певного блоку тексту, наприклад, хорошим застосуванням цього елемента буде при розбитті великої частини тексту на менші, як розбиття однієї статті на декілька абзаців.

2) header. Призначення - визначення верхньої секції на сторінці.

3) footer. Призначення - визначення нижньої секції на сторінці.

4) nav. Призначення - визначає набір посилань на інші сторінки (часто використовують для навігації по сайту).

Відео: HTML 5 Base Element

5) article. Призначення - виділити певну частину тексту.

Давайте напишемо такий HTML-код:

Як бачите, ми спочатку визначили заголовок в тезі.

Відео: Оформлення елементів HTML за допомогою CSS [GeekBrains]

Потім ми додали секцію за допомогою тега, усередині якого написали два тега, які виділяють певну частину тексту.

Після секції поставили набір посилань за допомогою тега

І, нарешті, підвал - нижня частина сторінки, яку створили за допомогою тега.

Ви зараз скажете, а де перевага? Ми ж адже могли спокійно реалізувати те ж саме і з допомогою вже знайомого нам тега lt;divgt ;. А перевага наступне: структура документа стає більш зрозумілою і ясною не тільки для Web-майстра, а й для пошукових систем, і це дві головні переваги, які Ви тепер можете сміливо використовувати при розробці своїх сайтів. А з іншими новими елементами HTML 5 ми познайомимося в наступних статтях.