Швидка пробіжка по 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>У різних браузерах на сторінці це буде виглядати по-різному, наприклад 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 можна знайти тут.