HTML5 Новые теги, поддержка браузерами p.1

< Вернуться

В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.

<article>
</article>

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article</title>
</head>
<body>
<header>
<h1>Следы невиданных зверей</h1>
</header>
<article>
История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
</article>
</body>
</html>

 

Браузеры:

Internet Explorer до версии 8.0 включительно игнорирует тег <article>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору ARTICLE.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Остальные поддерживают полностью.

 

<aside>
</aside>

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>aside</title>
<script>
document.createElement('aside');
document.createElement('article');
</script>
<style>
aside {
background: #f0f0f0;
padding: 10px;
width: 200px;
float: right;
}
article {
margin-right: 240px;
display: block;
}
</style>
</head>
<body>
<header><h1>Байки</h1></header>
<aside>
<p>Экономьте электричество</p>
<p>Хороший язык</p>
<p>Чья палка больше</p>
</aside>
<article>
История о том, как приходилось экономить электричество,
какие меры для этого принимались, и куда оно на самом деле уходило.
</article>
</body>
</html>

 

Браузеры:

Internet Explorer до версии 8.0 включительно игнорирует тег <aside>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Остальные поддерживают полностью.

 

<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>

Атрибуты:

autoplay - Звук начинает играть сразу после загрузки страницы.
controls - Добавляет панель управления к аудиофайлу.
loop - Повторяет воспроизведение звука с начала после его завершения.
preload - Используется для загрузки файла вместе с загрузкой веб-страницы.
src - Указывает путь к воспроизводимому файлу.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Yann Tiersen - L'arriv?e sur l'ile</p>
<p>1998 год, альбом Le Phare</p>
<audio controls="controls">
<source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>.
</audio>
</body>
</html>

Браузеры:

Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.

Internet Explorer  9.0

Chrome 10.0-13.0

Opera 10.50-11.0

Safari 3.1-5.0

Firefox 3.5-4.0

Кодек Internet Explorer 9 Chrome 6 Opera 10.60 Safari 5 Firefox 3.6
ogg/vorbis - + + - +
wav - - + + +
mp3 + + - + -
AAC + + - + -

 

 

<canvas id="идентификатор">
</canvas>

 

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Атрибуты:


height - Задает высоту холста. По умолчанию 300 пикселов.
width - Задает ширину холста. По умолчанию 150 пикселов.

Пример:

