SEO Soluttions

Новые теги в HTML5.

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантическое описание структуры страницы в HTML5

Новые теги в HTML5— это теги, семантически описывающие структуру страницы, предназначены для того чтобы компьютерная программа(например поисковый робот), смогла отличать основной контент, от остальных частей страницы: шапки, подвала, меню, сайдбара, повторяющихся (динамических) блоков и т.д. Также идёт семантическое разделение на уровне основного контента (текста старницы).

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

<header></header>— теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также тегиheaderможно использовать как верхнюю часть тегаsection.

<nav></nav>— теги обрамляющие основное меню на сайте.

<article></article>— теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

<aside></aside>— теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегамиasideтакже можно обрамлять счетчики, виджеты(например комментарии от вконтакта), социальные кнопки.

<footer></footer>— теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также тегиfooterможно использовать как нижнюю часть тегаsection, т.е. сами теги footer будут находиться между тегамиsection

<section></section>— теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре(например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегамиsection, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов<div>, практическая же польза от них может появиться лишь тогда, когда поисковые системы (Яндекс, Гугл) начнут рекомендовать, где и когда использовать эти теги, для более высокого ранжирования сайтов.

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

<mark></mark> — текст находящийся между этими тегами становится "выделенным". Одно из предназначений теговmark, обрамлять слова в тексте, которые например совпадают со словом введённым пользователем в поисковую строку.

<time></time> — теги предназначены для создания дат и/или времени в формате
ISO вида:YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Тегиtimeмогут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибутdatetime, значением которого выступает дата и/или время в формате ISO.

<details></details> — теги предназначены для хранения информации, которая либо скрыта, либо отображена(работает наподобие спойлера).

<summary></summary> — теги обрамляют заголовок, если по нему щелкнуть то появится текст(можно использовать в качестве спойлера), находятся между тегамиdetails.

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

<meter></meter> — теги предназначены для выводастатическогоиндикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

<progress></progress> — теги предназначены для выводадинамическогоиндикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

<command /> — тег должен находиться между тегамиmenu, используется при создании сценариев на JavaScript.

<menu></menu>— между этими тегами помещают тегcommand.

<output></output> — теги предназначены для вывода работы скрипта.

<datalist></datalist> — теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

<figcaption></figcaption> — теги обрамляют описание какого-либо объекта(например изображения), находятся между тегамиfigure..

<figure></figure> — теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

<hgroup></hgroup> — теги предназначены для группировки заголовковh*

<keygen /> — тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

<ruby></ruby> — теги обрамляют текст и аннотацию к нему.

<rt></rt> — теги находятся между тегамиruby, предназначены для обрамления аннотации.

<rp></rp> — теги предназначены для браузеров которые не поддерживают тегиruby.

<wbr /> — тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

<audio></audio> — теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ(плагинов, расширений).

<video></video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ(плагинов, расширений).

<source /> — тег предназначен для указания пути к аудио/видео файлам, находится внутри теговaudioиvideo.

<canvas></canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими.Canvasв будущем, должен заменить Flash-технологию (угу в теории…).

О проекте

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