Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>14 июл 2018</li>

3 <li>0</li>

4 </ul>Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.

5 vlada_maestro / shutterstock

6 Пишет про разработку в Skillbox Media. Работал главным редактором сайта "Хабрахабр", ведёт корпоративные блоги.

7 HTML(HyperText Markup Language) - язык разметки гипертекста. Это формат документов, который изначально содержал:

8 <ul><li>Сам текст.</li>

9 <li>Теги (элементы) для разметки этого текста.</li>

10 </ul>Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация<a>World Wide Web Consortium</a>(Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В <a>документе</a>перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.

11 Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники.

12 HTML5 - последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.

13 Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).

14 Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.

15 В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас<a>работает через HTML5</a>, хотя раньше обязательно требовал Flash.

16 Формально перейти с обычного HTML(HTML4)на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег<! DOCTYPE html>для указания типа документа.

17 <!DOCTYPE html> <title>Заголовок Skillbox</title> <h1>Первая страница</h1> пример текста <a href="http://skillbox.ru/">НАЖМИ СЮДА</a>Всё, теперь у нас документ по стандарту HTML5.

18 В HTML4 было много разных типов, а в HTML5 остался только один <! DOCTYPE html>. Весь код, который написан на "обычном" HTML (HTML4), будет работать и в HTML5.

19 Однако здесь добавлено много новых технологий:

20 <ul><li>Мультимедиа-контент:HTML5 audio и video.</li>

21 <li>Улучшенные формы(API валидации, несколько новых атрибутов, новые значения для атрибута type тега <input> и новый элемент <output>).</li>

22 <li>Новые семантические элементы(, <figure>, <figcaption>, <data>, <time>, <output>, <progress> и <meter>).</li>

23 <li>MathMLдля математических формул.</li>

24 <li>Веб-сокеты:постоянное соединение между страницей и сервером и обмен данными через него. Страница интерактивно обновляется без перезагрузки.</li>

25 <li>WebRTC:возможность общения в реальном времени. Легко подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешних приложений.</li>

26 <li>Server-sent-события:сервер отправляет события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.</li>

27 <li>Офлайн-работа:кеш приложения, офлайн- и онлайн-события.</li>

28 <li>Хранилище и использование файлов:веб-приложения хранят структурированные данные на стороне клиента, а HTML5 File API работает с файлами.</li>

29 <li>Camera API:позволяет взаимодействовать с камерой устройства.</li>

30 <li>WebGL и SVG:трёхмерная графика (<canvas>) и основанный на XML формат векторных изображений.</li>

31 <li>…и другое.</li>

32 </ul>Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с "Блокнота" в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 - например, Notepad++, Sublime Text.

33 Справочные ресурсы по HTML

34 Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.

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

36 Копипаст чужой работы - нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

37 Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.

38 Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить<a>CSS</a>,<a>JavaScript</a>, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.

39 Погрузившись в обучение, вы научитесь создавать свои собственные веб-проекты и сможете претендовать на позицию junior-разработчика.

40 <a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>