HTML - из каменного века в 21 век

Язык разметки гипертекста (HTML) довольно старый.

Наша жизнь стала немыслима без Всемирной паутины. HTML — один из краеугольных камней Интернета.

HTML — относительно простой язык. Он состоит из набора элементов (тегов), которые используются для структурирования содержимого и указания веб-браузерам отображать документы.

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

‹marquee› (на заре Интернета веб-сайт не был веб-сайтом без бегущей строки)

Хотя тег ‹font› все еще можно найти на 6,5 миллионах веб-сайтов, не рекомендуется использовать HTML для внешнего вида. Каскадные таблицы стилей (CSS) — это язык для оформления HTML-элементов. CSS существует уже с конца 1990-х годов.

Наиболее важной задачей HTML является описание семантической структуры документов.

Начало

Тим Бернерс-Ли и Роберт Кайо работали в 1980-х годах в Европейской организации ядерных исследований (ЦЕРН). Они разработали гипертекстовую систему до www. Целью этой системы было облегчить обмен и обновление информации между исследователями. Уже в 1960-х годах армия США разработала интернет.

Это была гениальная идея объединить эти две технологии: Интернет и гипертекст.

Мне просто нужно было взять идею гипертекста и соединить ее с идеями TCP и DNS и — та-да! - Всемирная паутина. (Тим Бернерс-Ли)

В 1980-х Бернерс-Ли и Кайо разработали первый веб-браузер, HTTP-протокол и первый веб-сервер (на NeXTcube). В 1991 году был запущен первый веб-сайт: http://info.cern.ch/hypertext/WWW/TheProject.html

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

1991: Тим Бернерс-Ли опубликовал первую неофициальную версию HTML.

1993: опубликован HTML 1.0.

Этот начальный этап в истории HTML можно охарактеризовать как базовый обмен информацией через веб-браузеры. В то время HTML состоял из 18 тегов. Для сравнения, сейчас у него более 140 тегов. Веб-разработчиков было не так много.

Известные теги этой первой версии HTML (v1.2):

заголовок ‹h1›, ‹h2›, … для упорядочения содержимого путем добавления заголовков и подзаголовков в верхнюю часть разделов страницы
абзац ‹p› для обозначения абзацев текста
привязка ‹a› для ссылки на другой веб-контент
список ‹ul›, ‹ol› для организации элементов в список
изображение ‹img› для встраивания изображений в веб-страницу

1990-е

1995: опубликован HTML 2.0.

Эта версия содержала несколько дополнительных функций.

1997: опубликован HTML 3.2.

Эта версия содержала множество улучшений. HTML3 содержал новые функции, такие как:

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

Движущей силой этого большого улучшения был Дэйв Рэггетт. По его мнению, веб-страницы должны больше походить на (глянцевые) журнальные статьи, а не на (скучные) страницы учебников. Raggett сыграл важную роль в развитии веб-технологий. Помимо HTML, он работал над: например, HTTP, XHTML, VRML и Web of Things. В 1993–1998 годах он работал над веб-браузером Arena. Это был частный проект. В наши дни трудно понять, что в то время крупные компьютерные корпорации не верили в WWW.

Хотя HTML3 и веб-браузер Arena были очень инновационными, они не стали успешными с точки зрения использования. Арена была частным проектом. Усовершенствования HTML3 были слишком масштабными, чтобы их могли быстро внедрить производители браузеров. Это наблюдение привело к более модульному подходу к разработке HTML в последующие годы.

2000-е

1999: опубликован HTML 4.01.

HTML 4.01 был очень успешным и наиболее часто используемой версией в 2000-х годах. В 2000 году XHTML был опубликован. XHTML — это HTML с более строгими правилами.

В HTML 4.01 были введены важные новые элементы:

‹table› для организации данных в строки и столбцы (уже в HTML3?)
‹style› для добавления CSS и определения стиля HTML-элементов.
‹скрипт›, чтобы добавить JavaScript и сделать (статические) веб-страницы более интерактивными

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

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

2010-е

2008: черновик HTML5, подготовленный Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG).

2014: официальный стандарт консорциума World Wide Web (W3C)

HTML5 — это расширение очень популярной версии HTML 4.01. Слоган HTML5: давайте делать вещи лучше! Можно выделить три аспекта:

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

Известным примером является числовой тип ввода ‹input type="number"›:

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

