Как менялся HTML от версии к версии
Язык гипертекстовой разметки (HTML) — это ключевой инструмент для создания любого веб-сайта и его веб-страниц.
Старый HTML использовался при построении всемирной паутины. Он родился из стандартного обобщенного языка разметки (SGML) в 1986 году. И кто мог подумать, что простой язык с небольшим набором тегов сможет решать задачи создания сложных систем разметки и других проблем кодирования?
Эволюция и развитие этого языка программирования были замечательными и заметными. И несмотря на свою простоту, он позволяет программистам творить настоящие чудеса, например, заполнять веб-страницы анимированными изображениями, видео и звуком.
Согласно недавней статистике за 2020 год от Statista, HTML является одним из самых популярных языков программирования, поскольку 63,5% разработчиков программного обеспечения подтвердили, что это их основная платформа.
Со времени появления в начале 1990-х, когда Тим Бернерс-Ли использовал HTML, который был разработан на основе прототипа, этот язык значительно вырос. За прошедшие годы HTML прошел довольно ухабистый путь модернизации.
Его используют инженеры-программисты, разработчики и десятки тысяч браузерных компаний. HTML — это развивающийся язык вычислений, и благодаря специальной стандартизации и программе развития этот процесс стал проще и эффективнее.
В этой статье мы постарались рассмотреть различные версии HTML в процессе его развития. Итак,
HTML 1.0
Первая и базовая версия HTML была разработана для поддержки основных функций, таких как текстовые элементы управления или размещение изображений.
Эта версия HTML не поддерживала широкий спектр элементов, как современные версии языка. В частности в этой версии HTML не было поддержки таблиц и шрифтов.
В целом, можно сказать, что эта версия является самой ограниченной версией HTML.
HTML 2.0
HTML 2.0 — это версия, имевшая все возможности HTML 1.0 с некоторыми новыми функциями для веб-дизайна.
HTML 2.0 считался стандартной версией HTML до 1995 года.
В этой версии были улучшены теги разметки, текстовых полей, кнопок и т. д. Браузеры, разработанные для этой версии HTML, также ввели концепцию наличия тегов и слоев.
Был создан W3C (World Wide Web Consortium), который стандартизировал язык HTML.
Данная версия HTML понимала шаблоны и визуализировала HTML-теги согласно стандарту W3C.
HTML 3.0
Хотя выпуск HTML 2.0 был тепло принят, авторы HTML и веб-разработчики все еще нуждались в более целостной версии языка. И такой версией стала HTML 3.0.
HTML 3.0 предоставила авторам HTML и веб-мастерам больший контроль и более широкий спектр способов разметки текста и повышения качества и внешнего вида веб-сайтов.
Используя HTML 3.0, «Netscape», новый и ведущий браузер того времени, представил новые и более проработанные теги и атрибуты, которые получили название «Теги расширения Netscape». Разработки Netscape были благожелательно оценены программистами, однако эти теги и атрибуты не работали в других браузерах.
Позже Дэйв Рэггетт, руководитель группы, работающей над HTML, представил новый проект HTML 3.0 со значительными улучшениями и доработками.
HTML 3.2
HTML 3.2 (Wilbur) стал расширенной версией HTML, предлагавшей более широкий набор различных тегов. Это был новый стандарт, который тогда был крайне необходим. При этом все разработки предыдущей версии HTML 3.0 полностью вошли в эту версию языка.
HTML 4.01
Новая версия началась с HTML 4.0, известной как Cougar. Но со временем некоторые улучшения были изменены и вошли в версию HTML 4.01.
В 1999 году была представлена новая версия HTML 4.01, которая была значительно усовершенствована и предназначалась для достижения более масштабных целей.
Расширенные версии HTML 4.01 поддерживали каскадные таблицы стилей (CSS). Представленная концепция таблиц стилей решила проблему наличия CSS на каждой веб-странице и убирала повторяющийся код.
С выходом новой версии языка был запущен онлайн проект Cheatsheets in HTML с общими фрагментами кода и онлайн-инструментами, которые актуальны и по сей день.
Также, HTML 4.01 дорабатывал старые теги и вводил ряд новых тегов HTML.
XHTML 1.0
Большинство разработчиков ожидали, что после HTML 4.0 и HTML 4.01 следующим будет HTML 5.0. Но следующим в линейке стандартов стал XHTML.
Новый XHTML сопровождался появлением улучшенных тегов и опций, которые очень понравились разработчикам.
Аббревиатура XHTML расшифровывается как Расширяемый язык гипертекстовой разметки (англ. Extensible HyperText Markup Llanguage). При этом цель запуска XHTML заключалась вовсе не в улучшении тегов. Основная причина выхода этого стандарта состояла в том, чтобы улучшить взаимодействие с новыми браузерами, которые постоянно меняют динамику просмотра.
Поскольку технологическая динамика постоянно меняется, было важно учитывать, что новые браузеры будут доступны на разнообразных современных гаджетах. Так что в этом отношении XHTML оказался шагом в нужном направлении. Данный браузерный язык был ориентирован на работу с этими новыми технологиями. Веб-страницы, написанные на XHTML, адекватно работали с самым широким спектром браузеров и интернет-платформ.
В условиях, когда главным приоритетом было обеспечение хорошего качества веб-страниц, XHTML стал тем инструментом, который сумел удовлетворить все потребности разработчиков. В результате с 2000 по 2014 год, более десяти лет, XHTML был стандартизированным HTML следующего поколения.
HTML 5
Самая последняя и современная версия — HTML 5. В ней поддерживаются все теги и другие элементы, такие как элементы ввода различных типов, теги поддержки, геолокацию и пр.
Основная цель внедрения HTML 5 состояла в том, чтобы удовлетворить две вещи — улучшить язык и соответствовать новейшим разработкам в области мультимедиа.
При этом в HTML 5 были введен ряд новых тегов, например:
- Тег электронной почты. Это совершенно новый тег, появившийся в HTML 5. Данный элемент ввода является тегом формы, который осуществляет проверку или аутентификацию введенного значения. Это дает уверенность в том, что введенные данные являются подлинным именем электронной почты.
- Тег пароля. Данный тег является элементом ввода и предназначен для ввода пароля пользователя. При использовании этого тега пароль будет виден во время ввода и показан специальными символами. Этот тег защищает пароль символическим экраном.
- Аудиотег. Данный тег был добавлен для вставки аудио на веб-страницы.
- Семантические теги. Еще одно название структурных тегов. С помощью семантических тегов вы можете распределять и разделять веб-страницу HTML на различные структуры. Эти структуры объединяются, чтобы сформировать веб-страницу HTML.
- Теги разделов. Эти теги позволяют разбивать HTML документ на разделы. Важными семантическими/структурными тегами являются пояснения к изображениям, шапка/заголовок и подвал.
Существует множество причин использовать HTML 5. Некоторые из них практичны и философичны, другие альтруистичны, а многие эгоистичны.
На HTML 5 удобнее писать, поддерживать, реструктурировать документ. Он лучше подходит для поисковой оптимизации (SEO), для агрегаторов контента и систем чтения каналов, легко доступен на мобильных устройствах, может работать даже для пользователей с более медленным подключением к Интернету и меньше уязвимы для слома дизайна, он обеспечивает безопасный и простой путь для добавления мультимедийных элементов.
В настоящее время HTML 5 рассматривается как будущее этого языка программирования.
Заключение
Существует множество версий HTML, которые непрерывно развиваются более двух десятилетий. От первой и начальной версии HTML 1.0 до самой продвинутой версии HTML 5.0, язык HTML модернизировался, улучшился и стал значительно продуктивнее.
Консорциум World Wide Web продолжает работать над тем, чтобы все следовали одному стандарту. Многое было разработано и изменено в HTML, добавлены новые теги и элементы. И можно смело ожидать его дальнейшее развитие в будущем.
Первый взгляд на HTML6 с примерами и ссылками
Мы еще даже не успели освоить HTML5 как W3C уже выкатил первую версию HTML6. И мы не морочим вам голову. Он появился, поэтому пришло время еще раз испачкать руки. Забудьте о дате релиза HTML6 и давайте немного покодим на нем.
HTML6 настолько новый, что на Википедии даже еще нет страницы о нем. Он в абсолютно зачаточном состоянии, но мы выясним, что он из себя представляет, чем порадует и как на нем кодить. Давайте же быстренько посмотрим, что такое HTML6.
Как и HTML5, новая версия HTML имеет значительные отличия в структуре кода. Новая версия более стандартизирована, больше похожа на XML и больше подходит для создания веб-приложений будущего.
У меня есть список ресурсов по HTML5: шаблоны, инструменты разработки и пр. здесь.
Новая структура кода
Приемы работы с CSS представлены списком предлагаемых дополнений кода для HTML6 еще пару лет назад. И W3C услышали, но ответили по-своему оригинально. Они добавили мать всех этих предложений. Они добавили пространство имен в XML стиле… и это самое заметное изменение в HTML6. Эти изменения влияют на всю структуру кода. Но это стандартизирует и это уже новый уровень. Теперь вам не нужен атрибут id для ваших div’ов, вы можете использовать пространства имен.
Примеры HTML6
теперь может стать
Давайте же посмотрим на эти пространства имен:
turns into --> tag also changes, so do the rest of codes. --> A Look Into HTML6 Go to Designzzz! Click Here А это пример завершенного кода:
Overview of HTML6 Main Heading
[. ]
[. ]
Concepts of HTML6 Namespaces in HTML6
[. ]
Таково будущее HTML-атрибутов.
Ресурсы по HTML6
Я не знаю, почему, но некоторые люди шутили про HTML6. Мы уже упоминали первоапрельский пост в начале статьи, а кто-то сделал макет на HTML6, который тоже шутка. Но шутка — не всё. Это — ссылка на инструмент для тестирования совместимости браузера с HTML6.
Я протестировал оба моих браузера. Последняя версия Firefox набрала 429 очков, а последняя версия Google Chrome — 523.
The Distributed Specification — руководство, еще один ценный ресурс, чтобы лучше узнать концепции кодирования HTML6. Я заметил, что эта спецификация регулярно обновляется, поэтому я добавил сюда эту ссылку.
К чему всё идет?
Что для меня очевидно, так это то, что HTML6 движется в сторону искоренения Javascript. Он уже предлагает возможность создания одностраничного приложения без Javascript и это только вершина айсберга.
Пространства имен дают понять, что в течение нескольких лет HTML6 созреет до самостоятельной платформы программирования и превзойдет PHP, .NET и другие подобные языки с точки зрения функциональности и сложности. Так что мой вам совет: начинайте работать с HTML6 немедленно и покорите его. Сейчас самое время сделать это, пока другие не спохватились.
Вот и всё, что я хотел рассказать о HTML6. Но я буду держать вас в курсе обновлений, как только W3C выкатит что-то новое в этой версии HTML.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
HTML5 был создан, как единый язык разметки, который расширяет, улучшает и рационализирует разметку документов, а также добавляет единое API для сложных веб‑приложений. В HTML5 реализовано множество новых синтаксических особенностей: например, элементы , и , а также возможность использования SVG и математических формул. Все эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами без необходимости использования сторонних API. Другие новые элементы, такие как , , и , разработаны для того, чтобы сделать веб‑страницы более семантичными и понятными для автоматизированной обработки (роботами поисковых систем, программами для чтения с экрана и другими). Новые атрибуты были введены с той же целью. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому всеми совместимыми (современными) браузерами синтаксические ошибки должны рассматриваться одинаково, что обеспечивает более высокую кроссбраузерность для сайтов, которые разработаны на HTML5.
- (блок навигации по сайту)
- (контейнер для заголовков)
- (обычно относится к нижней части страницы)
- и (медиаконтент)
- (контейнер для основного содержания)
- (разделы страницы)
- (контейнер для дополнительного содержания, сносок)
- (выпадающий список)
- (спойлер)
- (группировка элементов)
- (шкала прогресса выполнения)
- (дата/время)
- (холст для непосредственного метода рисования в 2D)
- API для контроля над проигрыванием медиафайлов
- хранение баз данных оффлайн на стороне клиента
- Drag-and-Drop API (перетаскивание)
- History API (управление историей браузера)
- геолокация
В настоящий момент все ведущие браузеры поддерживают новый стандарт: Google Chrome, Mozilla Firefox, Opera и даже Internet Explorer (начиная с версии 9) имеют поддержку html5.
Статья опубликована в 2014 году
Тематические статьи
Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.
Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.
JavaScript
веб-разработка
Статья опубликована в 2014 году
Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Алгоритмы поисковых систем: семантическая микроразметка
Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.
интернет-маркетинг
веб-разработка
Статья опубликована в 2014 году
Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Множество различных jQuery примеров , элементы CSS
и большое количество других инструментов для Вашего сайта !
В настоящее время фраза «сайты на HTML5» до сих пор отдает привкусом современных WEB-технологий. Стоит брать во внимание тот факт, что большинство сайтов Интернета не используют элементы пятой версии HTML. Отсюда следует вполне законный вопрос: чего ждать от HTML 6 и когда ей будут пользоваться?
Но чтобы не говорили на различных форумах и блога: HTML 6 уже вышел и его первая версия доступна для экспериментов. Давайте же рассмотрим примеры верстки более подробно.
Комфорт для разработчика
Главной целью стандарта HTML 6 является его удобство для того, кто будет с ним работать. Например, в HTML5 уже были введены вспомогательные теги для семантики: , , и т.д. В HTML 6 решили еще больше пойти по «дорожке XML» и дать возможность нам использовать свои собственные спецификации: если раньше вы использовали , то сейчас это можно реализовать как . Вот так просто и понятно. Хотите корзину для товаров? Без проблем:
Вот так будет выглядеть ваша разметка. Конечно, это довольно грубый пример, но должен передать сущность представления. Теперь вам не придется долго думать на тем, где стоит использовать или . Вы сможете сами указать какой объект является частью конкретной структуры.
WEB-технологии движутся слишком быстро, и чтобы не отставать от них, мы должны делать разметку понятной для всех. Для машин или роботов — не важно. HTML 6 — это то время, когда можно покончить с бессмысленной семантикой, которая имеет довольно абстрактный вид, и предложить разработчику интуитивно понятный язык разметки.
Концепция HTML 6
Основная идея HТML6 — это пространства имен. В HТML 6, мы переходим на страницу с разметкой направленной в сторону индивидуальной разработки, что позволяет не беспокоиться о мельчайших деталях семантики и сосредоточиться на создании контента. Другими словами, вы просто пишите то, что хотите. Вам даже не нужно знать HTML!
Многие считают, что HTML 6 призван искоренить javascript. Очевидно, что это просто смех и троллинг. Коммьюнити просто не хочет воспринимать всерьез новое детище W3C. И его можно понять. С одной стороны — «технологии будущего», а с другой — бессмысленные навороты.