Что нового в html5. Пять вещей, которые надо знать об HTML5
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? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!
Стандарт 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 и Footer
Теперь можно избавиться от конструкций типа
‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›
И начать использовать более понятные как человеку, так и машине
‹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 для подключения скриптов и таблиц стилей
Возможно, вы до сих пор используете структуры для подключения скриптов, библиотек, таблиц стилей и т.д. следующего вида:
‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›
Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type больше нет необходимости:
‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›
Структура кода
Стандарт 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 , который может выводить фоновую текстовую подсказку для поля.
‹input name="email" type="email" placeholder="[email protected]" /›
Результат отображен ниже:
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Email:
Автофокус
Без использования javascript можно автоматически передать фокус элементу после загрузки страницы. Для этого нужно добавить атрибут без параметров тому полю, которое необходимо вводить в первую очередь.
‹input name="name" type="text" autofocus /›
Поле name будет активировано автоматически и готово для ввода текста.
Обязательные поля
Если необходимо отметить некоторые поля, как обязательные для заполнения теперь достаточно указать атрибут . Таким образом, при подтверждении формы браузер проведет проверку, заполнены ли необходимые поля и, если нет, выдаст сообщение.
‹input name="name" type="text" placeholder="John Smith" required /›
Ниже иллюстрация результата работы этого кода (Google Chrome):
Range Input
HTML5 представляет абсолютно новый элемент управления – range input , который представляет собой бегунок, значение которого изменяется перетягиванием специального маркера между установленными заранее значениями.
‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›
Атрибуты min и max используются для задания крайних значений бегунка, step – это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:
Данный пример будет работоспособен только в браузерах с поддержкой HTML5
Локальное хранилище
Локальное хранилище позволяет сохранять информацию введенную пользователем, если страница браузера была закрыта или перезагружена. Это очень удобно, особенно в тех случаях, когда форма достаточно большая и сайт был случайно закрыт.
Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.
Управление локальным хранилищем происходит через объект класса localStorage с помощью двух методов setData() и getData() . Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.
‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Watch TV‹/li› ‹li›Listen to music‹/li› ‹li›Play videogames‹/li› ‹/ul›
JavaScript (с применением библиотеки jQuery, но это необязательно):
$("#todo").blur(function () { localStorage.setItem("todoData", this.html); }); if (localStorage.getItem("todoData")) { $("#todo").html(localStorage.getItem("todoData")); }
Поддержка мультимедиа
Теперь нет необходимости пользоваться сторонними плагинами и библиотеками для подключения различных аудио и видеофайлов. Все возможности по внедрению медиа теперь включены в спецификацию HTML5.
Аудио
Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.
‹audio autoplay controls›
‹source src="file.ogg" /›
‹source src="file.mp3" /›
‹a href="file.mp3"›Download this file.‹/a›
‹/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 , в 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
6. Новые элементы
Появились некоторые новые элементы в HTML5:
- Это может позволить вам добавить изображения или графики в подсказки или просто создать динамическую графику на странице “на ходу”.
7.Удаленные элементы
Существуют так же элементы HTML4, которые больше не могут использоваться в 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.
Рисунок 2 - основные свойства 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 мы поговорим с Вами в следующих статьях.