Многие интересуются, что нового внедрили в обновленной гипертекстовой разметке html5. За последние 10 лет web технологии развиваются очень быстро и прогрессивно. А сам html не менялся. В связи как раз с высоким прыжком в развитии интернет технологий разработчики гипертекстовой разметки решились обновить его до 5 версии. Давайте приведу пример новых тегов, которые появились в новом 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.
А некоторые в тоже время убрали. Давайте посмотрим, что исчезло.
font
center
В остальном в тегах разметки ничего особенного не произошло, если вы знаете основной язык гипертекстовой разметки HTML то несколько новых тегов не введут вас в заблуждение. Какие теги новые добавлены в разметку форм на html5 я уже описывал, кому интересно, можно просмотреть по этой ссылке. Далее давайте рассмотрим, как теперь может выглядеть или даже как должна выглядеть структура документа по стандартам html 5. Давайте приведу пример кода ниже
Код HTML
//Открываем теги body и html
<header>
<h1>Основной заголовок</h1>
</header>
<section>
<article>
<h2>Заголовок статьи или публикации</h2>
<p>Текст материала</p>
</article>
<article>
<h2>Заголовок статьи или публикации</h2>
<p>Текст материала</p>
</article>
<nav>
<a href="">Тут ссылка</a>
<a href="">Тут ссылка</a>
</nav>
</section>
<footer>
<p>Copyright 2010 phpguru.com.ua</p>
</footer>
//Закрывающие теги body и html
Вот примерно такая структура у нового html5 получается. Давайте немного разберем некоторые теги для примера, создам табличку и немного опишу их назначение.
section - Определение секций. Его назначают, например, для описания определенного блока текста. Можно применять для разбиения большого текста на меньшие блоки или разделение одной статьи на несколько абзацев.
header - Определяет верхнюю часть сайта. В народе ее обычно называют шапка сайта.
footer - Определяет нижнюю часть сайта, или подвал, как его называют программисты.
nav - Используеться для набора ссылок, обычно навигация по сайту. Само название сокращенно
article - Выделение определенной части текста. На моем сайте можно увидеть в исходнике такой тег.
Вот мы и рассмотрели коротко и, надеюсь, понятно основные теги разметки, которые были введены в новом html5.
Далее рассмотрим три новых элемента блока в html5
1) aside.
2) dialog.
3) figure.
Давайте теперь опишем их назначение.
Элемент aside используется в основном для выделения неосновного текста внутри основного, например, для выделения примечаний, постскриптумов, цитат и тому подобное. Давайте рассмотрим на примере в самом коде
Код HTML
<h3>Заголовок</h3>
<p>Текст просто</p>
<aside>
<p>Выделенный текст, цитата, например</p>
</aside>
Ничего сложного нет. Для просмотра создайте страницу тестовую на html и попробуйте просмотреть данные примеры в браузере. А я сейчас опишу, что должны вы увидеть. При использовании элемента aside вы особой разницы не заметите, что с ним, что без него, и это еще раз говорит о том, что он используется только для создания структуры. А структура в свою очередь удобна веб-мастерам и поисковым машинам.
Далее, идем к элементу dialog. Давайте для начала покажу, как он должен выглядеть в структуре разметки. Смотрим код ниже.
Код HTML
<dialog>
<dt>Автор 1</dt>
<dd>Сообщение автора</dd>
<dt>Автор 2</dt>
<dd>Сообщение второго автора</dd>
</dialog>
Как вы заметили внутри элемента dialog ставятся два дополнительных тега разметки - <dt> и <dd>. Первый тег означает Автор сообщения, а второй - текст сообщения. На этом в принципе с данным тегом и все.
Далее разберем еще тег <figure>. Это довольно необыкновенный тег в HTML5, который может дополнительно описывать изображения, например, так:
Код HTML
<figure>
<legend>Описание</legend>
<img alt="Здесь описание изображения" src="путь к изображению" width="200" height="200">
</figure>
Вот такое вот нововведение для описания изображений. На мой взгляд даже очень полезное, мне лично понравилось. Можно протестировать самостоятельно, вставив данный код между тегами боди, и просмотреть в браузере. На этом данная публикация подходит к концу. В следующей публикаци на тему HTML5, я опубликую нововведения относительно текста и мультимедиа.