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