17:55, 20 Февраля 2013

Мы верстаем сайты в HTML5

17:55, 20 ФЕВРАЛЯ
HTML5

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

Целью разработки нового стандарта стала более простая, гибкая возможность создания динамических веб-страниц c технологиями сегодняшнего дня, а HTML4-стандарт был разработан в 90-ых и предназначался, по большей части, для статических страниц. В наше время на сайтах присутствует множество различного динамического контента, в частности: видео, аудио, обновляемая информация в определенном блоке без перезагрузки всей страницы и т. д. Хотя данные вещи мы видели на сайтах и до разработки HTML5, но данный функционал приходилось реализовывать при помощи скриптов и сторонних плагинов. Посетитель сайта визуально может и не заметит отличий от HTML4, но для разработчиков сайтов существенно упрощается сам процесс создания веб-страниц.

Например, для воспроизведения видео на веб-странице HTML4 требуется плагин Adobe Flash Player. Работа данной технологии сильно зависела от производительности процессора, поэтому на слабых компьютерах и различных устройствах заметно падала производительность. Так же без наличия данного плагина не представляется возможным воспроизведение видео в принципе. А в HTML5 воспроизведение видео может происходить без сторонних плагинов, при помощи самого браузера, что позволило убить сразу двух зайцев: отказаться от ресурсоемкого плагина и сделать возможным воспроизведение видео на любых устройствах. Это всего лишь один пример реализации данного стандарта, так что HTML5 дал много новых возможностей для создания необходимого функционала на веб-странице.

Поддержка HTML5 браузерами

На данный момент в css-стилях для тэгов HTML5 необходимо прописывать «display: block;», чтобы браузеры их правильно обрабатывали.

Как обычно, для браузера Internet Explorer до девятой версии не так все просто. Для того, чтобы новые тэги отображались как надо, необходимо подключить специальный скрипт в следующим кодом:

<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Этот плагин основан на простом решении: он создает необходимый элемент в DOM браузера Internet Explorer, в результате чего он без ошибок отображает стилизацию тэгов HTML5, за исключением <audio>, <video> и <svg>.

HTML5 — минимальная структура страницы

Разметка страницы начинается с «DOCTYPE» — при помощи него мы сообщаем браузеру тип разметки кода и ее версию. Для HTML4 доктайп достаточно длинный, а для HTML5 доктайп имеет единый вид и его достаточно легко запомнить:

<!DOCTYPE html>

Такие изменения по минимизации кода претерпели и другие тэги, вот некоторые из них:

  1. Тэг <meta>

    — было: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    — стало: <meta charset="windows-1251">

  2. Тэг <link>

    — было: <link href="styles.css" type="text/css" rel="stylesheet" />
    — стало: <link href="styles.css" rel="stylesheet" />

  3. Тэг <script>

    — было: <script type="text/javascript"></script>
    — стало: <script></script>

  4. Тэг <table>

    — было: <table class="some_class" cellspacing="0" cellpadding="0">
    — стало: <table class="some_class">

И так, шаблон пустой страницы на HTML5 будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Название страницы</title>
<link href="styles.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
Шаблон пустой страницы для HTML5
</body>
</html>

Основные тэги HTML5 для верстки страницы

Так же в HTML5 появились новые тэги для структурирования информации на веб-странице, в результате чего мы можем логически указывать назначение блока, его значимость на данной веб-странице и какая информация в нем находится. Эти тэги помогут при индексировании вашего сайта поисковыми системами (Yandex, Google и др.), т. к. поисковики четко увидят, какая именно информация главная на сайте, какая — второстепенная, и что она из себя представляет. Так что HTML5 достаточно хорошо помогает и для SEO-оптимизации сайта.

Перейдем к разбору новых тэгов и для чего они предназначены.

<header> Используется для обозначения «шапки» сайта, так и для заголовков разделов.
<footer> Используется для обозначения «подвала» сайта, так и для разделения второстепенной информации в разделе от главной.
<hgroup> Группировка тэгов <H1> … <H6>, когда они логически используются вместе. Например, название компании и слоган.
<nav> Предназначен для группировки ссылок. Например, главное и боковое меню сайта.
<section> Тематическая группировка информации на странице.
<aside> Представляет собой раздел страницы, который состоит из контента, имеющего независимое отношение к основному содержанию на странице. Обычно используется для боковых панелей: боковое меню, опросы и т.д.
<article> Текстовая информация в разделе. Например, статья или текст новости.
<figure> Позволяет выделить в отдельный элемент изображение.
<figcaption> Предназначен для определения заголовка <figure>. Должен быть написан внутри данного тэга.


Схематически показано, как должна выглядеть страница:

Схема страницы HTML5

Читайте также

Мониторинг и поддержка 24/7
14:10, 1 Июня
У вашего сайта нет выходных и перерывов на обед. 24 часа в сутки, 7 дней в неделю, каждую минуту он должен работать. Даже полчаса недоступности ресурса приносят реальные убытки и подрывают доверие к компании.

Как быть уверенным в непрерывной работоспособности сайта? У нас есть решение! Читать далее
Студии ONEWAY 11 лет!
08:55, 3 Марта
5 день недели, 3 день весны, 11 День рождения нашей Студии!

За прошедший год мы успели поработать над интересными проектами с именитыми партнёрами, пополнить нашу команду новыми талантами, занять достойные позиции в рейтингах и получить несколько престижных наград. Читать далее
8 год подряд лидируем в продажах по СЗФО
17:52, 14 Февраля
В конце января на партнёрской конференции компания "1С-Битрикс" подвела итоги 2016 года. Читать далее