Теги HTML5

теги 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&gt; используется для обозначения цитат.  Обычно текст, заключенный в теги <cite> браузер отображает, используя курсив. Он может быть использован сам по себе или вместе с одним из цитату <q> и <blockquote>:

<cite title=”заголовок, описание цитаты”>Цитата</cite>

10. <aside>

<aside> указывает, на то, что окружает содержимое статьи или веб-страницы. Чаще всего, это информация боковой колонки сайта.
Синтаксис:

<aside>
Содержимое боковой колонки, сайдбара
</aside>

HTML5 - язык будущего для создания web-страниц. Он удобный, функциональный. С ним изготовление сайтов становится более простым и комфортным.

3 ответа к «Теги HTML5»

  1. Уже радует и то, что появились шаблоны html5 для blogspot. Пример http://demo.btemplates4u.com/2012/07/canvas-html5-blogger-template.html
    Только совершенно не работает вкладка Дизайн, все придется править вручную, ковыряясь в кодах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *