Що таке HTML насправді й чи потрібен він ще комусь в 2024 році

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

1989 рік для світу видався буремним, а для України — визначним. Поки в Німеччині руйнували Берлінську стіну, а в Китаї останні надії на демократію, в Україні відбувався перший зʼїзд Народного Руху, гримів перший по справжньому український музичний фестиваль «Червона Рута», а Брати Гадюкіни випускали свій дебютник «Всьо чотко», назавжди змінивши те, які саме пісні співатиме біля вогнища молодь в середині двотисячних.

І приблизно о тій же порі один співробітник CERN, на ймення Тім Бернерс-Лі, запропонував ідею системи повʼязаних між собою гіпертекстових документів, заклавши фундамент того, що згодом стане World Wide Web, дасть нам усім роботу і можливість дивитися на голі дупи без реєстрації та СМС.

Аби втілити цю ідею в життя, пан Бернерс-Лі розпочинає працювати над революційною мовою — HTML, або ж ГТМР, гіпертекстовою мовою розмітки. А 1991 року він публікує загальнодоступний документ, що містив опис цієї мови, у якому було описано усі 18 HTML-тегів, що існували на той час, значна частина з яких входять до специфікації HTML й досі.

До речі, ви знали, що найперша в світі вебсторінка досі існує і її можна відвідати за ось цим посиланням? Правда, це вже копія, бо оригінальна сторінка розміщувалась на компʼютері NeXT самого Тіма, а щоб доступ до неї був безперервний, на системному блоці висів папірець зі словами DO NOT TURN OFF.

То що ж таке HTML? Це така мова програмува... Що, повірили? Кпиню я з вас. Це мова розмітки. Але розмітки чого? І що таке розмітка в принципі? Відповідь, хоч і очевидна, але не надто проста, тож давайте спробуємо розібратися.

Отже, дуже важливо памʼятати, що HTML розроблявся в першу чергу для розмітки документів. А документ відрізняється від простого тексту тим, що виступає, так би мовити, структурованим контейнером для різноманітної інформації, включно з текстом, картинками, таблицями, списками й іншими видами укладання даних. Основним же покликанням документів є організація усіх цих даних таким чином, аби воно все мало якийсь сенс.

І от, аби мати можливість створювати саме документи, й існує розмітка, як дозволяє відділяти певні частини документа одну від одної та вказувати на певну роль і смисл цих частин. Ми можемо явно вказувати, що ось це — заголовок, а ось це — розділ, ось тут таблиця, там посилання, а ось це — фотка кота. І щоб система, яка обробляє документ, мала хоч якесь уявлення, що ми від неї хочемо, у нас має бути щонайменше дві речі: чіткий набір інструкцій, якими ми користуємося для ось такої розмітки, і словничок цих інструкцій, аби система сприймала значення цих інструкцій так само, як і ми.

І ось якраз таким набором інструкцій і є HTML (як кому раптом цікаво, то базується ця мова на SGML). А специфікація є тим самим словничком. Ми можемо самі явно вказати бравзеру яку саме версію специфікацію використовувати для того чи іншого документа, і в залежности від того результат відображення може суттєво відрізнятися.

Взагалі, розмітка документа може виконувати дуже багато задач. Про розділення вмісту за роллю та сенсом ми вже дізналися трошки раніше, але й інші задачі, які можуть виконувати ті самі HTML-теги. Наприклад, форматування. Тобто ми можемо вказувати не лише що відображати, але й як, покладаючись або на вбудовані стилі, або ж на наші власні.

Ще, до прикладу, можна зберігати й передавати певні дані. Це, правда, більше стосується XML, але й в HTML можна це робити за допомогою атрибутів. В такий спосіб можна навіть зберігати якийсь початковий або проміжний стан, що може впливати на відображення елемента.

Також правильна розмітка є важливою частиною доступности — набору практик розробки вебконтенту у спосіб, що дозволяє користувачам з обмеженими можливостями користуватися вебом зручно й ефективно. Це, до речі, включає в себе не лише обмеження зору, але й руху, і навіть розлади когнітивних здібностей.

Ну і, звичайно ж, це дозволяє забезпечити абсолютне розділення вмісту від відображення. До прикладу, використовуючи HTML разом з CSS, ми можемо повністю змінювати зовнішній вигляд усього документу чи його частин, не змінюючи при цьому структури самого документа.

Найкращою ілюстрацією цього є CSS ZEN GARDEN — сайт, що має тисячі обличь. Його розмітка не змінювалася з 2003 року, однак за цей час він змінив безліч стилів, ставши таким собі випробуванням для розробників, що створюють нові, абсолютно різні дизайни, використовуючи той самий HTML.

