Быстрая пробежка по HTML5
Несомненно, HTML5 в последнее время является горячей темой для обсуждения среди разработчиков. Давайте попробуем выяснить, что хорошее принес нам новый стандарт и быстро пройдемся по новым возможностям HTML5.
Новые семантические элементы
В HTML5 появились возможность использования семантических элементов, назначение которых понятно как разработчикам, так и браузерам. К примеру, тэг <div> не несет никакой смысловой нагрузки, он просто абстрактный блок в HTML документе. Чтобы придать этому блоку какой-то смысл ему обычно назначают id или class со значением описывающее назначение данного элемента. Например, так:
<div id=»header»> или <div class=»footer»>
В данном случае уже понятно, что блок содержит какой-то заголовок или футер. Но это понятно нам, разработчика, но ничего не говорит браузеру.
В HTML5 предыдущие блоки можно описать новыми семантическими элементами:
<header> или <footer>
Смысловая нагрузка которых уже будет понятна как разработчикам, так и браузерам.
Краткий набор новых семантических элементов, которые появились в HTML5: <header>, <footer>, <nav>, <section>, <aside>, <article>, <author>, <mark>.
По именам этих элементов можно легко догадаться о их назначении.
Простой пример HTML5 верстки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title >
<link rel ="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<h1>Page header</h1>
</header>
<nav>
<ul>
<li><a href="#">Menu item 1</a></ li>
<li><a href="#">Menu item 2</a></ li>
<li><a href="#">Menu item 3</a></ li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the content of the <mark>first</mark> article.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the content of the <mark>second</mark> article.
</section>
</article>
</section>
<aside>
<section>
<h2>Sidebar Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
</aside >
<footer>Copyright 2012</footer>
</body>
</html>Поддержка аудио и видео
С появлением HTML5 появилось возможность воспроизводить на странице аудио и видео файлы без использования дополнительных инструментов, таких как, например, Flash.
Воспроизведение аудио файлов на странице осуществляется с помощью тэга <audio>, например, следующим образом:
<audio controls ="controls" autoplay ="autoplay" loop="loop">
<source src ="audio/audiofile.mp3" type="audio/mp3" />
<source src ="audio/audiofile.ogg" type="audio/ogg" />
Ваш браузер не поддерживает audio элемент
</audio>В разных браузерах на странице это будет выглядеть по-разному, например в Opera 11, это будет следующим образом:
Атрибуты controls, autoplay и loop служат для отображения управляющих кнопок, авто воспроизведения и циклического воспроизведения файла соответственно. Элемент <source> указывает на местоположение аудио файла и его формат. Так как, разные браузеры поддерживают разные кодеки для воспроизведения аудио файлов, существует вероятность отсутствия нужного кодека и невозможность воспроизведения. Поэтому, следует задавать дополнительные тэги <source> и предоставить аудио файл в нескольких форматах.
Если браузер не поддерживает <audio>, будет отображаться текст из этого тэга.
Дополнительную информацию об элементе <audio> можно найти тут
Встраивание в веб-страницу видео происходит аналогичным способом, например так:
<video controls ="controls">
<source src ="video/video.ogv" type="video/ogg" />
<source src ="video/video.mp4" type="video/mp4" />
Ваш браузер не поддерживает video элемент
</video>Дополнительную информацию об элементе < video> и возможные его атрибуты можно найти тут
Рисование в HTML5 используя элемент canvas
Еще один интересный элемент в HTML5 является <canvas>, он служит холстом для рисования на странице, используя JavaScript.
Ниже приведен простой пример, демонстрирующий работу элемента <canvas>. Я собираюсь нарисовать синий квадрат с белой буквой «М» внутри него. Пример очень простой и хорошо закомментирован, поэтому в дополнительных пояснениях не нуждается.
<canvas id="my-canvas" width="300" height="300">
Ващ браузер не поддерживает элемент canvas.
</canvas><script type="text/javascript">
var canvas = document.getElementById("my-canvas"); //Ссылка на наш холст
var m = canvas.getContext("2d"); // Метод манипуляции с графикой
// Рисуем синий квадрат
m.fillStyle = "#448abb"; //Цвет заливки
m.fillRect(0, 0, 300, 300); //Размер квадрата
// Рисуем белую букву М
m.beginPath(); // Начада процесса рисования
m.lineWidth = "15"; // Ширина линии
m.strokeStyle = "#fff"; // Цвет линии
m.moveTo(20, 280); // Позиционируем кисть рисования в нижний левый угол квадрата
m.lineTo(20, 20); // Рисуем вертикальную линию до верзнего левого угла,
m.lineTo(150, 150); // потом к центру,
m.lineTo(280, 20); // потом до верзнего правого угла квадрата
m.lineTo(280, 280); // и последняя вертикальная линия.
m.stroke(); // Этот метод визуализирует все что мы нарисовали.
</script>Поддержка браузерами
На данный момент все современные браузеры в какой-то мере поддерживают HTML5. Но далеко не в полной мере.
Хуже обстоят дела со старыми браузерами (Например, Internet Explorer 8), они и вовсе не поддерживают HTML5.
Но, к счастью, существуют JavaScript библиотеки, которые способны эмулировать поддержку HTML5 в старых браузерах. Их легко найти в Интернете.
Исчерпывающую информацию о поддержке современными браузерами стандарта HTML5 можно найти тут.