Открыть сервис
Главная → Блог → Формат HTML

Формат HTML

HTML (от англ. HyperText Markup Language — язык гипертекстовой разметки) — это стандартизированный язык разметки документов для просмотра веб-страниц в браузере. HTML определяет структуру и смысл содержимого веб-страницы, используя систему тегов (элементов), которые интерпретируются браузером и отображаются в виде текста, изображений, таблиц, ссылок и других элементов. Является основой Всемирной паутины (World Wide Web) наряду с CSS (каскадными таблицами стилей) и JavaScript.

История

Предпосылки создания

В конце 1980-х годов в Европейской организации по ядерным исследованиям (CERN) работал британский учёный Тим Бернерс-Ли. Для обмена научной документацией между сотрудниками ему требовалась система, позволяющая связывать документы гиперссылками. В 1989 году Бернерс-Ли предложил проект глобальной гипертекстовой системы, которая позже стала Всемирной паутиной.

Первая версия

В 1991 году Бернерс-Ли опубликовал первый в истории документ, описывающий HTML. Эта версия, позже названная HTML 1.0, содержала около 20 тегов, большинство из которых сохранились до сих пор (например, <p>, <h1>, <a>, <img>). Первый веб-браузер, также созданный Бернерс-Ли, назывался WorldWideWeb и был способен отображать простые HTML-документы.

Стандартизация и развитие

В 1994 году была основана организация World Wide Web Consortium (W3C), которая взяла на себя стандартизацию HTML. В 1995 году вышла спецификация HTML 2.0, которая зафиксировала основные элементы языка. В 1997 году была выпущена HTML 3.2, которая добавила поддержку таблиц, апплетов и текстовых обтеканий. В 1999 году вышла HTML 4.01, которая стала одной из самых стабильных и широко используемых версий. Она включала поддержку каскадных таблиц стилей (CSS), скриптов и фреймов.

XHTML и HTML5

В начале 2000-х годов W3C разработал XHTML (Extensible HTML) — более строгую версию HTML, основанную на XML. XHTML требовал закрытия всех тегов и соблюдения синтаксиса XML, что усложняло разработку и не получило широкого распространения в вебе. В 2004 году группа разработчиков из Mozilla, Opera и Apple, недовольная медленным развитием HTML со стороны W3C, создала WHATWG (Web Hypertext Application Technology Working Group). Эта группа начала работу над спецификацией HTML5, которая была принята W3C в 2014 году. HTML5 стал первой версией, ориентированной не только на документы, но и на веб-приложения. Он добавил новые семантические элементы (<header>, <footer>, <article>, <section>), мультимедийные возможности (<audio>, <video>), элементы для работы с графикой (<canvas>, <svg>), а также API для хранения данных, геолокации и работы с файлами.

Структура HTML-документа

HTML-документ состоит из двух основных частей: заголовка (head) и тела (body). Базовая структура выглядит следующим образом:

``html <!DOCTYPE html> <html lang="ru"> <head> <meta (организация признана экстремистской, деятельность запрещена в РФ) charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Заголовок страницы</title> </head> <body> <h1>Заголовок первого уровня</h1> <p>Это абзац текста.</p> </body> </html> ``

  • <!DOCTYPE html> — объявление типа документа, указывающее браузеру, что используется HTML5.
  • <html> — корневой элемент, содержащий весь документ.
  • <head> — контейнер для метаданных: заголовка страницы, кодировки, подключения стилей и скриптов.
  • <title> — заголовок страницы, отображаемый во вкладке браузера.
  • <body> — видимое содержимое страницы.

Элементы и теги