Добре, добре, скажете ви, ми зрозуміли що це, і навіть для чого це. А де ж його можна використовувати, той HTML? Найперше, що приходить в голову, звичайно ж, це для розробки вебсторінок. Але буде дуже хибним вважати, що на цьому його практичне застосування й закінчується. Навпаки, воно тут тільки розпочинається.

Адже, нагадаю, що HTML — це гіпертекстова мова розмітки, тобто призначена для розмітки гіпертекстових документів. Ніде не пише, що це мають бути тільки вебдокументи. Ну, не лише тільки вебдокументи.

Одним з таких випадків є електронні листи. Зазвичай ми використовуємо дуже прості засоби для форматування нашого тексту, але більшість імейл клієнтів розуміє й складнішу розмітку, однак якщо ви хочете при створювати усілякі витончені макети, то тут маю для вас погані новини — вам доведеться забути про надбання сучасного CSS та звернутися до темної магії табличної верстки.

Умовно можна, звичайно, сказати, що HTML можна використовувати й для десктопної розробки, але це дуже умовно, адже це, по факту, той самий бравзер з певними плюшками і вашими іконками.

Якщо ж казати про дійсно не веб використання, то можемо згадати про формат електронних книжок EPUB, та й взагалі багато різних форматів покладаються на HTML.

В принципі, HTML можна ще використовувати в друкарській справі, особливо, якщо вправно користуватися CSS media-запитами, зокрема media print. Це, звичайно, потребує певних зусиль, але запевняю, що невеличку книжечку до друку ви точно зможете підготувати.

Якщо ж розвернутися від традиційного сприйняття HTML-документу як документу до сучасного стану справ, то ми побачимо надзвичайно різноманітну й величезну царину користувацьких інтерфейсів, за допомогою яких ми можемо робити безліч різних справ — тицяти, тягати, жамкати, щось там вводити, відкривати, закривати, і взагалі усіляко взаємодіяти.

Користувацькі інтерфейси можуть бути де завгодно, а легкість запуску вебпереглядача на будь якому відрі сприяє тому, що HTML поширюється усе більшою кількістю пристроїв. Якщо перераховувати усе, куди можна втиснути екран і обрізаний бравзер, я, певно вичерпаю ліміт символів на цю статтю.

Тож давайте уявімо собі найочевидніші приклади, де можна зустріти нашу улюблену мову: розумні й не дуже телевізори, бортові компʼютери авто, інтерактивні кіоски, термінали самообслуговування та інші пристрої.

А ще... відеоігри. Так-так. Наприклад, для Unreal Engine існує плагін Web Browser Widget, що дозволяє створювати ігровий інтерфейс за допомогою HTML, CSS та JS. Взагалі, бездушна жалізяка ChatGPT мене переконує, що щонайменше EVE Online, Battlefield та Destiny 2 використовують HTML для відображення певних частин інтерфейсу. Я не знайшов 100% підтвердження цієї інформації, але розкидані інтернетом різноманітні підказки теж вказують на те, що вебтехнології знаходять своє місце навіть в розробці ігор AAA класу.

Взагалі, HTML лишається живою мовою, що постійно розвивається, не лише здобуваючи нові можливості, а й позбуваючись відверто застарілих та непотрібних тегів. До прикладу, center та font поринули в небуття завдяки CSS, menu та dir замінилися більш загальним ul, а теги на кшталт nextid і тоді викликали б у вас подив.

З іншої ж сторони, сучасний HTML поповнюється не лише новими семантичними елементами, а й цілком собі функціональними, до прикладу dialog для відображення діалогових вікон. Ну або нарешті до бравзерів доїжджає підтримка елементів, які були в стандарті ще з 2014 року, але усе руки не доходили. Ну, знаєте, як ото розібрати балкон.

Сьогодні у веброзробці без HTML нікуди, а завтра — хтозна де ще ця мова стане стандартом. Комусь вона здається запростою, комусь — загроміздкою, комусь примітивною, комусь заскладною. Але це не спростовує того факту, що саме HTML є основою основ веброзробки, і без неї нам не було б що прикрашати за допомогою CSS або оживляти за допомогою JS.

Чи можна не вчити HTML в сьогоднішньому світі безлічі фреймворків? Можна. Чи варто вчити HTML в сьогоднішньому світі безлічі фреймворків?

Однозначно варто.

З радістю вітатиму вас на ютуб каналі «Сергій Бабіч та Дивовижний світ веброзробки», а також в моєму телеграм-каналі.

Дякую за підтримку!