HTML5 предлагает больше.

Аудио и видео

плагины больше не нужны
функции воспроизведения
доступность

В минималистичном фрагменте кода ниже элементы ‹video› и ‹canvas› используются для подключения к камере устройства и отрисовки снимка изображения:

<video id="my-video" autoplay></video>

<button onclick="getCurrentFrame()">Take Snapshot</button>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script>
    const video = document.getElementById('my-video');
    const canvasContext = document.getElementById('my-canvas').getContext('2d');

    if (!navigator.getUserMedia) {
        console.log("getUserMedia not supported by your browser");
    }

    navigator.getUserMedia(
        {
            video: true,
            audio: false
        },
        (stream) => video.srcObject = stream,
        (error) => console.log(error)
    );

    function getCurrentFrame() {
        canvasContext.drawImage(video, 0, 0)
    }
</script>

2. Множество новых семантических тегов

Примеры:

‹заголовок›
‹нижний колонтитул›
‹навигация›

Семантические теги придают смысл и структуру страницам. Это важно для:

программы для чтения с экрана, поисковые роботы и плагины
поисковые системы и поисковая оптимизация (SEO)
стиль (CSS)

CSS должен быть максимально основан на осмысленных HTML-элементах, а не на атрибутах class и id элементов ‹div›. Новые семантические теги HTML5 помогают избежать разделения:

(веб-дизайн, обычно уничижительный) Практика написания кода веб-страницы с большим количеством элементов div вместо значимых семантических элементов HTML. (Википедия)

3. Повышение производительности

Примеры улучшения производительности:

асинхронная загрузка JavaScript: ‹script async›
предварительная загрузка видео: ‹предварительная загрузка видео›

4. Офлайн-поддержка

Функции автономной поддержки: AppCache, сервис-воркеры и локальное хранилище.

В течение 2010-х годов между WHATWG и W3C велась дискуссия об управлении версиями HTML. W3C хотел использовать этапный подход. WHATWG хотела использовать живой документ. Преимущество последнего заключается в том, что поставщики браузеров могут легче адаптироваться к итеративным обновлениям (см. проблемы реализации HTML3). Недостатки заключаются в том, что сложнее обеспечить поддержку и может быть проблемой выяснить, какие функции стали доступны в определенный момент времени.

С 2019 года WHATWG является авторитетом стандарта HTML и DOM. Спецификация HTML — это живой документ. Смотрите https://whatwg.org/

HTML6

В настоящее время люди говорят о HTML6. Учитывая тот факт, что HTML развивается путем итеративных обновлений, говорить о версии 6 проблематично. Новые функции частично являются продолжением уже пройденного пути, например, нативные компоненты и расширение семантических тегов, а частично новые идеи, как экспресс-теги и пространства имен. Сайт html6test.com измеряет, насколько хорошо ваш браузер поддерживает HTML6. Это говорит о том, что существует набор функций, которые считаются HTML6.

Давайте посмотрим на эти совершенно новые функции.

Больше семантических тегов

В спецификацию HTML добавлено еще больше семантических тегов. Опять же, эти теги не имеют никакого поведения, и их единственная цель — придать смысл документу. Эти теги можно использовать как хуки для CSS и внешнего программного обеспечения (парсеры). Некоторые примеры:

Меню

<menu type="toolbar">
  <li><button>Apples</button></li>
  <li><button>Pears</button></li>
  <li><button>Oranges</button></li>
</menu>

Список определений

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <dt>Chrome</dt>
  <dd>Another web browser</dd>
</dl>

Фигура

<figure>
  <figcaption>Johan Cruijff</figcaption>
  <blockquote>
    Als ik zou willen dat je het begreep, zou ik het beter hebben uitgelegd.
  </blockquote>
</figure>

<figure>
  <img src="favicon.ico">
  <figcaption>Star</figcaption>
</figure>

<figure>
  <pre>
      ___________________________
    < I'm an expert in my field. >
      ___________________________
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
</figure>

Код

<p>The <code>push()</code> method adds one or more elements to
  the end of an array and returns the new length of the array.</p>

Определение

<p>A <dfn id="def-validator">validator</dfn> is a program that
  checks for syntax errors in code or documents.</p>

Время

<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>

Этот элемент представляет временную метку в машиночитаемом формате.

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

