Основы HTML5

HTML5 - язык для структурирования и представления содержимого документа, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas

Основы HTML5

» » Сообщение:

Основы HTML5
Основы HTML5

HTML5 - это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.

Ключевые особенности html5:

HTML5 более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

HTML5 предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

В HTML5 есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.

Что дает использование HTML5?

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Новые возможности HTML5

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

Новые элементы html5

Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки.
Вот некоторые новые теги:

  • <header> и <footer>
  • <nav> для любых видов меню
  • <aside> для сайдбаров или связного контента
  • <article> для статей
  • <section> практически то же, что и div
  • <audio> и <video> теги позволяют проигрывать видео без плагинов
  • <canvas> для рисование на странице использую javascript
  • <embed> для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об ariaи role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений.
Вот некоторые из них:

  • Audio and video позволяет проигрывать видео в браузере без плагинов.
  • Geolocation: определяет положение посетителя.
  • Drag and drop: например, для загрузки файла перетаскиванием его в браузер.
  • Application cache: обеспечивает поддержку открытия сайтов offline.
  • Web workers: запускает JavaScript в фоновом режиме
  • Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.
  • Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

Примеры использования html5

HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать.

Пример разбивки страницы с использованием html5 элементов:

Пример разбивки страницы с использованием html5 элементов

Код примера простейшей веб-страницы на html5:

Код: Выделить всё Развернуть
<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
   <title></title>
    <meta name="author" content="" />
    <meta name="description" content="" />
   <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
 <body>
    <header>
        <h1><a href="/">Page Title</a></h1>
        <nav>
            <ol>
                <li><a href="">Nav Link 1</a></li>
                <li><a href="">Nav Link 2</a></li>
                <li><a href="">Nav Link 3</a></li>
            </ol>
        </nav>
    </header>
    <article>
        <h1>Article Header</h1>
        <p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
         <h2>Article Subhead</h2>
        <p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
     </article>
     <aside>
        <h2>Sidebar Content</h2>
    </aside>
     <footer>
        <p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
    </footer>
 </div>
</body>
</html>

Формы в HTML5

Очень много новых возможностей по работе с формами появилось в html5. Появились новые типы для тегов input. Новые типы призваны упростить ввод данных в поля формы с мобильных устройств.
Например, если мы сделает input с типом email:

Код: Выделить всё Развернуть
<input type="email">

то на десктопе мы разницы с типам text не увидим, но когда будем вводить данные в поле email со смартфона, откроется специальная клавиатура с символом «@».

Заключение

HTML5 делает более комфортным использование интернета для обычных пользователей. Также HTML5 - это объемная мощная технология, которая делает разработку более удобным и приятным занятием. Он на столько огромен, что в одной статье даже не перечислишь всех его возможностей.

По материалам: webformyself.com

html5, возможности, article, javascript, header, aside, footer, элементы, браузеры



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0594HTML5 Атрибуты. Новые и старые атри...
Сообщение от: Admin
02403Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin
0623Modernizr - бархатный путь в HTML5....
Сообщение от: Admin
02097К.Сухов. HTML5 - Путеводитель по те...
Сообщение от: Admin
11176Re: Избегаем популярных ошибок в HT...
Сообщение от: Admin