Воскресенье, 09 Сентября 2012 00:41

Новые теги в HTML5

Written by 
Оцени эту запись
(4 Голоса)

В HTML5 появилось много новых тегов, которые мы подробно рассмотрим в этой статье.

 

 

Теги связанные с семантикой:

 

<header> - шапка сайта или документа; содержит заголовок статьи, страницы.

 

<footer> - подвал сайта, там могут располагаться контакты или другая информация.

 

<section> - раздел сайта, может быть основным контейнером и содержать остальные разделы.

 

<article> - содержит внутри статью, новость или любое другое контентное наполнение. 

 

<aside> - определяет боковую часть сайта, сайдбар.

 

<menu> - содержит меню сайта, где пункты меню, как и в списке, содержатся внутри тегов <li>.

 

<command> - тег располагается внутри <menu>, задает команду в виде checkbox, radio или кнопки.

 

<datalist> - привязывается к <input> по идентификатору, задает список вариантов, которые отображаются при наборе текста; варианты располагаются внутри <datalist> при помощи тега <option>.

 

<details> - содержит в себе информацию (текст), который можно скрыть или показать; внутри него может быть тег <summery>, в котором содержится заголовок; <details> сворачивается/разворачивается при клике на <summery>. 

 

<figure> - служит для группирования элементов; для описания содержимого тега используется <figcaption>.

 

<hgroup> - служит для группирования заголовков страницы, внутри него должны находиться заголовки h1-h6.

 

<mark> - используется для выделение части текста.

 

<nav> - задает навигацию на сайта, содержит значимые ссылки.

 

 

Другие новинки:

 

<audio> - добавляет аудио на страницу, путь к файлу прописывается в атрибуте src.

 

<video> - добавляет видео на страницу, путь также прописывается в src.

 

<source> - может быть расположен внутри тегов <audio> и <video>, служит для вставки аудио или видеофайлов.

 

<canvas> - добавляет область, в которой можно рисовать, делать анимацию и т.д.

 

<keygen> - служит для шифрования данных формы, генерирует ключи; находится внутри тега <form>; к форме привязывается по id.

 

<time> - содержит дату или время.

 

<meter> - используется для вывода числового значения, показатель уровня; атрибуты: value (само значение), min (минимум), max (максимум), low (низкий уровень), high (высокий уровень).

 

<output> - используется для вывода какого-то результата.

 

<progress> - отображает прогресс; атрибуты - value (текущее значение) и max (максимальное).

 

<ruby> - служит для вставки небольшого текста, аннотации, который стоит над или под основным текстом; внутри него содержится сам текст и тег <rt> с аннотацией; внутри <ruby> может еще быть тег <rp>, который предназначен для браузеров, которые не поддерживают <ruby>.

 

<wbr> - указывает браузеру в каком месте допустило делать перенос строки, если она не помещается по ширине.

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов