Frontend Evolution #1: Як 18 HTML-тегів змінили світ: революція веб-фронтенда за 5 років (1990-1995)
🚀 Від академічного експерименту до глобальної платформи
Пам’ятаю, як у 2013 році, працюючи над одним із перших українських стартапів, я натрапив на архівну копію першого сайту в історії — info.cern.ch. Тоді мене вразило, наскільки примітивним виглядав той HTML порівняно з тим, що ми вже вміли робити з jQuery та ранніми версіями фреймворків. Але чим більше я заглиблювався в історію веб-розробки, тим більше розумів: ті самі 18 HTML-тегів, які Tim Berners-Lee створив у 1990 році, заклали фундамент для всього, що ми знаємо сьогодні як frontend-розробку.
Ця стаття відкриває цикл про еволюцію архітектури фронтенда. Ми розглянемо, як за п’ять революційних років
📚 Історичний контекст: коли веб ще не існував
Проблема інформаційного хаосу
У 1989 році в CERN (Європейській лабораторії фізики частинок) працювало понад 17,000 науковців з різних країн. Головною проблемою було не отримання нових даних, а їх систематизація та обмін між дослідниками. Інформація зберігалася в різних форматах, на різних комп’ютерах, з різними операційними системами.
Tim Berners-Lee, англійський програміст, що працював у відділі комп’ютерних сервісів CERN, описував ситуацію так: «Інформація була розкидана по всьому інтернету, але не було способу ефективно її знайти та зв’язати між собою».
Альтернативи того часу
До появи веба існували інші спроби організувати інформацію:
- Gopher — система меню для доступу до документів (популярна в університетах)
- FTP — файловий обмін, але без можливості гіперпосилань
- WAIS (Wide Area Information Server) — пошук по базах даних
- Usenet — обмін повідомленнями, але не документами
Жодна з цих систем не вирішувала головну проблему: як зв’язати документи між собою незалежно від їх розташування.
Ключові гравці та події
12 березня 1989 — Berners-Lee подає пропозицію «Information Management: A Proposal», де вперше описує концепцію World Wide Web.
1990 — створення перших трьох технологій веба:
- HTML (HyperText Markup Language)
- HTTP (HyperText Transfer Protocol)
- URL (Uniform Resource Locator)
1993 — CERN оголошує, що технології веба будуть безкоштовними для всіх. Це рішення змінило історію.
⚙️ Технічна архітектура: як все починалося
Перші 18 тегів HTML: революційна простота
Оригінальна специфікація HTML містила лише 18 тегів, але кожен мав чітке призначення:
<!-- Структура документа --> <html> <head> <title>Перша веб-сторінка в історії</title> </head> <body> <!-- Заголовки (6 рівнів) --> <h1>Заголовок першого рівня</h1> <h2>Заголовок другого рівня</h2> <!-- Параграфи та текст --> <p>Це параграф тексту з <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">гіперпосиланням</a> на інший документ.</p> <!-- Списки --> <ul> <li>Елемент ненумерованого списку</li> <li>Ще один елемент</li> </ul> </body> </html>
Ключова інновація — тег <a> (anchor). Він дозволяв створювати посилання на будь-який документ у мережі:
<a href="http://info.cern.ch/hypertext/WWW/TheProject.html"> Оригінальний опис проекту WWW </a>
Цей простий тег створив глобальний граф документів, де кожна сторінка могла посилатися на будь-яку іншу. До цього такого не існувало в принципі.
Еволюція браузерів: від WorldWideWeb до Mosaic
WorldWideWeb (1990) — перший браузер, створений самим Berners-Lee на комп’ютері NeXT. Мав революційну особливість: редагування HTML прямо в браузері. Уявіть — перший браузер був водночас і першим WYSIWYG-редактором!
Mosaic (1993) — створений Marc Andreessen та Eric Bina в Університеті Іллінойса. Ключові інновації:
<!-- Революційний тег <img> --> <img src="logo.gif" alt="Логотип компанії"> <!-- Центрування тексту --> <center>Текст по центру</center>
Тег <img> змінив все. До Mosaic зображення відкривалися в окремих вікнах. Тепер їх можна було вбудовувати прямо в текст.
JavaScript: народження інтерактивності за 10 днів
Травень 1995 — Brendan Eich з Netscape створює JavaScript за 10 днів. Спочатку мова називалася «Mocha», потім «LiveScript», і нарешті «JavaScript» (з маркетингових міркувань).
Перші можливості JavaScript були обмеженими, але революційними:
// Перевірка форм (революція для 1995 року!)
function validateForm() {
var name = document.forms["myForm"]["name"].value;
if (name == "") {
alert("Ім'я не може бути порожнім");
return false;
}
}
// Зміна зображень (ефект rollover)
function changeImage() {
document.images["myimage"].src = "image2.gif";
}
Архітектурне рішення: JavaScript виконувався в одному потоці з рендерингом HTML. Це означало, що будь-який alert() блокував відображення сторінки — проблема, з якою ми боремося досі.
💼 Практичні кейси: як це було в реальності
Перші комерційні сайти: Pizza Hut і CNN
1994 рік — Pizza Hut запускає перший сайт для замовлення піци онлайн. Технічні виклики:
<!-- Форма замовлення піци - революція 1994 року --> <form method="POST" action="/order.cgi"> <p>Розмір піци:</p> <input type="radio" name="size" value="small"> Мала<br> <input type="radio" name="size" value="large"> Велика<br> <p>Топінги:</p> <input type="checkbox" name="pepperoni"> Пепероні<br> <input type="checkbox" name="mushrooms"> Гриби<br> <input type="submit" value="Замовити піцу!"> </form>
Проблема: жодної валідації на стороні клієнта. Кожна помилка означала повне перезавантаження сторінки та втрату введених даних.
Особистий досвід: як ми робили сайти на початку 00-х
На початку моєї кар’єри, працюючи в одній з перших веб-студій, ми стикалися з проблемами, які зараз здаються абсурдними:
Проблема браузерної сумісності:
<!-- Перевірка браузера - щоденна реальність 1995-98 -->
<script>
if (navigator.appName == "Netscape") {
document.write('<img src="netscape_version.gif">');
} else {
document.write('<img src="ie_version.gif">');
}
</script>
Макети на таблицях — єдиний спосіб контролювати layout:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="20%">Навігація</td> <td width="60%">Контент</td> <td width="20%">Сайдбар</td> </tr> </table>
Уроки та помилки того періоду
- Змішування контенту з презентацією — проблема, яку ми вирішуємо досі
- Відсутність стандартів призводила до «browser-specific» сайтів
- Лінійна структура документів ускладнювала складні інтерфейси
Але найголовніше: ми навчилися мислити компонентами. Кожен <table>, кожен <form> був мініатюрним компонентом з власною логікою.
🌱 Спадок та вплив на сучасну розробку
Що залишилося актуальним
Семантична розмітка — концепція, закладена в оригінальних 18 тегах HTML:
<!-- 1990 рік --> <h1>Заголовок</h1> <p>Параграф</p> <ul><li>Список</li></ul> <!-- 2025 рік --> <header><h1>Заголовок</h1></header> <main><p>Параграф</p></main> <aside><ul><li>Список</li></ul></aside>
Принцип гіперпосилань еволюціонував у:
- SPA-роутинг (React Router, Vue Router)
- Deep linking в мобільних додатках
- Microservices architecture
Вплив на сучасні фреймворки
Компонентна архітектура React/Vue — це еволюція ідеї «кожен HTML-елемент має призначення»:
// Сучасний React - та сама ідея, але краще
function Article({ title, content }) {
return (
<article>
<h1>{title}</h1>
<p>{content}</p>
</article>
);
}
JavaScript-first підхід виріс з обмежень раннього HTML. Коли розмітки стало недостатньо, логіка перемістилася в скрипти.
Архітектурні паттерни, що народилися тоді
- Separation of Concerns — HTML, CSS, JavaScript
- Progressive Enhancement — сайт працює без JS, але краще з ним
- Graceful Degradation — відступ до простіших версій
🎯 Висновки та перспективи
Період
✅ Семантична розмітка важливіша за візуальне оформлення
✅ Інтерактивність має бути додатковою, не обов’язковою функцією
✅ Стандарти критично важливі для екосистеми
✅ Простота переважає складність у довгостроковій перспективі
Ключовий takeaway: найкращі рішення народжуються з реальних проблем, а не з технологічних можливостей. HTML з’явився не тому, що хтось хотів створити нову мову розмітки, а тому, що фізикам потрібно було ділитися документами.
Але HTML та JavaScript мали свої обмеження, які стали очевидними вже до середини
Про те, як індустрія вирішувала ці виклики через винайдення DHTML, ранніх JavaScript-бібліотек та концепцій прогресивного поліпшення, читайте в наступній статті циклу.
Корисні ресурси:
- Перший сайт в історії — досі працює!
- HTML Living Standard — сучасна специфікація HTML
- MDN Web Docs: HTML — найкращий довідник
Питання для обговорення: Які принципи раннього веба ви використовуєте у своїх проектах? Чи відчуваєте ви вплив тих архітектурних рішень на сучасну розробку? Поділіться досвідом у коментарях! 👇
Олександр Шпак
1 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів