HTML5: новые теги и разметка

03.11.2014 11:10

Пример новых тегов, которые появились в новом html 5:

1) header.
2) footer.
3) nav.
4) section.
5) article.
6) aside.
7) figure.
8) dialog.
9) m (mark).
10) time.
11) meter.
12) progress.
13) video.
14) audio.
15) details.
16) datagrid.
17) menu.
18) command.

Пример кода HTML5

01 //Открываем теги body и html
02 <header>
03    <h1>Основной заголовок</h1>
04 </header>
05 <section>
06 <article>
07    <h2>Заголовок статьи или публикации</h2>
08    <p>Текст материала</p>
09 </article>
10 <article>
11    <h2>Заголовок статьи или публикации</h2>
12    <p>Текст материала</p>
13 </article>
14 <nav>
15    <a href="">Тут ссылка</a>
16    <a href="">Тут ссылка</a>
17 </nav>
18 </section>
19 <footer>
20    <p>Copyright 2010 phpguru.com.ua</p>
21 </footer>
22 //Закрывающие теги body и html

 Вот примерно такая структура у нового html5 получается. Давайте немного разберем некоторые теги для примера, создам табличку и немного опишу их назначение.

 

Тег Описание

section

Определение секций. Его назначают, например, для описания определенного блока текста. Можно применять для разбиения большого текста на меньшие блоки или разделение одной статьи на несколько абзацев.

header

Определяет верхнюю часть сайта. В народе ее обычно называют шапка сайта.

footer

Определяет нижнюю часть сайта, или подвал, как его называют программисты.

nav

Используеться для набора ссылок, обычно навигация по сайту. Само название сокращенно

article

Выделение определенной части текста. На моем сайте можно увидеть в исходнике такой тег.