Микроформаты — это способ добавления разметки к документам. Это позволяет программному обеспечению (парсерам) извлекать информацию и индексировать, искать или обрабатывать ее иным образом. Как и семантические теги, микроформаты добавляют в документы метаинформацию. См. https://microformats.org/

В Интернете можно найти заметки о новой предстоящей функции HTML: так называемых экспресс-тегах. Идея в том, что автор может создавать свои собственные теги. Это уменьшит использование ‹div› и, следовательно, добавит семантическую структуру. Примерами таких тегов DIY могут быть:

‹логотип› вместо ‹div id="логотип"›
‹панель инструментов› вместо ‹div id="панель инструментов"›
‹контейнер› вместо ‹div id="контейнер"›

Это предполагает пространства имен, как в XML:

‹html:название›
‹html:a›
‹html:тело›
и т. д.

Больше нативных компонентов

В контексте улучшения, которое началось с HTML5 в 2010-х годах, было создано больше новых богатых компонентов. Эти HTML-элементы втянули (в теневой DOM) код JavaScript и CSS, который в противном случае разработчикам пришлось бы писать самим. Давайте посмотрим на некоторые примеры. Эти фрагменты кода максимально минималистичны. Удивительно видеть функциональность, которую эти элементы предлагают из коробки!

Подробности

<details id="foo">
  <summary>Presenting with IntelliJ IDEA</summary>
  To enable mouse zoom, you need to turn it on explicitly.
  Go to Preferences > Editor > General and select Change font size with
  Command+Mouse Wheel (on Mac)
</details>

<button onclick="toggleDetails()">Toggle</button>

<script>
  function toggleDetails() {
    const el = document.getElementById('foo');
    el.open = !el.open;
  }
</script>

Список данных (автозаполнение)

<input list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Список данных, подключенный к средству выбора даты и времени:

<input type="date" list="dates">

<datalist id="dates">
  <option value="2023-06-01">
  <option value="2023-06-02">
  <option value="2023-06-03">
</datalist>

<input type="time" list="hours">

<datalist id="hours">
  <option value="12:00">
  <option value="13:00">
  <option value="14:00">
  <option value="15:00">
</datalist>

Список данных, подключенный к ползунку диапазона:

<input type="range" list="percentages" min="0" max="100">

<datalist id="percentages">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Список данных, подключенный к палитре цветов:

<input type="color" list="redColors">

<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Диалог

<dialog id="foo">
  <p>Is this a HTML-powered dialog box?</p>
  <form method="dialog">
    <input type="submit" value="Yes">
    <input type="submit" value="No">
  </form>
</dialog>

<button onclick="openDialog()">Open dialog</button>

<button onclick="showDialogValue()">Show value</button>

<script>
  openDialog = () => document.getElementById('foo').open = true;

  showDialogValue = () => window.alert(`Dialog value: ${document.getElementById('foo').returnValue}`)
</script>

метр

<meter
  id="fuel"
  min="0" max="100"
  low="33" high="66" optimum="80"
  value="100"
>
</meter>

<script>
  const el = document.getElementById('fuel');
  const intervalId = setInterval(() => {
    el.value -= 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Индикатор

<progress id="foo" value="0" max="100"></progress>

<script>
  const el = document.getElementById('foo');
  const intervalId = setInterval(() => {
    el.value += 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Слухи

Помимо этой продолжающейся работы над семантическими тегами и нативными компонентами, есть еще много улучшений. Например: тег ‹picture› с его детальным управлением рендерингом изображений, тег ‹output› и новый атрибут «скрытый». Кроме того, некоторые блоги в Интернете описывают новые функции, статус которых мне неясен:

Подключаемые языки. Например, ‹script type="text/python"›. Почему следует использовать Python вместо JavaScript?
Гарантированные библиотеки. Библиотеки, предоставляемые веб-браузерами.
Усиленная аутентификация.
Встроенная камера. В HTML пока нет встроенного компонента камера. Интересная статья об использовании элемента ‹input› без JavaScript: https://jakub-kozak.medium.com/how-to-open-the-native-camera-in-mobile-browsers-327820fa669a.

Краткое содержание

Современная жизнь очень сильно зависит от доступа в Интернет. HTML относится к технической основе Интернета. Это старый язык, но очень важный и очень живой. Он используется миллионами авторов и постоянно развивается и совершенствуется.