Теги HTML5
HTML5 является пятым пересмотром HTML стандартов, который был создан в 2004 году, но заслужил особое внимания лишь в 2010 году, после выступления Стива Джобса с докладом, в котором он предлагает использовать html5 как альтернативу flash. HTML5 направлен на улучшение World Wide Web языка с поддержкой новейших мультимедийных возможностей. Если раньше это достигалось с помощью сторонних приложений, в настоящее время реализуется непосредственно через HTML код. Давайте рассмотрим основные новые теги HTML5.
Сайт, созданный на html5 отличает прежде всего доктайп. Он выглядит так:
<!DOCTYPE html>
Посмотрите код страницы сайта на HTML5. Смотрите также примеры лучших сайтов HTML5.
1. <video>
Благодаря HTML5, веб-пользователи могут забыть о неприятном плагине Flash. Специальный тег <video> позволяет веб-мастерам вставлять видео без каких-либо дополнений со стороны пользователя. Обратите внимание на простейший код для видео HTML5:
<video src=”/myvideo.mp4″></video>
Или этот код может выглядеть следующим образом:
<video width=”640″ height=”480″ controls autoplay preload>
<source src=”myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”myvideo.webm” type=’video/webm; codecs=”vp8, vorbis”‘>
<source src=”myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<p>Если вы не видите видеоплеера, значит ваш браузер не поддерживает html5 .</p></video>
2. <audio>
Как и в <video> теги, <audio> позволяет вставлять аудио файлы без стороннего программного обеспечения. HTML5 поддерживает следующие форматы аудио файлов: MP3, OGG и WAV аудио. Код выглядит следующим образом:
<audio src=”sound.mp3″ controls autoplay loop></audio>
Среди параметров, которые вы можете добавить к аудио-плеер есть автозапуск (autoplay), повтор (loop), панель управления (control), одновременная загрузка вебстраницы и файла (preload).
Кроме того, рекомендуется следующий код вставки аудио :
<audio controls>
<source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
<source src="audio/music.mp3" type="audio/mpeg">
Если вы не видите аудиоплеера, значит ваш браузер не поддерживает html5 </audio>
3.
HTML5 вводит интересный тег <canvas>, который позволяет владельцам веб-сайтов, создавать очень привлекательный дизайн. Он предназначен для встраивания графических элементов. Этот тег также лежит в основе разработки игр HTML5. Основным инструментом здесь является JavaScript.
Код:
<canvas id="идентификатор">
</canvas>
4. <article>
Внутри <article> заключается статья, заметка, описание или другое содержание сайта. Это лучший HTML5-вариант с точки зрения SEO. Возможно, поисковые системы будут уделять больше веса на текст, который содержится внутри <article>, чем на другие части веб-страницы. Тег <article> снижает необходимость использования тегов <div>.
<article>
<h1>Заголовок статьи</h1>
<p>Статья...</p>
</article>
5. <section>
Если блог был разбит на несколько разделов, то каждый раздел может быть заключен между тегами <section>. Главным преимуществом является то, что каждый раздел может иметь свой собственный заголовок HTML. Как и в случае с <article> тегами, можно предположить, что поисковые системы будут обращать больше внимания на содержание отдельных разделов. Например, если ключевые фразы, находятся в одном разделе, то это подразумевает более высокую релевантности по сравнению с тем, когда эти слова встречаются по всей странице или в разных разделах.
<article>
<h1>Заголовок</h1>
<section><h4>What We Do</h4>
<p>Содержимое абзаца…</p></section>
<section> <h4>Подзаголовок</h4>
<p>Еще абзац…</p></section>
<section><h4>Contact Us</h4>
<p>Абзац…</p></section>
</article>
6. <header>
<header> тег определяет заголовок документа, раздела или статьи. Теги <header> также значимы для SEO. Их можно сравнить с <H1>, но разница в том, что он может содержать много элементов, таких как H1, H2, H3 теги, целые абзацы текста, ссылки (и это важно для SEO), и любую другую информацию.
Синтаксис:
<header>
<h1>Заголовок</h1>
<p><time pubdate datetime=”2011-03-15″></time></p>
</header>
Существуют также теги HTML5 <footer>, который может быть не так важен, как <header>, но все-таки он может содержать важную информацию, и она может быть использована для целей SEO. Здесь обычно содержится информация об авторе документа, об авторском праве, ссылки на условия использования, контактную информацию и т.д.
Синтаксис:
<footer>
<p>@<a href=”https://mycrib.ru/”>Азбука блоггера</a>. Все права защищены</p>
<p><time pubdate datetime=”2012-06-01″></time></p>
</footer>
7 . <nav>
<nav> предназначен для создания навигации по сайту. Виды использования:
- Главной навигации сайта,
- для создания предыдущий / следующий ссылки статьи
- для нумерации.
Однако, не все ссылки документа должны быть заключены между тегами <nav> и </nav> Элемент предназначен только для основного блока навигационных ссылок.
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/html5/”>HTML5</a> |
<a href=”/css/”>CSS</a>
<a href=”/css3/”>CSS3</a> |
<a href=”/js/”>JavaScript</a>
</nav>
8 . <button>
С помощью <button> создают интерактивные кнопки. Внутри <button> элемента вы можете заключить текст или изображение,а также применить JavaScript. Вот пример:
<button name=”aName”>текст кнопки</button>
Тег может содержать разные атрибуты.
9. <cite>
Теги HTML5 <cite> используется для обозначения цитат. Обычно текст, заключенный в теги <cite> браузер отображает, используя курсив. Он может быть использован сам по себе или вместе с одним из цитату <q> и <blockquote>:
<cite title=”заголовок, описание цитаты”>Цитата</cite>
10. <aside>
<aside> указывает, на то, что окружает содержимое статьи или веб-страницы. Чаще всего, это информация боковой колонки сайта.
Синтаксис:
<aside>
Содержимое боковой колонки, сайдбара
</aside>
HTML5 - язык будущего для создания web-страниц. Он удобный, функциональный. С ним изготовление сайтов становится более простым и комфортным.
Спасибо за статью. Как бы это еще к блоггеру применить.
Уже радует и то, что появились шаблоны html5 для blogspot. Пример http://demo.btemplates4u.com/2012/07/canvas-html5-blogger-template.html
Только совершенно не работает вкладка Дизайн, все придется править вручную, ковыряясь в кодах.
Я думаю, что будущее за HTML5.