HTML vs. HTML5 — все отличия

Введение в язык HTML 5

HTML — язык гипертекстовой разметки, который используется для размещения контента на веб-сайтах. Он был создан в 1986 году и до сих пор является основой веб-программирования. За HTML активно развивался, и его последняя версия HTML 5 является новым стандартом в веб-программировании.

Рекомендуем начать изучение именно с последней версии, так как некоторые старые теги уже устарели и практически не используются.

HTML код позволяет браузеру определять предназначение того или иного контента, с помощью блоков. Все блоки прогружаются в браузере и образуют общую структурe веб-страницы. Этот метод используется уже более 30 лет. Даже сейчас, HTML 5, CSS и JavaScript — основная составляющая каждого сайта. HTML 5 — самый центр.

Хоть многие и считают HTML языком программирования, но это не так. Это специальный инструмент, который позволяет хранить и структурировать данные во всемирной паутине.

Основными составляющими языка являются теги, которые разделяют всю информацию на разные смысловые блоки. Они записываются в двухсторонних угловых скобках и имеют множество функций.

Вот самая простая html конструкция:

<html>
	<head></head>
	<body>
		<h1>Заголовок веб-страницы</h1>
		<p>Основной текст страницы</p>
	</body>
</html>

Создайте HTML документ в кодовом редакторе и запишите туда этот код. После откройте, и в новом окне браузера вы увидите следующее:

Заголовок веб-страницы

Основной текст страницы

HTML 5 — отличия от старой версии и нововведения

Четвертая версия HTML не является плохой, её тоже можно использовать в верстке, но HTML 5 намного лучше. В HTML 5 появилась возможность встройки аудио и видео. Зайдя на любой сайт, открыв видеоплеер в старом браузере вы увидите надпись: «Ваш браузер устарел и больше не поддерживает HTML 5».

Он полностью заменил старую версию, так как привнес целый ряд обновлений:

  • Появилась возможность повсеместного применения глобальных атрибутов. То-есть, теперь атрибут id можно применять к любому значению.
  • Были убраны некоторые устаревшие теги и атрибуты.
  • Была увеличена гибкость и совместимость кода.
  • Теперь, благодаря JavaScript WEB Worker стало намного удобнее работать с JS скриптами. Появилась возможность открывать их в фоновом режиме.
  • Появилась поддержка векторной графики.
  • Добавление новых структурных тегов(nav, header, footer) и других тегов, например video.
  • Добавление новых атрибутов для форм, а также для некоторых обычных тегов.

Пользовательские улучшения

Что дает новая версия языка для простых пользователей? Данная версия языка сделала работу веб-сайтов намного комфортнее, ниже показан список улучшений:

  1. Поддержка 3D графики. Делает дизайны сайтов более приятными и необычными.
  2. Некоторые приложения, размещенные на сайте, могут сохраняться в кеше и работать без подключения к сети Интернет.
  3. Возможность передвижения элементов курсором.
  4. Увеличение количества шрифтов, цветов и других визуальных эффектов.
  5. Поддержка браузерами медиа приложений. Теперь можно слушать аудио, смотреть видео, играть в онлайн игры, без подключения специальных плагинов.

Наиболее значимым из всех нововведений является возможность работы без плагинов. Это повышает скорость работы как браузера, так и самого сайта.

Улучшения для веб-разработчиков

Новая версия языка HTML стала более гибкой. Она дала больше пространства для разработчиков, позволив создавать более качественные веб-сайты. Кроме того, она стала более простой, дав новичкам возможность обучаться немного быстрее.

