Стандарт HTML5 был доработан и выпущен в 2014 году, и именно таким он и должен был быть, когда первая версия была выпущена много лет назад. HTML 2.0 был первым настоящим «стандартом», опубликованным еще в 1995 году. Два года спустя HTML 3 был опубликован. Еще через два года был введен HTML 4.01, и с тех пор он стал рабочей лошадкой Интернета.
Первый «рабочий проект» HTML5 был представлен еще в 2008 году, с удивительно широкой поддержкой браузеров. HTML5, который мы знаем сегодня, сильно отличается от HTML прошлого, и здесь мы собираемся обсудить, что изменилось в последнем стандарте с его выпуском. С момента запуска HTML5 он получил широкое признание, и теперь все его функции и возможности поддерживаются всеми основными браузерами. Есть еще несколько икок тут и там, но в целом HTML5 хорошо ассимилировался с современными онлайн-опытом.
Как веб-разработчик, вы можете быть либо старым профессионалом, который освоил старые стандарты, либо новичком, любопытно наблюдающим за разработкой новых стандартов в сторонке. В любом случае, вы должны начать переходить на HTML5.
HTML против HTML5 инфографики
Первый шаг к переходу на HTML5 или обучение - понять разницу между старым стандартом и последним. Вот некоторые ключевые различия между HTML и HTML5:
-
HTML5 это живой язык
HTML5 - это живой язык, работа в процессе. Удивительно видеть, что может делать HTML5, но также важно знать, что HTML5 не является полностью стандартизированной версией, такой как HTML4, которой более десяти лет и установленный стандарт, неизменяемый.
Если вы попадаете в HTML5, вам придется сделать некоторые обновления. Атрибуты и элементы добавляются и регулярно модифицируются каждый год. Это также зависит от того, насколько вы используете богатые элементы, но это определенно один из рисков, связанных с использованием изменяющегося языка, такого как HTML5.
-
HTML5 проще
В то время как HTML5 имеет риски, такие как постоянные обновления, как правило, легко следить за изменениями и обновлениями из-за более простого синтаксиса по сравнению с HTML4. Например, у вас есть очень простое объявление в начале страницы, чтобы установить его как страницу HTML5:
Простое объявление Doctype является одним из упрощений, сделанных в синтаксисе HTML, который совместим со всеми версиями из HTML4 и вплоть до XHTML1. Однако HTML5 не совместим с SGML.
Рекомендуемые курсы
- Бесплатное обучение программированию на Python
- Сертификационный курс по бесплатному тестированию программного обеспечения
- Бесплатные курсы программирования на Java
- Полный курс PERL
-
Новый Элемент
HTML5 поставляется с рядом новых элементов и устраняет несколько других (о которых мы расскажем чуть позже), но одним из его ключевых добавленных элементов является то, что сильно повлияло на использование Adobe Flash на веб-сайтах. Хотя Flash все еще используется несколькими веб-сайтами, многие уже используют HTML5, и многие считают, что в конечном итоге он сделает Flash устаревшим. Только время решит это; до тех пор каскадный элемент HTML5 зарекомендовал себя как хорошая альтернатива Flash.
Элемент может использоваться для рисования графики с различными формами и цветами с помощью сценариев, обычно JavaScript. Элемент является просто контейнером для графики; вам нужно использовать скрипт для определения графики. По умолчанию холст представляет собой прямоугольную область без содержимого или границ. Рынок выглядит так:
Для определения размера холста важно указать атрибут id, а также ширину и высоту. Вы можете добавить атрибут стиля для определения границ.
Вы также можете использовать JavaScript, как в следующем примере:
var c = document.getElementById («myCanvas»);
var ctx = c.getContext («2d»);
ctx.fillStyle = «# FF0000»;
ctx.fillRect (0, 0, 150, 75);
-
Новое и стихия
Другим важным дополнением HTML5 являются новые элементы и элементы, указывающие на новую веб-анатомию. С этими новыми тегами больше нет необходимости идентифицировать два элемента с помощью тега.
Спецификации определяют элемент заголовка как представляющий группу «навигационных» или «вводных» средств. Таким образом, этот элемент можно использовать для определения введения в раздел страницы или на всю страницу в целом. Вот фрагмент кода, который использует элемент заголовка.
заглавие
Автор подал в Web 2.0
Тело текста
Спецификации HTML5 ссылаются на элемент foot как на представление «нижнего колонтитула для его ближайшего предка, секционирующего контент или секционирующего корневого элемента», и, как правило, содержат информацию, касающуюся этого раздела, такую как имя автора, данные об авторских правах, ссылки на документы и так далее.
По логике, нижний колонтитул находится внизу веб-страницы. Но он также может быть размещен в конце раздела страницы. Вот пример кода, который использует элемент нижнего колонтитула:
Название контента
Автор подал в Web 2.0
Тело текста.
Теги: Командная строка, Компас, CSS, Sass, Терминал
10 лайков
Здесь нижний колонтитул содержит теги постов и пост «лайки на Facebook».
-
И элементы
Теперь, если бы вы прошли вышеупомянутые примеры, вы бы заметили еще несколько новых элементов, таких как. Этот элемент, наряду с элементом, позволяет вам отмечать определенные разделы вашего макета и чрезвычайно полезен для оптимизации поисковой системы. Элемент article указан как представляющий автономный компонент веб-страницы, который можно независимо использовать повторно или распространять. Это может быть газета, сообщение на форуме, статья в журнале, запись в блоге или что-то еще.
Элемент article обычно имеет собственный заголовок в элементе header и, возможно, даже нижний колонтитул, как вы видели в приведенном выше примере. Вы можете просто думать об элементе как о записи в блоге или как о отдельной части контента; сложная часть заключается в определении того, что является независимым. Проще говоря, независимый контент - это тот, который имеет смысл сам по себе.
Хороший способ узнать, является ли часть контента независимой, - спросить, имеет ли это смысл в RSS-канале. Статьи в блогах и статические страницы имеют смысл, а на некоторых сайтах есть комментарии. Но параграф в статье не будет иметь никакого смысла отдельно от остального контента. Вот фрагмент кода с тегами нижнего колонтитула и публикации.
Название контента
Опубликовано: 2016-02-24
Тело текста
Лицензия Creative Commons Attribution-ShareAlike
Элемент section, в соответствии со спецификациями W3C, представляет «общий раздел» приложения или документа. Это может быть перепутано с тегом, так что давайте прямо сейчас удалим путаницу. Тег раздела используется, когда содержимое в нем должно быть сгруппировано отдельно от остальной части страницы с одной темой, и когда его следует рассматривать как запись в структуре страницы. Элемент div, однако, указывается как «универсальный контейнер», что означает, что он не отделен от самой главной страницы, за исключением его собственных атрибутов title, language и class.
-
Новое и Элементы
Новые и элементы HTML5 являются частью спецификаций Interactive Elements, но являются одними из наименее обсуждаемых элементов разработчиками. Учитывая тот факт, что Интернет превратился в более просто связанные страницы и документы, эти элементы являются желанным дополнением для большей интерактивности сети.
Элемент не следует путать с элементом, который определяется как HTML-тег навигации, представляющий блок навигации страницы. Обычно он содержит ссылки, позволяющие пользователям переходить по разделам на странице или к другой странице. С другой стороны, тег меню представляет команды меню для простоты в настольных и мобильных приложениях. Вот пример элемента в действии:
Привет, мир
Между тем, элемент является еще одним способом упорядочить изображения и текст. Используется вместе с элементом для разметки иллюстраций, диаграмм и фотографий. Ниже приведен короткий фрагмент кода, который показывает оба элемента в действии.
-
Новое и Элементы
Это два основных дополнения к стандарту HTML5. Аудио тег, как и видео тег, позволяет разработчикам размещать музыку и аудио на своем сайте. В отличие от предыдущего стандарта, вы не ограничены добавлением миди-музыки, хотя все еще существуют некоторые ограничения на тип используемых файлов. Большинство браузеров, связанных с Webkit, поддерживают обычные файлы MP3, но другие поддерживают только формат OGG. Хорошей новостью является то, что существует множество файловых конвертеров, и вы можете просто предоставить две версии аудиофайла; правильная версия будет выбрана автоматически.
Вы можете использовать аудио тег как любой другой элемент. Вот пример фрагмента:
Аудио тег также имеет ряд атрибутов для дополнительных элементов управления, включая атрибуты событий, а события включают в себя события окна, события формы, события мультимедиа и события мыши. Элемент видео также имеет ряд атрибутов контента, включая SRC, глобальные атрибуты, цикл, управление, предварительную загрузку и постер. Атрибуты SRC, loop, autoplay и controls довольно понятны и одинаковы для всех медиа-элементов, в то время как глобальные атрибуты являются общими для всех элементов. Они включают в себя каталог, скрытый, контекстное меню и многое другое.
Есть несколько других мультимедийных атрибутов и элементов, которые поставляются с HTML5, например, элемент track, который предоставляет текстовые дорожки для элемента video.
-
Новые формы
HTML5 теперь поставляется с формой и элементами. Если вы не планируете использовать много таблиц на странице, вы также можете удалить атрибут и взглянуть на внесенные изменения, прежде чем двигаться дальше.
-
Не больше и элементов
Это означает, что все атрибуты, которые позволяют разработчикам создавать идеально выложенные, тонированные таблицы, такие как border, bgcolor, align, height, rules и многое другое. Все эти атрибуты заменены CSS.
-
Не более и
Это отлично подходит для тех разработчиков, которые работали в первые дни HTML. Атрибуты frameset, frame и noframes были полностью удалены, наряду с другими, такими как blink, basefont и т. Д. Вам придется обходиться без использования таблиц для разметки. Таблицы по-прежнему являются частью HTML5, но они больше не предназначены для пикселей. В спецификациях говорится, что таблицы не должны использоваться в качестве вспомогательных средств макета и для управления макетом страницы.
Вывод
Как вы можете ясно видеть, HTML5 претерпел множество изменений, и вы должны использовать его с осторожностью и осторожностью. Вам также необходимо обновить свои знания о языке, так как он меняется со временем и получает больше обновлений. Вам необходимо прекратить использование элементов, которые HTML5 удалил из себя, и использовать новые элементы HTML5, которые обязательно останутся, такие как теги верхнего или нижнего колонтитула.
То, что вы видели выше, - это просто упрощенная версия того, как много изменений HTML5 сделал с момента своего запуска. Но давайте будем честны здесь; нет ничего простого или медленного в том, как внедряется HTML5, и новый стандарт добавляет множество возможностей, которые имеют решающее значение для современного пользовательского опыта. Вы должны идти в ногу с новым языком, а также изучать CSS, который играет большую роль, чем раньше.
Хорошая вещь об этих изменениях состоит в том, что, хотя они большие, они к лучшему, и это понимают все заинтересованные стороны, вовлеченные здесь. Браузеры будут более мощными по мере продвижения к облаку, с возможностью обрабатывать больше самостоятельно. С такими вещами, как Ajax, с встраиванием видео и аудио и т. Д., Будет гораздо проще кодировать простым способом и позволить браузеру взять на себя тяжелую работу. Например, новые элементы структуры, такие как рисунок, нижний колонтитул, сводка и раздел, все ссылаются на структуру документа, а рендеринг остается на усмотрение браузера.
Статьи по Теме:-
Вот несколько статей, которые помогут вам получить более подробную информацию о HTML против HTML5, поэтому просто перейдите по ссылке.
- HTML и XML
- HTML5 против 9 главных отличий Flash (с инфографикой)
- HTML против XHTML
- HTML5 против Flash
- Удивительные отличия HTML5 от JavaScript
- 10 удивительных полезных советов по программированию на Python (хитрости)