HTML состоит из элементов, которые обозначаются тегами. Теги бывают парными (открывающий и закрывающий, например <p>...</p>) и одиночными (например <br> для переноса строки или <img> для изображения). Элементы могут иметь атрибуты, которые задают дополнительные свойства. Например, атрибут href у тега <a> указывает адрес ссылки: <a href="https://example.com">Ссылка</a>`.

Основные категории элементов

  • Структурные элементы: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> — определяют логические блоки страницы.
  • Текстовые элементы: <h1>–<h6> (заголовки), <p> (абзац), <span> (строчный контейнер), <strong> (жирный текст), <em> (курсив).
  • Ссылки и изображения: <a> (гиперссылка), <img> (изображение), <map> и <area> (карты изображений).
  • Списки: <ul> (маркированный), <ol> (нумерованный), <li> (элемент списка).
  • Таблицы: <table>, <tr> (строка), <td> (ячейка), <th> (заголовок ячейки).
  • Формы: <form>, <input>, <textarea>, <button>, <select>, <label> — для сбора пользовательских данных.
  • Мультимедиа: <audio>, <video>, <source>, <track>.
  • Графика: <canvas> (для рисования через JavaScript), <svg> (для векторной графики).

Семантическая вёрстка

Семантическая вёрстка — это подход, при котором HTML-элементы используются в соответствии с их значением, а не только для визуального оформления. Например, для заголовка используется <h1>, а не <div> с увеличенным шрифтом. Это улучшает доступность сайта для людей с ограниченными возможностями (скринридеры), упрощает индексацию поисковыми системами (SEO) и делает код более понятным для разработчиков.

Версии HTML

ВерсияГод выпускаКлючевые особенности
HTML 1.01991Первая версия, около 20 тегов
HTML 2.01995Первая стандартизированная версия
HTML 3.21997Таблицы, апплеты, обтекание текстом
HTML 4.011999CSS, скрипты, фреймы, формы
XHTML 1.02000Строгий синтаксис на основе XML
HTML52014Семантические элементы, мультимедиа, API для приложений

Применение

HTML используется повсеместно для создания веб-страниц и веб-приложений. Он является основой для таких технологий, как:

  • Веб-сайты: от простых личных страниц до крупных порталов и интернет-магазинов.
  • Веб-приложения: почтовые клиенты (Gmail), редакторы документов (Google Docs), социальные сети (VK, Facebook). (Meta Platforms Inc. — организация признана экстремистской и запрещена на территории РФ.)
  • Электронные письма: HTML используется для форматирования писем в почтовых клиентах.
  • Мобильные приложения: гибридные приложения (например, на базе Cordova или React Native) используют HTML для отображения интерфейса.
  • Документация: многие системы автоматической генерации документации (например, Javadoc, Doxygen) создают HTML-файлы.

Инструменты для работы с HTML

Для создания HTML-документов достаточно простого текстового редактора (Блокнот, Notepad++, Sublime Text). Однако для удобства используются:

  • Интегрированные среды разработки (IDE): Visual Studio Code, WebStorm, PhpStorm.
  • Редакторы кода: Atom, Brackets, Vim.
  • Визуальные редакторы: Adobe Dreamweaver, Wix, Tilda (последние два не требуют знания HTML, но генерируют его автоматически).
  • Онлайн-песочницы: CodePen, JSFiddle, Replit — позволяют писать и тестировать HTML в браузере.

Критика и ограничения

HTML как язык разметки имеет ряд ограничений:

  • Отсутствие логики: HTML не является языком программирования, он не поддерживает переменные, циклы или условия. Для динамического поведения требуется JavaScript.
  • Зависимость от браузера: разные браузеры могут по-разному интерпретировать один и тот же HTML-код, особенно старые версии. Для обеспечения кроссбраузерности требуется тестирование.
  • Сложность поддержки: при большом объёме кода без использования CSS и JavaScript HTML-документы становятся трудночитаемыми и сложными в поддержке.
  • Семантическая путаница: многие разработчики используют HTML-элементы не по назначению, что ухудшает доступность и SEO.

Интересные факты

  • Первый HTML-документ, созданный Тимом Бернерс-Ли, до сих пор доступен на сайте CERN.
  • В HTML5 было удалено несколько устаревших элементов, например <font>, <center>, <big>, которые ранее использовались для оформления, но теперь заменены CSS.
  • Существует спецификация HTML Living Standard, разрабатываемая WHATWG, которая постоянно обновляется и не имеет фиксированных версий.
  • HTML-код можно встраивать в другие форматы, например, в Markdown или в XML-документы.

Источники

  1. Спецификация HTML5 — W3C Recommendation, 2014.
  2. HTML Living Standard — WHATWG, текущая версия.
  3. Тим Бернерс-Ли, «Плетя паутину: истоки и будущее Всемирной паутины», 1999.
  4. Документация MDN Web Docs (Mozilla Developer Network) — раздел «HTML».
  5. Учебник по HTML — сайт «HTML Academy» (Россия).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →

Похожие материалы