<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<script>
window.onload = function() {
var drawingCanvas = document.getElementById('smile');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#000";
context.fillStyle = "#fc0";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем левый глаз
context.fillStyle = "#fff";
context.beginPath();
context.arc(84,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем правый глаз
context.beginPath();
context.arc(116,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем рот
context.beginPath();
context.moveTo(70,115);
context.quadraticCurveTo(100,130,130,115);
context.quadraticCurveTo(100,150,70,115);
context.closePath();
context.stroke();
context.fill();
}
}
</script>
</head>
<body>
<canvas id="smile" width="200" height="200">
<p>Ваш браузер не поддерживает рисование.</p>
</canvas>
</body>
</html>

Браузеры:

Internet Explorer 9.0

Chrome 9.0-12.0

Opera 9.6-11.0

Safari 3.1-5.0

Firefox 3.5-4.0

 

<menu>
<command>текст</command>
 </menu>

Создает команду в виде переключателя, флажка или обычной кнопки. Тег <command> должен располагаться внутри <menu>, в противном случае он не будет показан.

Атрибуты:
checked - Активирует команду. Доступно только если type установлен как radio или checkbox.
disabled - Задает, доступна команда или нет.
icon - Адрес картинки, которая показывается как команда.
label - Название команды.
radiogroup - Задает имя группы переключателей. Доступно только если type установлен как radio.
type - Определяет тип команды (checkbox, command, radio). По умолчанию command.

Пример:

HTML 5IE 7IE 8IE 9Cr 9Op 11Sa 5Fx 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег COMMAND</title>
</head>
<body>
<menu>
<command onclick="alert('Слава роботам!')" label="Выполнить директиву №1">
<command onclick="alert('Сдавайтесь, людишки!')" label="Выполнить директиву №2">
<command onclick="alert('Убить всех человеков!')" label="Выполнить директиву №3">
</menu>
</body>
</html>

Браузеры:

Internet Explorer -

Chrome -

Opera -

Safari -

Firefox -

 

<input list="<идентификатор>">
<datalist id="<идентификатор>">
<option value="Текст1">
<option value="Текст2">
 </datalist>

Атрибуты

 Список, создаваемый тегом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list тега <input>.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datalist</title>
</head>
<body>
<p>Выберите любимого персонажа:</p>
<p><input list="character">
<datalist id="character">
<option value="Чебурашка"></option>
<option value="Крокодил Гена"></option>
<option value="Шапокляк"></option>
</datalist></p>
</body>
</html>

 

Браузеры:

Internet Explorer -

Chrome -

Opera 9.6-11.0

Safari -

Firefox 4.0-5.0

 

<details open="open">Текст</details>

Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

 

Атрибуты
 open - Показывает информацию внутри тега.

 

Пример

HTML 5IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>details</title>
</head>
<body>
<details>Покажи, что у тебя есть!</details>
</body>
</html>

 

Браузеры

Internet Explorer -

Chrome 12.0

Opera -

Safari -

Firefox -

 

<figure>
<figcaption>Описание</figcaption>
</figure>

 

Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

 

Пример

HTML 5IE 7IE 8IE 9Cr 9Op 11Sa 5Fx 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Тег FIGCAPTION</title>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<style>
figure {
background: #d9dabb; /* Цвет фона */
display: block; /* Блочный элемент */
width: 150px; /* Ширина */
height: 190px; /* Высота */
float: left; /* Блоки выстраиваются по горизонтали */
margin: 0 10px 10px 0; /* Отступы */
text-align: center; /* Выравнивание по центру */
}
figure img {
border: 2px solid #8b8e4b; /* Параметры рамки */
}
figure p {
margin-bottom: 0; /* Отступ снизу */
}
</style>
</head>
<body>
<article>
<figure>
<p><img src="images/thumb3.jpg" alt="" /></p>
<figcaption>Купеческий клуб</figcaption>
</figure>
<figure>
<p><img src="images/thumb4.jpg" alt="" /></p>
<figcaption>Памятник Св. Владимиру</figcaption>
</figure>
</article>
</body>
</html>

 

 

Браузеры:

Internet Explorer 9.0

Chrome 6.0-9.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 4.0

Internet Explorer до версии 8.0 включительно игнорирует тег <figcaption>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

 Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

<figure>
...
</figure>

 

Используется для группирования любых элементов, например, изображений и подписей к ним.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Тег FIGURE</title>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<style>
figure {
background: #5f6a72; /* Цвет фона */
padding: 10px; /* Поля вокруг */
display: block; /* Блочный элемент */
width: 150px; /* Ширина */
float: left; /* Блоки выстраиваются по горизонтали */
margin: 0 10px 10px 0; /* Отступы */
text-align: center; /* Выравнивание по центру */
}
figcaption {
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<article>
<figure>
<p><img src="images/thumb1.jpg" alt="" /></p>
<figcaption>Софийский собор</figcaption>
</figure>
<figure>
<p><img src="images/thumb2.jpg" alt="" /></p>
<figcaption>Польский костел</figcaption>
</figure>
</article>
</body>
</html>

 

 

Браузеры

Internet Explorer -

Chrome 6.0-9.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 4.0


Internet Explorer до версии 8.0 включительно игнорирует тег <figure>, но отображает его содержимое. Также в этом браузере любые стили не применяются к элементу, пока он не создан через скрипт, как показано в примере.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

<footer>
</footer>

 

Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагается имя автора, дата документа, контактная и правовая информация.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>footer</title>
</head>
<body>
<header>
<h1>Персональный сайт Кристины Ветровой</h1>
</header>
<article>
<h2>Добро пожаловать!</h2>
<p>Рада приветствовать вас на своем сайте.</p>
</article>
<footer>
Copyright Кристина Ветрова
</footer>
</body>
</html>

 

 

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <footer>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 4.0-6.0

 

<header>
</header>

 

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>header</title>
 </head> 
 <body>
  <header>
    <h1>Персональный сайт Кристины Ветровой</h1>
  </header>
  <article>
    <h2>Добро пожаловать!</h2>
    <p>Рада приветствовать вас на своем сайте.</p>
  </article>
  <footer>
    Copyright Кристина Ветрова
  </footer>
 </body> 
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <header>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору HEADER.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 4.0-6.0

 

<hgroup>
</hgroup>

Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.

Пример

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hgroup</title>
 </head> 
 <body>
  <hgroup>
    <h1>Кристина Ветрова</h1>
    <h2>Персональный сайт</h2>
  </hgroup>
 </body> 
</html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <hgroup>, но отображает его содержимое.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 4.0-6.0

 

<form>
<keygen></keygen>
</form>

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


Атрибуты

autofocus - Передает фокус элементу при загрузке страницы.
challenge - Определяет, должно ли значение изменяться при отправке формы.
disabled - Отключает этот элемент.
form - Идентификатор формы к которой применяется шифрование.
keytype - Задает алгоритм шифрования ключа. К примеру, значение rsa использует криптографический алгоритм RSA.
name - Имя элемента.

 

Браузеры

Internet Explorer -

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 2.0-5.0

Firefox 3.0-6.0

 

Информация взята с htmlbook.ru

Похожие статьи:

HTML5 Новые теги, поддержка браузерами p.2

Условные комментарии для IE

Как правильно верстать на HTML

10-ка полезных Firefox плагинов для веб дизайнеров

Рубрики: Браузеры , Верстка , Сайты
Тэги: chrome , explorer , firefox , html , opera , safari
Оставить комментарий
test