HTML5 является последней и самой лучшей версией наиболее распространенного языка разметки в Интернете. В последней версии языка есть некоторые большие изменения, и, если вы их не используете, вы упускаете действительно классную функциональность.
Я не буду рассказывать о каждом новом элементе в пятой версии HTML, но эти девять являются одними из самых важных.
Введение в семантические элементы
Как и в большинстве интернета, HTML5 переключился на семантику. Теперь теги, которые раньше использовались просто для форматирования, также используются, чтобы сообщать браузеру и поисковым системам о том, что они окружают.
Например,
Просто сообщает браузеру, что содержит абзац. , который мы обсудим ниже, сообщает браузеру, что он содержит основное содержимое страницы.
Семантическая сеть все еще развивается, и мы только начали изучать поверхность того, что она может сделать. HTML5 помогает принести семантическую разметку в гораздо большей части Интернета, и это может быть полезно для будущего семантической обработки.
1. (Статья)
Тег определяет «независимый, автономный контент». Самый простой пример - это, конечно, статья. В этой статье мы открываем тег перед введением и закрываем его после завершения.
Весь текст в вашем автономном разделе.
Но есть и другие способы его использования. Например, многие кулинарные блоги включают личные истории о том, как появился рецепт или почему это важно для писателя. Затем следует рецепт. Вы можете сделать аргумент, что каждый из этих элементов может стоять в одиночестве.
На форуме каждый пост или тред можно считать автономным, и каждый из них может быть помечен его собственным тегом . По большей части он будет использоваться в основном содержимом страницы. Но имейте в виду, что вы можете использовать его более творчески.
2. (Раздел)
тесно связан с . Это определяет «тематическую группировку контента, как правило, с заголовком. Таким образом, будет внутри ... правильно?
Не обязательно. W3 указывает, что это зависит от структуры вашего сайта. У вас может быть автономный контент в разных разделах вашей страницы (например, на первой странице новостного сайта). Тогда у вас могут быть разделы в этой статье.
Почему вам нужен ЦАП
Все звучит лучше.
Как настроить ЦАП
Вот что вам нужно сделать. . .
Вы можете даже иметь разделы в разделах, если они соответствуют вашей странице. Помните, что раздел - это просто «тематическая группировка контента», и вы найдете множество мест для его использования.
3. (Заголовок)
Этот элемент «должен использоваться как контейнер для вводного контента. Короче говоря, это часть вашей страницы, которая помогает людям понять, что они собираются читать.
Но не обманывайте себя - вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения названия страницы и вводного абзаца вашего сообщения в блоге. Но вы также можете использовать его, чтобы отметить вводный контент для каждого раздела.
Разделы обычно содержат по крайней мере один тег заголовка - H1, H2 и т. д. Это не обязательно, но если вы используете тег хуже не станет.
4.
W3 говорит, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.». Вы можете думать о нем как о «домашнем» материале.
В документации также указано, что на вашей странице может быть более одного нижнего колонтитула. Но, по-моему, всю эту информацию лучше держать в одном месте.
5.
Обо мне
Это очень простой тег - вот и все. Используйте его для определения раздела навигации и не используйте его снова на своей странице.
6.
Один из самых интересных новых элементов в HTML5 - это aside. W3 дает ему несколько бесполезное определение «некоторое содержание, кроме содержания, в которое оно помещено».
Короче говоря, aside есть все, что связано с (но отдельно от) окружающей информацией. Это может быть боковая панель, которая добавляет детали к вашему контенту. Когда он используется в теге , он предоставляет дополнительную информацию, которая не является необходимой для понимания основного контента.
Например, если бы я включил боковую панель в этой статье, дающую информацию об истории HTML5, это было бы «Дополнительной информацией».
Но тег
Поскольку для этого тега используется несколько применений, это может сбить с толку. Если вы помните, что это «вторичный контент» и что он не всегда должен быть боковой панелью, у вас будет лучшее представление о том, как его использовать.
7. (Детали)
На многих веб-сайтах есть информация, которая должна отображаться, но не заметно. Возможно, это информация об авторских правах для фотографии. Или мелкий шрифт перед или после статьи. Эта информация является именно тем, для чего предназначен тег деталей.
Когда вы используете тег details, вы создаете скрытый текст, который можно легко отобразить. Вот пример:
Нажмите здесь, чтобы просмотреть информацию.
Просто нажмите стрелку, чтобы получить детали. Вот код, используемый для приведенного выше примера:
Тег определяет предложение, которое будет показано, а другое содержимое скрыто. Обратите внимание, что вы можете использовать другие теги в разделе сведений: заголовки, разделы и т. д.
Есть и другие интересные вещи, которые вы можете сделать с HTML, даже если вы не владеете CSS или JSON.
8-9. и (Рисунок и его описание)
Не беспокойтесь, тег , который вы использовали в течение многих лет, не уходит. обходит тег изображения и позволяет браузеру знать, что это автономный образ, диаграмма, список кодов или другая фигура.
Если фигура удалена со страницы, она не повлияет на поток содержимого.
входит в тег рисунка и указывает подпись для изображения. Это может выглядеть примерно так:
Это мой логотип!
Это дает вам встроенный способ добавления надписи к изображениям. Не нужно больше искать это в вашей CMS.
Воспользуйтесь преимуществами HTML5
Новые элементы HTML5 добавляют много нового, особенно для семантических целей. Существуют дополнительные элементы для форматирования, скалярных измерений, выполнения задач и т. д. Вы можете увидеть все новые элементы в W3Schools.
Но если вы сможете освоить эти девять, вы будете на пути к правильному использованию HTML5.
Вы начали использовать HTML5? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!
HTML 5
- это новая версия самого популярного языка разметки.
Уже более 10-ти лет язык гипертекстовой разметки HTML
практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5
.
В HTML 5
добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font
и center
).
Добавлены следующие элементы:
1) header
.
2) footer
.
4) section
.
5) article
.
6) aside
.
7) figure
.
8) dialog
.
9) m (mark)
.
10) time
.
11) meter
.
12) progress
.
13) video
.
14) audio
.
15) details
.
16) datagrid
.
17) menu
.
18) command
.
В остальном осталось всё без изменений. То есть никаких проблем с не возникнет, при условии, что Вы знакомы со стандартным . Собственно, всё осталось как прежде, только добавились новые возможности.
Благодаря нововедениям HTML 5
можно существенно облегчить труд Web-мастеров по , упростив ту же самую разметку.
Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5
со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.
Я уверен, что в ближайшие время HTML 5
смогут увидеть такой же процент пользователей, как сейчас видят HTML 4
, которому уже более 10-ти лет.
А об использовании новых возможностей HTML 5
мы поговорим с Вами в следующих статьях.
Стандарт HTML5 все активнее используется в современном веб-дизайне. И хотя, он до сих пор находится в стадии разработки, многие из его стандартов уже утверждены и используются всеми современными браузерами, в том числе и мобильными.
В этой статье мы рассмотрим некоторые новые возможности HTML5 с конкретными примерами их применения на практике
Новый DOCTYPE
Давайте вспомним, как определяется типичный XHTML документ в разделе DOCTYPE
:
‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›
Объявление типа документа на языке разметки выглядит куда более лаконично и читабельно
‹!DOCTYPE html›
Более того, вы можете применять данный DOCTYPE
при верстке любой страницы. Если браузер не знаком с HTML5, то он применит отобразит страницу в стандартном режиме.
Улучшенная семантика кода
Улучшенная семантика кода позволяет поисковым системам четко разграничивать на странице типы контента, отделять важную информацию, повышать рейтинг страницы по поисковым запросам.
И начать использовать более понятные как человеку, так и машине
‹header› … ‹/header›
‹footer› … ‹/footer›
‹div›
по происхождению не имеют никакой семантической структуры и могут многократно вкладываться в друг друга и в другие контейнеры. Использование же более продуманной семантической структуры позволяет четко разграничить для поисковой системы, где находится заголовок, подвал, а где основная информационная часть.
Элемент
FIGURE
Рассмотрим следующую часть кода:
‹img src="mars.jpg" alt="About Mars" /›
‹p›This is an image of Mars‹/p›
В данном случае поисковым системам сложно определить, что тег ‹p›, содержащий описание картинки, собственно и является ее описанием. Именно поэтому такие конструкции лучше объединять в общий контейнер, которым является ‹figure
›:
‹figure›
‹img src="mars.jpg" alt="About Mars" /›
‹figcaption›
‹p›This is an image of Mars‹/p›
‹/figcaption›
‹/figure›
В данном случае пристутсвует дополнительный тег ‹figcapture›
, который уточняет, где содержимое фигуры, а где ее заголовок
Использование
hgroup
Представьте, что у вас на сайте заголовок состоит из основного заголовка и подзаголовка. Использование обычных тегов ‹h1›
и ‹h2›
никак не отображает зависимость между двумя этими пунктами. Поэтому их можно объединить семантически, используя тег ‹hgroup›
:
‹header›
‹hgroup›
‹h1›Photogallery‹/h1›
‹h2›Our vacancy in Prague‹/h2›
‹/hgroup›
‹/header›
Никаких types
для подключения скриптов и таблиц стилей
Возможно, вы до сих пор используете структуры для подключения скриптов, библиотек, таблиц стилей и т.д. следующего вида:
Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type
больше нет необходимости:
Стандарт XHTML предусматривал необходимость указывать значения атрибутов в одинарных или двойных кавычках. Стандарт HTML5 позволяет не использовать кавычки, если в них нет необходимости, т.е. значение атрибута задается одним словом без пробелов. Более того, вы можете даже не закрывать парные элементы. Вот пример:
‹p class=myClass id=pId›Content
Однако это может повредить читабельности кода со стороны разработчика. Поэтому стиль написания кода полностью зависит от вас, ведь старый (проверенный временем) стиль все так же поддерживается.
Редактируемый контент
HTML5 позволяет сделать контент вашего сайта полностью редактируемым, при этом нет необходимости вставлять скрытые поля для ввода текста. Все, что необходимо – это добавить атрибут contenteditable="true"
(или без кавычек, как мы узнали из предыдущего пункта) к тому элементу, который вы хотите сделать доступным для редактирования. После этого, пользователь сможет редактировать его содержимое непосредственно со страницы.
В данном случае пользователь может добавлять, удалять и редактировать пункты неупорядоченного списка ‹ul›
. Ниже приведен пример списка, пункты которого можно изменить
Watch TV
Listen to music
Play videogames
Новые возможности форм
HTML5 предоставляет пользователям и разработчикам большие возможности по вводу информации в формы. В этих целях добавлены многие полезные вещи. Рассмотрим некоторые из них.
Поля для ввода
email
Используйте атрибут type="email"
к тегу ‹input›
и e поля ввода появятся дополнительные уникальные способности по проверке правильности ввода адреса, и если адрес введен неверно, то браузер продемонстрирует пользователю предупреждающее сообщение.
‹input id="email" name="email" type="email" /›
Результат может быть таким (Google Chrome):
Также существуют и другие поля для ввода, например, адреса вебсайта или номера телефона. Принцип их работы схож с полем email
.
Использование подсказок
Теперь нет необходимости использовать javascript
для создания подсказок (placeholders) для ввода в текстовые поля. HTML5 предлагает использовать специальный атрибут placeholder
, который может выводить фоновую текстовую подсказку для поля.
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Email:
Автофокус
Без использования javascript можно автоматически передать фокус элементу после загрузки страницы. Для этого нужно добавить атрибут без параметров тому полю, которое необходимо вводить в первую очередь.
‹input name="name" type="text" autofocus /›
Поле name будет активировано автоматически и готово для ввода текста.
Обязательные поля
Если необходимо отметить некоторые поля, как обязательные для заполнения теперь достаточно указать атрибут . Таким образом, при подтверждении формы браузер проведет проверку, заполнены ли необходимые поля и, если нет, выдаст сообщение.
Ниже иллюстрация результата работы этого кода (Google Chrome):
Range
Input
HTML5 представляет абсолютно новый элемент управления – range input
, который представляет собой бегунок, значение которого изменяется перетягиванием специального маркера между установленными заранее значениями.
Атрибуты min
и max
используются для задания крайних значений бегунка, step
– это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Локальное хранилище
Локальное хранилище позволяет сохранять информацию введенную пользователем, если страница браузера была закрыта или перезагружена. Это очень удобно, особенно в тех случаях, когда форма достаточно большая и сайт был случайно закрыт.
Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.
Управление локальным хранилищем происходит через объект класса localStorage
с помощью двух методов setData()
и getData()
. Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.
Теперь нет необходимости пользоваться сторонними плагинами и библиотеками для подключения различных аудио и видеофайлов. Все возможности по внедрению медиа теперь включены в спецификацию HTML5.
Аудио
Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.
На странице данный блок может выглядеть вот так (браузер Google Chrome)
У данного тега есть свои особенности поддержки в браузерах. Например, браузер Mozilla Firefox работает с.ogg файлами, тогда как Webkit-браузеры работают с.mp3
Видео
До недавнего времени, единственным способом вставки видеоконтента на HTML-страницу было интегрирование Flash-контента. Однако теперь такую возможность предоставляют сами браузеры, отвечающие спецификациям HTML5. Особую популярность это приобрело тогда, когда на формат HTML5 перешел крупнейший видеохостинг YouTube.com.
Для успешного интегрирования видео в страницу необходимо воспользоваться тегом ‹video›
. К сожалению между производителями браузеров нет единого мнения в каком формате должно быть представлено видео, поэтому каждый из них продвигает свой формат. Если IE и Safsri поддерживают видео в формате H.264 (которое поддерживалось Flash-плеерами), то Opera и Firefox продвигают open source форматы Vorbis и Theora. Chrome же может правильно отображать видео во всех форматах, в том числе WebM.
‹video controls preload›
‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /›
‹source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /›
‹p›Your browser is old. ‹a href="video.mp4"›Download this video instead.‹/a› ‹/p›
‹/video›
Не все браузеры могут отображать HTML5 видео, поэтому под тегом ‹source›
можно указать ссылку для скачивания видео, либо интегрировать Flash плеер.
Атрибут preload
позволяет браузеру автоматически начинать загрузку видео, что может быть полезно, если размер видео достаточно большой. Атрибут controls
позволяет установить стандартные элементы управления видеопотоком.
Что же такого нового в HTML5, чего не было в HTML4?
А новое в принципе все. Спецификация HTML5 несет в себе множество изменений разного уровня и важности. Фундаментальные изменения можно разделить на несколько блоков:
Семантика языка.
В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц.
Рассмотрим наиболее известные из них:
nav
- служит для создания панели навигации;
aside
- является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся навигационными (рекламные баннеры, фотография автора, кнопки социальных сетей и т.д.);
section
- также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей, либо разделять на отдельные секции непосредственно статью на странице;
article
- служит для разбивки страницы на отдельные статьи. Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо;
hgroup
- тэг призван группировать заголовки страницы в одну логическую единицу;
video
- служит для простой вставки видео на страницы сайта;
audio
- также предназначен для простой вставки медиа-контента на страницы сайта;
canvas
- создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.
Про остальные тэги можно узнать из htmlbook.ru .
Мультимедиа
. HTML5 теперь из коробки поддерживает мультимедийный контент (аудио и видео проигрыватель) в HMTL-разметке - с соответствующим API для управления воспроизведением и кодеками.
Графика
. Работать с графикой стало заметно проще, благодаря тэгу canvas и специальному JavaScript API для работы с ним. Также в HTML5 официально включен тэг svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
Веб-формы.
Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами, без использования дополнительных библиотек для валидации вводимых данных, подсказок в формах.
JavaScript API.
API для работы с графикой и мульмедиа, новые расширенные возможности по перемещению объектов и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
Многое другое.
Усовершенствованные сетевые коммуникации. Существенно улучшенное хранение данных. Средства Web Worker для исполнения фоновых процессов. Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером. Повышенная скорость сохранения и загрузки страниц. Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
Итак, очевидно, что формат HTML5 демонстрирует принципиально новый подход к созданию эффектной и запоминающейся графики, интерактивных элементов и прочих составляющих качественного веб-дизайна и интерфейса. Это дает несомненное преимущество – возможность отказа от flash-элементов, которые создают определенные трудности в загрузке страниц. Вместе с этим, определенное время на загрузку таких страниц все же требуется. Кроме того, для корректной работы с HTML5 необходим компьютер, с соответствующими системными мощностями, да и разработчики браузеров ленятся добавлять полную поддержку всех возможностей HTML5.
Что нового в HTML5? Отличия HTML5 от HTML 4
Спецификация HTML5 несет в себе множество изменений разного уровня и разной важности. Принципиально, ключевые изменения можно разделить на 7 блоков:
а) Семантика (смысловое значение единиц языка)
В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.
б) Мультимедиа
HTML5 добавляет встроенную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке -- с соответствующим API для управления.
в) Графика
Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на JavaScript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом SVG (Scalable Vector Graphics).
г) Веб-формы
Новые элементы веб-формы: типы и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами без использования дополнительных библиотек -- от подсказок в поле ввода (placeholder) и проверки вводимых значений до специальных элементов для ввода дат и цвета.
д) JavaScript APIs.
В HTML5 включены новые возможности по перемещению объектов (Drag & Drop), работа с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
е) Новый DOCTYPE
Тег DOCTYPE -- ключевой компонент веб-страниц, претендующих на соответствие стандартам: без него код не пройдет проверку валидатором. DOCTYPE также важен для правильного отображения и работы страницы в браузерах, соответствующих стандартам.
В HTML 4 было 3 вида элемента :
1. Строгий (Strict)
2. Переходный (Transitional)
3. С фреймами (Frameset)
Зачастую выбор того или иного элемента DOCTYPE был достаточно затруднителен. В HTML5 DOCTYPE всего один он пишется так:
Эта короткая запись заменяет старую и длинную форму:
"http://www.w3.org/TR/html4/strict.dtd">
ж) Синтаксис
HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").
XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME (Multipurpose Internet Mail Extensions) тип XML, а элементы должны быть выстроены согласно спецификации XML.