Основные улучшения:

  • Улучшенная семантика
  • Прошлая версия заключалась в повсеместном использовании тегов div. Их огромное скопление сильно усложняло поиск ошибок в коде.

    В HTML 5 были введены структурные теги header, article, section, nav и footer. Они делают код более простым для чтения. Новые теги дают браузерам хорошее понятие о своем предназначении, что гораздо улучшает семантическую работу веб-сайтов.

  • Обработка ошибок
  • Во время написания HTML кода могут встретиться различные ошибки, как синтаксические, так и структурные. Старые браузеры не придавали особого значения этим ошибкам.

    Путем долго тестирования была создана система обработки ошибок. Разработчики тестировали язык в разных браузерах.

    Обработчик позволяет экономить время верстальщиков, ведь ошибки допускает почти каждый разработчик. По официальным данным Rebulding the Web почти 90% страниц содержат в себе ошибки.

    Обработчик обрабатывает их и позволяет странице нормально отображаться. Не будь его, время разработки увеличилось бы в разы.

  • Улучшенная поддержка веб-приложений
  • Ранее сайты, для содержания в себе различного медиа контента, использовали различные плагины. Новая версия языка содержит в себе их функции и позволяет обходить многие расширения браузеров.

    Сайты стали намного сложнее и функциональнее. При этом, появилась возможность контролировать их и делать более оптимизированными. Теперь работу сайтов можно сделать более плавной и быстрой нежели раньше.

  • Поддержка мобильных устройств
  • За последние годы мобильные устройства стали всё распространение. Телефоны и планшеты и стали использоваться почти на одном уровне с ПК.

    Многим людям нужно зайти на тот или иной сайт, но возможности зайти на компьютер нет. Именно это стало одной из причин обновления.

    Мобильные устройства имеют небольшой экран — главная проблема верстальщиков. HTML 5 улучшил адаптивную верстку и дал возможность создавать сайты с хорошей поддержкой мобильных устройств.

    Сам HTML 5 был создан больше не для ПК, а для смартфонов и планшетов.

Другие полезные нововведения

Многие компании перевели свои сайты на HTML 5. Все остались довольны и оставили целый ряд положительных отзывов, в которых с особенным жаром описывались следующие нововведения:

  1. Убрали куки
  2. Раньше все данные с веб-ресурсов хранились в куках. Они имели небольшой объем памяти. Некоторые пользователи сети отключали их, для того, чтобы не тратить лишнее место на локальных дисках.

    В новой версии HTML появился объект под названием localStorage. Этот элемент может управляться в любом подключенном скрипте, вне зависимости от места подключения функций. Сам объект является частью пространства имен window. LocalStorage позволяет хранить все данные веб-сайтов.

    Был введен объект sessionStorage. Он отвечает за быстрое хранение. Все данные сохраняются до закрытия браузера.

  3. Data-атрибуты
  4. В новой версии языка HTML появился новый атрибут — data. Он позволяет добавлять пользовательские атрибуты к тегам самого языка, без каких-либо рисков.

    В старой версии языка редко добавлялись пользовательские атрибуты. Код, который их содержал, был не валидным. Из-за этого приходилось запускать страницу в режиме совместимости.

    Атрибут data позволяет добавлять пользовательские атрибуты, которые хранятся в одной строке. Это позволяет разработчикам обходиться без подключения специальных библиотек(Ajax) и других серверных технологий.

    Кроме этого, элемент data может содержать в себе дополнительную информацию о некоторых элементах страницы.

  5. Автофокус
  6. В новой версии HTML появилась возможность делать автофокус на полях форм. То-есть при загрузке страницы, одна из её форм будет сразу же доступна для ввода данных. Атрибут autofocus может применяться только к одному полю ввода на странице.

    Пример:

    <form action="form.html">
    	Логин: <input type="text" name="login"><br>
    	Пароль: <input type="password" name="password" autofocus><br>
    </form>
  7. Убрали атрибут type из тегов подключения
  8. При подключении таблиц стилей или скриптов, больше не нужно указывать атрибут type. Теперь язык понимает, что тег link указывает ссылку на стили, а script дает ссылку на скрипты.

Прогнозы и дальнейшее развитие языка

Новая версия языка HTML 5 стала более простой, функциональной и удобной. Она лучше подойдет для нового поколения веб-разработчиков.

W3C сказали немного слов о том, каким будут следующие обновления языка. В новом обновлении будет приоритет на хорошую поддержку новых веб-приложений, например, инструменты поддержки конфиденциальности.

Будут добавлены инструменты для управления цифровыми правами.

В HTML 5 делался небольшой упор на поддержку надежных свойств, для лучшей совместимости. В новой версии HTML 5.1 улучшат поддержку ненадежных свойств.

Наш совет — изучайте HTML 5. Веб-программирование не стоит на месте. В 2018 году вы ещё можете пользоваться версией HTML 4.1. Но созданные вами сайты будут плохо смотреться на фоне современных проектов, с улучшенной обработкой данных и поддержкой медиа контента.



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *