История создания языков разметки: как появились и для чего нужны HTML и XML
Вернемся ближе к теме веб-разработки, а именно одной из краеугольных технологий в современном вебе — языку гипертекстовой разметки HTML.
Что это такое, для чего он нужен, и некоторые неочевидные особенности расскажу далее.
Все началось с оцифровки текстовых документов
С появлением первых компьютеров и сети, связывающей их, пришла идея оцифровывать текстовые документы и складывать их в едином месте на одном компьютере, как в библиотеке.
Запросы были следующего вида:
«Пришли мне документ ABC.TXT в папке 123»
Поскольку компьютеры не умеют общаться человеческим языком, была придумана специальная схема для адресации документов — она стала называться URL (Uniform Resource Locator), который служил указателем для ресурса в сети, например, текстового документа.
Так, для примера выше, URL мог бы выглядеть следующем образом:
http://server/123/ABC.TXT
Такой адрес указывает, что документ находится на компьютере с именем «server» в папке «123», а файл называется «ABC.TXT». HTTP в начале строки — это название протокола — набора правил, с помощью которых компьютеры договариваются между собой и передают информацию, подобно языку.
Как обычный текст превратился в гипертекст
Идея гипертекста изначально была проста: каким-то образом нужно было обозначить, что конкретное слово или несколько слов являются ссылкой на другой документ как если бы его выделили ручкой или карандашом и сделали сноску.
Тем самым можно было бы переходить от одного документа к другому, переходя по словам как по закладкам в книге.
Так родилась идея языка гипертекстовой разметки (HyperText Markup Language) или коротко — HTML.
Далее я покажу пример того, как выглядит гипертекстовая разметка.
Допустим у нас есть текст:
Чтобы компьютер понял, что слово «ссылка» должно вести на другой документ, его необходимо отметить. Это делается с помощью тегов:
В HTML для гиперссылок используется тег <a> (anchor / якорь), который окружает текст, являющийся ссылкой. С помощью тега можно связать адрес ссылки, URL, и, непосредственно, текст ссылки.
Собственно, это все, что нужно для того, чтобы фрагмент выше считался полноценным гипертекстом.
Конечно, существует множество различных тегов HTML, которые позволяют определять помимо ссылок различные структурные элементы документа, такие как:
- Списки;
- Таблицы;
- Заголовки;
- Разделители;
- и многое другое.
Гипертекст сам по себе не определяет внешний вид документа. Он позволяет определить его структурные элементы и взаимосвязи между ними (например: заголовок, подзаголовок, параграф).
Такой подход к построению документа называется семантической версткой. В этом случае для каждого элемента документа используется HTML-тег в соответсвии с семантикой (назначением) элемента. Для заголовка — это может быть <h1>, <h2>, <h3>, ..., для параграфа — <p>, для таблицы — <table> и так далее. Семантическая разметка позволяет определить четкую структуру документа.
За внешний вид отвечает интерпретатор гипертекста. Обычно это веб-браузер, хотя и не всегда.
Основное преимущество HTML заключается в том, что для верстки не нужен сложный инструментарий — достаточно простого текстового редактора наподобие блокнота. Сейчас также много бесплатных онлайн-редакторов, которые позволяют одновременно писать код и видеть результат прямо в браузере, например: codepen.io
Разметка текста за пределами Интернета
На самом деле HTML — не единственный язык разметки текста. Их достаточно много, и служат они для разных целей. Некоторые из них совсем не похожи на привычный HTML.
Примером такого языка может служить TeX. Вместо тегов в угловых скобках он использует фигурные скобки, а сам фокус языка больше смещен на типографику. То есть в нем больше тегов для детального описания частей слов или даже математических формул.
Разметка не только текста, но и данных
И хотя язык HTML предназначен для достаточно узкой цели — разметки структуры текстовых документов, однако подобные языки также удобно использовать для структуризации любых данных.
Для этого была придумана модификация, которая называется XML (eXtensible Markup Language / расширяемый язык разметки).
В отличие от HTML, он не имеет четко заданного набора тегов. В зависимости от потребностей пользователя он сам может создавать собственные теги, позволяющие описать необходимые данные.
Существует множество модификаций XML, вот некоторые самые известные из них:
- Форматы файлов для текстовых и табличных процессоров (в частности, продуктов Microsoft и их аналогов): DOCX, XLSX, PPTX;
- Формат для описания векторных изображений — SVG;
- Определение плейлистов для видео или музыки — XSPF.
Подводя итог, можно сказать, что идея разметки текста из 60-х годов не только нашла практическое применение, но и получила значительное развитие с течением времени. Впоследствии идея разметки текста эволюционировала в отдельные уникальные файловые форматы, которыми сейчас пользуется огромное количество людей.
В этой статье я хотел показать, что помимо веб-сайтов идея разметки текста и структуризации, которая лежит в основе HTML, намного шире и применяется также и в других технологиях, в том числе и в компьютерной графике и мультимедиа.
Надеюсь вам было интересно!
Если вам понравилась эта статья — буду благодарен, если поставите лайк и напишите комментарий. Так я пойму, что на подобные темы стоит писать больше. Также в своем Telegram-блоге «Код без тайн» я пишу о веб-разработке, информатике и других технологиях — заходите в гости!