Быстрая пробежка по HTML5

Spread the love

Несомненно, 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 можно найти тут.


Оставьте комментарий