Сайт посвящён современному языку разметки — HTML5
.
Цель сайта:
рассказать вам о HTML5 как можно больше.
Ресурс сайт является одновременно энциклопедией, учебником и справочником по языку HTML5, нежели учебником для начинающих по HTML . Задача сайта заключается в том, чтобы прояснить:
- Что такое HTML5, в современном веб-строительстве?
- Какие технологии начал поддерживать этот язык?
- Какие новые теги появились в HTML5?
- Чем он отличается от языков HTML4 или XHTML?
- Можно ли уже сейчас использовать HTML5?
- и т.п.
HTML5 — это новая технология в развитии веб-индустрии, предназначенная для эффективного создания мобильных сайтов и приложений. Рассмотрим для начала основные моменты, которым уделяется внимание при создании спецификации языка HTML5.
Во-первых практически всё что сейчас завязано на создание сайтов, стремится к мобильности (адаптивности), т.е. чтобы любой сайт который вы открываете, вы бы могли прочитать, на любом устройстве будь то, компьютер, ноутбук, планшет или смартфон. В этом вам как раз и помогают такие новые технологии как HTML5, CSS3, современный JavaScript (и его библиотеки) и даже новый тренд в веб-дизайне под название Flat-стиль.
Во-вторых одной из важных составляющих HTML5 является семантика , каждый тег отныне будет обладать своей смысловой нагрузкой, а не просто форматировать тот или иной контент. Программы (например поисковые системы) анализирующие сайт построенный на HTML5, должны будут понимать какие данные заключены между тегами, какова их суть и какова их значимость.
В третьих большое внимание уделяется независимости языка HTML от плагинов. Музыка, видео, анимация, игры, со всем этим скоро можно будет работать не загружая на компьютер и в браузер сторонние программы.
В четвёртых, теперь можно прямо в коде использовать микроразметку и те спецификации которые раньше были частью XML, например можно прямо в коде HTML-документа, использовать спецификацию SVG (которая создаёт различные векторные фигуры) .
Какие новые технологии появились в HTML5?В HTML5 появилось много технологий, которые открывают для вебмастера интересные возможности, вот некоторые из них:
В HTML5, немного изменилась структура кода HTML-документа, например остался лишь один доктайп , появились новые теги и атрибуты, семантически разделяющие страницу сайта на верхнюю часть, нижнюю, боковую и основной контент.
Многие теги и атрибуты из HTML4, теперь считаются устаревшими. Но при этом HTML5 , сохраняет полную совместимость с предыдущими языками разметки HTML3, HTML4 и XHTML.
В спецификации HTML5 наконец-то отметили, как должны взаимодействовать элементы страницы с языком программирования JavaScript, при использовании технологии DOM. Ибо теперь теги в HTML5 считаются полноценными объектами.
В спецификацию HTML5 добавили описание того, как браузеры должны обрабатывать ошибки встречающиеся в HTML-коде (это важно для разработчиков браузеров). До этого у разработчиков браузеров были лишь описания, как браузер должен обрабатывать правильный код не содержащий ошибок.
Можно ли использовать язык HTML5 уже сейчас?Да можно! Почти все крупные игроки веб-индустрии перешли на HTML5, поскольку этот язык в полной мере является нашим настоящим и будущим. Все современные браузеры поддерживают язык HTML5.
В заключениеОрганизации W3C и WHATWG , которые разрабатывают HTML5, решили в будущем не давать нумерации новым версиям языка, отныне и в будущем можно говорить просто HTML , без цифровой идентификации. Новые элементы (теги) и технологии (API) которые появятся у языка, будут просто добавляться в уже существующую спецификацию.
Использование новых элементов дает нам некоторые преимущества. В том случае, если мы применяем их в комбинации с элементами заголовками, … , то это позволяет нам использовать более шести уровней заголовков, присутствующих в предыдущих версиях HTML , для разметки вложенных разделов (секций) документа. Новая спецификация предусматривает детальное руководство по формированию архитектуры документа, которая представлена структурой, образованной новыми секционными элементами и в тоже время поддерживает обратную совместимость с предыдущими версиями.
Это руководство используется разработчиками в процессе их работы, а также браузерами при генерации содержания документа, предназначенного для облегчения навигации по веб-странице.
К примеру, в приведенном ниже фрагменте разметки используется вложенные секции и заголовки первого уровня :
Level 1
Level 2
Level 3
Для обеспечения совместимости с текущими версиями браузеров, вы также можете применять заголовки других уровней … , заменяя ими заголовки в соответствующих местах.
Определяя разделы веб-страницы в соответствии с их назначением при помощи специальных секционных элементов, мы способствуем корректной работе технологий обеспечения доступа, которые значительно облегчают процесс перемещения пользователя по странице. В некоторых ситуациях специализированные программы могут с легкостью перейти от одной статьи к другой, минуя при этом секции документа, которые выполняют другие функции (навигацию, сайдбар и т.д.), а разработчикам не нужно при этом создавать для этого специальные ссылки перехода.
Еще одним преимуществом использования новых элементов для разработчиков является возможность замены множества дивов одним из новых элементов, имеющим соответствующее предназначение, что делает код чище и повышает его читабельность.
Элемент предназначен для представления заголовка определенной секции документа. Собственно, помимо заголовка он может содержать и другого рода информацию. Например, вполне резонно было бы размещать между его тегами подзаголовки, информацию об авторе и/или информацию о версиях документа, его модификациях и т.п.:
A Preview of HTML 5
Элемент представляет подвальную часть секции документа, которой он принадлежит. Он, как правило, содержит авторскую информацию контента раздела, ссылки на тематические посты и т.п.:
2007 Example Inc.
Элемент предназначен для размещения навигационных ссылок. Он в равной степени подойдет как для навигации по сайту, так и для размещения содержания документа:
Элемент служит для представления информации, которая в той или иной степени соответствует тематике окружающего ее контента. Этот элемент очень удобен для реализации сайдбаров (боковых колонок):
Archives
Элемент представляет собой общий раздел документа или приложения, такой как глава, к примеру:
Chapter 1: The Period
It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
…
(Отрывок из произведения «A Tale of Two Cities»)
Элемент является независимой секцией документа, страницы или сайта в целом. Его удобно использовать для размещения такого контента как новости, блог посты, сообщения на форумах или индивидуальные комментарии:
Comment #2
by Jack O’Niell
August 29th, 2007 at 13:58
That’s another great article!
Видео и аудио.
В Web среде последнее время все большую актуальность получают такие типы данных как видео и аудио. И множество подобных YouTube , Viddler , Revver и MySpace сайтов дают возможность любому пользователю Интернета без труда разместить в сети видео и аудио информацию. По причине того, что на данный момент стандарт HTML не располагает необходимыми средствами включения и управления медиа контентом, то большинство нынешних сайтов используют технологию Flash для обеспечения требуемой функциональности. Кроме того, существует возможность включения мультимедиа посредством плагинов (таких как QuickTime , Windows Media и другие). Но всё же именно Flash технология наиболее широко распространена и является кроссбраузерным решением, предоставляющим необходимый для разработчиков API .
Судя по тому, как представлены различные медиа плееры на основе Flash , можно с уверенностью сказать что разработчики заинтересованы в получении возможности создания собственного типа пользовательского интерфейса, который позволяет полностью контролировать воспроизведение медиа файла – регулировка громкости, стоп, пауза, поиск и воспроизведение. Но главной целью на данный момент является нативная поддержка такой функциональности в браузерах без каких-либо плагинов, что позволит включать видео и аудио компоненты с необходимым API для управления воспроизведением из скриптов.
И вновь представленные и элементы значительно облегчают эту задачу. Большинство имеющихся API возможностей являются общими для обоих элементов, но с небольшими отличиями, свойственными исключительно для визуальной и не визуальной информации.
Оба движка Opera и WebKit уже реализовали частичную поддержку элемента. Чтобы убедиться в этом, вы можете загрузить и попробовать в работе экспериментальную сборку Opera и автоматическую тестовую сборку WebKit . В Opera представлена поддержка кодека Ogg Theora , а WebKit обеспечивает работу всех форматов, поддерживаемых в QuickTime , включая ряд сторонних кодеков.
Простейшим способом включения видео в документ является использование элемента, без каких либо дополнительных настроек. В этом случае браузер предоставит предусмотренные по умолчанию элементы пользовательского интерфейса. Для дефолтного (по умолчанию) включения или отключения элементов управления медиа контентом предназначен булевый атрибут controls с значениями:
Необязательный атрибут poster предназначен для определения изображения, которое будет отображаться на месте видео элемента до начала его воспроизведения. И хотя некоторые видео форматы предусматривают собственную, свойственную только им заставку, как это сделано в MPEG-4 , но атрибут poster является альтернативным способом определения заставки, которая будет отображаться независимо от используемого видео формата.
Также просто дело обстоит и с включением на страницу аудио контента с помощью элемента . Большинство атрибутов, свойственных элементу, применяют и для элемента, хотя в последнем не предусмотрена установка ширины width , высоты height и заставки poster .
В стандарте HTML5 для указания альтернативных источников видео и аудио данных также вводится элемент , который позволяет браузеру выбрать тот формат, который поддерживается устройством и/или кодеком. Атрибут media может быть использован для указания типа устройства, с целью выбора необходимого источника данных в соответствии с ограничениями используемого устройства, а type атрибут для определения типа данных и кодеков. Имейте в виду, что при использовании элемента в его родительских или элементах должен отсутствовать атрибут src , в противном случае, альтернативные источники данных будут проигнорированы браузером.
В тех случаях, когда направленность веб-ресурса требует от разработчика создания полного контроля над пользовательским интерфейсом, то для этих целей он может использовать расширенные возможности API , предоставляющие ряд методов и событий, посредством которых из скриптов можно контролировать процесс воспроизведения медиа файла. Самыми простыми представителями таких возможностей являются методы play() и pause() , а также свойство currentTime , предназначенное для установки текущего положения проигрывания медиа файла в начало или другое необходимое место. Ниже представлен пример их использования:
var video = document.getElementById("video");
Play
Pause
Если вы хотите использовать другие метки, как и в нижнем регистре, вы можете использовать следующий код:
DOCTYPE HTML>
Строчные имена элементовHTML5 имя элемента можно использовать прописные и строчные буквы.
- Смешанный стиль случай очень плохо.
- Строчные буквы легко писать.
Это параграф.
Это параграф.
Это параграф.
В HTML5, вы не хотите, чтобы закрыть все элементы (например, элемент ), но мы рекомендуем, чтобы каждый элемент должен добавить закрывающий тег.
Это параграф.
Это параграф.
Это параграф.
Это параграф.
В HTML5, пустой элемент HTML не нужно выключать:
Мы можем написать:
Вы также можете написать:
XML, XHTML и слэш (/) является обязательным.
Если вы планируете использовать свою страницу XML программного обеспечения, этот стиль очень хорошо.
Имя атрибута LowercaseHTML5 позволяет использовать имя свойства заглавными и строчными буквами.
- Используйте случай очень плохая привычка.
- Разработчики обычно используют в нижнем регистре (аналогично XHTML).
- Строчные стиль выглядит более освежающий.
- Строчные буквы легко писать.
Значение свойства
Значения атрибутов HTML5 не может цитировать.
- Если значение свойства содержит пробелы, необходимо использовать кавычки.
- Смешанный стиль не рекомендуется, предлагаемый единый стиль.
- Значения свойств с использованием кавычек легко читать.
Атрибут Следующие примеры значение содержит пробелы, не используйте кавычки, она не может работать:
Ниже используются двойные кавычки, это правильно:
свойстваImage Alt атрибуты часто используются. Если изображение не может быть отображено, оно может заменить дисплей изображения.
= "HTML5" стиль = "ширина: 128px; высота
: 128px">
Определяется размер изображения, может быть зарезервировано в момент загрузки указанного значения, уменьшить мерцание.
= стиль "HTML5" = "ширина: 128px; высота: 128px">
Вы можете использовать пробелы до и после знака равенства.
Избегайте длительного строки кодаИспользуя редактор HTML, левый и правый прокрутки код неудобно.
Каждая строка кода в максимально возможной степени меньше, чем 80 символов.
Пустые строки и отступыНе добавляйте пустую строку без причины.
Для каждого функционального блока логики добавить пустую строку, что делает его более удобным для чтения.
Не используйте ненужные пустые строки с отступом между коротким кодом.
Лишние пустые строки и отступы:
Этот учебник
HTML
Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и во сне,
Этот учебник, обучение не только технологии, но и сон.
Этот учебник
В этом учебнике, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.
Пример формы:
Имя
Описание
A
Описание A
B
Описание B
Опустим и ?
В стандарте HTML5, и тег может быть опущен.
Следующие документы являются правильными HTML5:
Пример: DOCTYPE HTML>
Название страницы
Это заголовок
Это параграф.
Попробуйте »
элемент является корневым элементом документа, язык, используемый для описания страницы:
DOCTYPE HTML>
Язык заявление для облегчения чтения с экрана и поисковых систем.
Опустим или в DOM и программного обеспечения XML аварий.
Опустим ошибка происходит в старых браузерах (IE9).
Опустим ?В стандарте HTML5, тег может быть опущен.
По умолчанию браузер содержимое , прежде чем добавлен к дефолту элемент.
примеров DOCTYPE HTML>
Название страницы
Это заголовок
Это параграф.
Попробуйте »Метаданные
HTML5 в требуется элемент, название заголовка описывает тему страницы:
В этом учебнике
Название и язык, который позволяет поисковик скоро понять тему вашей страницы:
DOCTYPE HTML>
В этом учебнике
