Веб-технологии постоянно эволюционируют. Каждый день создаются новые сайты, которые расширяют возможности HTML. HTML 4 существует в течение почти десяти лет, но издатели ищут новые способы расширения функционала этого формата. Однако разнообразие языков и браузеров ограничивает некоторые его возможности.
Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.
Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.
Заметим, что спецификация находится еще в стадии разработки, и весьма далека от завершения. Таким образом, вполне возможно, что любые функции, упомянутые в этой статье, могут измениться в будущем. Данная статья призвана описать новые возможности формата HTML версии 5.
HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.
На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -
Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.
...
...
...
...
...
Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.
Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.
Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».
Элемент «header»
представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.
A Preview of HTML 5
By Lachlan HuntExample BlogInsert tag line here.
Элемент «footer»
представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.
Элемент «aside»
определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.
HTML5 представляет собой последнюю версию основного языка разметки web – страниц. За последние 10 лет HTML не имел серьёзных изменений, что является немного странным в соответствии с тем как стремительно развиваться web-технологии. И вот наконец нам переставлен HTML5, и что же нового мы получили в этой версии, расскажет эта статья.
У HTML5 в сравнении с предыдущим XHTML не такие строгие правила, теперь вы можете:
Новые теги.
И так в HTML5 появились новые теги.
Есть также исключённые теги, которые являются неактуальными и не рекомендованы для использования.
Так что если вы знакомы с предыдущими версиями HTML, то у вас не будет никаких сложностей в понимании HTML5. А новые теги и атрибуты помогут вам в создании новых и улучшения существующих сайтов, и благодаря новым возможностям это делать станет намного легче.
Но возникает вопрос, а будет ли HTML5 правильно отображаться в старых версия браузеров.
Конечно будет, естественно кроме новых тегов. Страницы сделанные с использованием HTML5 будут отображаться во всех браузерах, но те кто использует новые версии могут получить и увидеть намного больше.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги
и , чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
Теперь нам доступны следующие структурные теги:
Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
Этот тег применяется для того, чтобы определить нижнюю часть документа.
Цель его в том, чтобы определить список ссылок на другие HTML страницы.
Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.
Заголовок
Заголовок 1
Некоторый текст...
Заголовок 2
Некоторый текст..
Ссылка 1
Ссылка 2
Copyright 2011
My Company
Как вы видите мы поместили название нашего документа в теги
. Затем мы добавили раздел к нашей странице при помощи тэга
и вложили в него 2 тега
, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг
. И наконец мы создали нижний колонтитул нашей страницы при помощи тега
.
Так и что же здесь особенного? Мы могли сделать тоже самое используя старый хороший тэг
. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
Тег
используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски.
Основной текст... Цитата...
Веб-браузер никак не выделяет текст заключенный в тэге
, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг
используется для создания диалогов между пользователями:
Пользователь 1
Сообщение пользователя 1
Пользователь 2
Сообщение пользователя 2
В тег
мы вложили еще два тэга:
- содержащий имя пользователя и
для отображения сообщения пользователя.
Третий тег
используется для того чтобы указать название изображения.
Заголовок изображения
=
"Некоторое изображение" src="/image.jpg" width="200" height="200">
Мы использовали тэг
чтобы указать название изображения, тег ![]()
, чтобы вставить определенное изображение и тэг
чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.
Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block;
чтобы они должным образом отображались. Что касается старых версий Internet Explorer то необходимо так же добавить следующее:
<
script>
document.createElement
("header"
)
;
document.createElement
("footer"
)
;
document.createElement
("section"
)
;
document.createElement
("aside"
)
;
document.createElement
("article"
)
;
document.createElement
("nav"
)
;
Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега есть по умолчанию, поэтому его мы можем не добавлять.
Встроенные теги.
У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
Тег используется для обозначения какой-то части текста для определенных целей, например чтобы показать важную часть текста.
Некоторая очень важная часть текста...
Мы вставили определенную важную часть в тэг
.
Тег
используется для обозначения времени и даты в каком либо тексте, например:
Тег
используется чтобы показать некоторые числа в определенном формате, например:
ежемесячный доход$15,000...
У тега
есть 6 полезных атрибутов:
- value
- задает фактическое значение чего-то;
- min
- задает минимальное значение чего-то;
- low
- определяет предел, при достижении которого значение считается низким;
- high
- определяет предел при котором значение считается низким;
- max
- определяет максимальное значение чего-то;
- optimum
- определяет оптимальное значение чего-то.
Например:
Концентрация сахара: 8.2.
Последний новый тэг
используется чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:
Завершение: 20%
Тег
имеет два атрибута value - текущее значение прогресса и max - максимально значение прогресса.
Мультимедийные теги.
В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа и
.
Вот пример применения тега
:
Сейчас играет...
У этого тега имеется три атрибута:
- src
- путь к звуквому файлу;
- autoplay
- определяет начать ли проигрываться файлу сразу после загрузки страницы в браузере;
- loop
- определяет сколько раз аудио должно проигрываться.
Тег
позволяет разместить внутри себе другие тэги, содержащие некоторую информацию.
Тег
используется для того, чтобы вывести на страницу видео файлы.
Клип...
Атрибут src
определяет путь к видео файлу.
Мультимедийные теги позволяют вывести аудио и видео файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.
В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
Тег
являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег в HTML5 выполняет роль контейнера для тега
, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
Используя эти тэги, мы можем создавать различные интерактивные меню.
Тег
используется чтобы показать некоторую дополнительную информацию, например поле справки.
Некоторый контент Информация справки ...
Тег
используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
<
script>
var
example =
document.getElementById
("sample"
)
;
var
context =
example.getContext
("2d"
)
;
ctx.fillStyle
=
"#FF0000"
;
ctx.fillRect
(0
,
0
,
80
,
100
)
;
<
canvas id=
"sample"
width=
"300"
height=
"300"
>
Ваш браузер не поддерживает HTML5.
Атрибут ID используется для идентификации тега
как объекта DOM (Document Object Model)
. Далее указываются атрибуты ширины и высоты. Текст заключенный между тегами
будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.
Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.
С выходом HTML5
, в HTML добавилось много новых функций. И что еще лучше, некоторые браузеры уже поддерживают часть этих функций, когда другие еще двигаются к этому. Вы можете следить за добавлением этих функций в браузеры на этой странице .
1. Новый Doctype и Charset.
Одно из достоинств HTML5 – это его простота.
Да, вот и все. Буквально два слова. Это простота объясняется, возможно, тем что HTML5 существует сам по себе, а не остается частью SGML.
Charset так же очень просто, используется utf-8, и задается так же, буквально одним тегом:
2. Новая структура
HTML5 понимает, что веб страницы имеет структуру, так же как, например, книга. Обычно это навигация, сам контент, боковое меню (сайдбар) и заглавную часть. И в HTML5 предусмотрены теги для всех этих элементов.
- – определяет разделы страницы
- – определяет заголовок страницы
- – определяет нижний колонтитул страницы
- – определяет навигацию по странице
- – определяет статью или основной контент на странице
- – определяет дополнительный контент, боковую панель на странице
- – определяет изображение, аннотацию статьи
3. Новые встроенные элементы.
Эти новые элементы определяют некоторые базовые концепции и обозначают элементы страницы:
- – для обозначения содержимого
- – для обозначения времени или даты
- – для обозначения некоторых измерений, например дискового пространства
- – для обозначения ваших успехов и продвижения
4. Новая поддержка динамических страниц
HTML 5 был разработан для упрощения задач веб-разработчиков, по-этому появилось много новых возможностей для поддержки динамических страниц.
- Контекстное меню – HTML 5 будет поддерживать создание и использование контекстного меню на веб-страницах и приложениях
- асинхронный атрибут – этот тег указует браузеру, что сценарий должен быть загружен асинхронно, так что он не замедлит нагрузки и отображения остальной части страницы.
- – содержит подробную информацию об элементе.
- – создает таблицу, которая создается из базы данных или другого источника динамической страницы
- – старые теги вернулись, позволяя создавать системы меню на ваших веб-страницах
- – определяет действия, которые должны произойти, когда динамический элемент активируется
5. Новые типы форм
HTML5 поддерживает все старые типы форм, но так же добавлены и новые:
- datetime
- datetime-local
- month
- number
- range
- email
6. Новые элементы
Появились некоторые новые элементы в HTML5:
- – элемент, который позволяет вам использовать JavaScript на веб-страницах.
Это может позволить вам добавить изображения или графики в подсказки или просто создать динамическую графику на странице “на ходу”.
- – добавляет видео на веб-страницу.
- – добавляет звук на веб-страницу.
7.Удаленные элементы
Существуют так же элементы HTML4, которые больше не могут использоваться в HTML5. Большинство из них давно устарели, по-этому такие действия не удивительны.
HTML5 является последней и самой лучшей версией наиболее распространенного языка разметки в Интернете. В последней версии языка есть некоторые большие изменения, и, если вы их не используете, вы упускаете действительно классную функциональность.
Я не буду рассказывать о каждом новом элементе в пятой версии HTML, но эти девять являются одними из самых важных.
Введение в семантические элементы
Как и в большинстве интернета, HTML5 переключился на семантику. Теперь теги, которые раньше использовались просто для форматирования, также используются, чтобы сообщать браузеру и поисковым системам о том, что они окружают.
Например,
Просто сообщает браузеру, что содержит абзац. , который мы обсудим ниже, сообщает браузеру, что он содержит основное содержимое страницы.
Семантическая сеть все еще развивается, и мы только начали изучать поверхность того, что она может сделать. HTML5 помогает принести семантическую разметку в гораздо большей части Интернета, и это может быть полезно для будущего семантической обработки.
1. (Статья)
Тег определяет «независимый, автономный контент». Самый простой пример - это, конечно, статья. В этой статье мы открываем тег перед введением и закрываем его после завершения.
Весь текст в вашем автономном разделе.
Но есть и другие способы его использования. Например, многие кулинарные блоги включают личные истории о том, как появился рецепт или почему это важно для писателя. Затем следует рецепт. Вы можете сделать аргумент, что каждый из этих элементов может стоять в одиночестве.
На форуме каждый пост или тред можно считать автономным, и каждый из них может быть помечен его собственным тегом . По большей части он будет использоваться в основном содержимом страницы. Но имейте в виду, что вы можете использовать его более творчески.
2. (Раздел)
тесно связан с . Это определяет «тематическую группировку контента, как правило, с заголовком. Таким образом, будет внутри ... правильно?
Не обязательно. W3 указывает, что это зависит от структуры вашего сайта. У вас может быть автономный контент в разных разделах вашей страницы (например, на первой странице новостного сайта). Тогда у вас могут быть разделы в этой статье.
Почему вам нужен ЦАП
Все звучит лучше.
Как настроить ЦАП Вот что вам нужно сделать. . .
Вы можете даже иметь разделы в разделах, если они соответствуют вашей странице. Помните, что раздел - это просто «тематическая группировка контента», и вы найдете множество мест для его использования.
3. (Заголовок)
Этот элемент «должен использоваться как контейнер для вводного контента. Короче говоря, это часть вашей страницы, которая помогает людям понять, что они собираются читать.
Но не обманывайте себя - вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения названия страницы и вводного абзаца вашего сообщения в блоге. Но вы также можете использовать его, чтобы отметить вводный контент для каждого раздела.
Разделы обычно содержат по крайней мере один тег заголовка - H1, H2 и т. д. Это не обязательно, но если вы используете тег хуже не станет.
4. (Нижний колонтитул)
W3 говорит, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.». Вы можете думать о нем как о «домашнем» материале.
В документации также указано, что на вашей странице может быть более одного нижнего колонтитула. Но, по-моему, всю эту информацию лучше держать в одном месте.
5. (Навигация)
Атрибут allowfullscreen для фреймов Новый Булев атрибут для фреймов allowfullscreen позволяет изменять способ отображения контента при помощи метода requestFullscreen(). С его помощью можно разворачивать контент на весь экран.
Проверка орфографии при помощи element.forceSpellCheck() Новый метод element.forceSpellCheck() позволяет включать проверку текстовых элементов на орфографию. Это также первая функция, которая пока что не поддерживается ни в одном браузере. Чисто теоретически, данный метод можно использовать для проверки орфографии нередактируемых элементов.
Функции, которые не были реализованы Некоторые из функций, прописанных в первых черновиках спецификации, были в конечном итоге удалены, в основном из-за отсутствия интереса со стороны разработчиков браузеров. Вот некоторые из интересных функций:
Атрибут inert Атрибут inert должен был отключать пользовательское взаимодействие для всех дочерних элементов. То же самое, что добавить атрибут disabled ко всем элементам вручную.
Тег dialog С помощью тега dialog можно было создавать попап окна. Была даже продумана удобная форма интеграции. Атрибут method тега dialog запрещал отправку формы на сервер, вместо этого тег возвращал значение создателю диалога.
Тег до сих пор поддерживается в Firefox, пример его работы:
Дополнительные ссылки Это отнюдь не полный список изменений в HTML 5.1. В спецификации прописано множество мелких функций и изменений, которые были приняты в Living Standard, а также много функций, которые были удалены. Полный список изменений можете посмотреть в разделе Changes спецификации. А пока что будем надеяться, что разработчики браузеров быстро подхватят новые функции!
А что вам в HTML 5.1 понравилось больше всего? Пишите в комментариях!
Редакция:
Pavels Jelisejevs
