Хакнуть HTML: как разработчики обходили ограничения разметки

История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали хаки и подходы, которые использовали веб-программисты, чтобы выйти за пределы ограничений HTML.

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

Создать макет страницы в табличной верстке

Зачем: раньше не существовало гибких инструментов для создания сложных и адаптивных макетов.

До появления инструментов, таких как Flexbox и CSS Grid, разработчики использовали HTML-таблицы (<table>), чтобы создавать структуру веб-страницы:

<body>   <table>     <!-- Шапка сайта -->     <tr>       <td colspan="3" class="header">         Шапка сайта       </td>     </tr>     <!-- Основная структура: меню, контент, боковая панель -->     <tr>       <!-- Боковое меню -->       <td class="menu">         <strong>Меню:</strong>         <ul>           <li><a href="#">Главная</a></li>           <li><a href="#">О нас</a></li>           <li><a href="#">Услуги</a></li>           <li><a href="#">Контакты</a></li>         </ul>       </td>       <!-- Основной контент -->       <td class="content">         <h2>Основной контент</h2>         <p>Это пример основного контента страницы. В эпоху до CSS Grid и Flexbox веб-разработчики использовали таблицы для создания макетов сайтов.</p>         <p>Таблицы позволяли расположить элементы на странице в виде ячеек, но это нарушало семантическую структуру HTML и затрудняло адаптацию под разные экраны.</p>       </td>       <!-- Боковая панель -->       <td class="sidebar">         <strong>Боковая панель:</strong>         <p>Здесь можно разместить дополнительную информацию, новости или рекламу.</p>       </td>     </tr>     <!-- Подвал сайта -->     <tr>       <td colspan="3" class="footer">         © 2024 Пример сайта на табличной верстке. Все права защищены.       </td>     </tr>   </table> </body>

Как это выглядело на сайте:

Хакнуть HTML: как разработчики обходили ограничения разметки

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

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

Сделать отступы с помощью картинок

Зачем: чтобы разделять смысловые блоки, отображать контент на странице более структурированно.

Разработчики вставляли крошечные прозрачные GIF-изображения для имитации отступов — невидимых пробелов и разделителей между элементами.

<body> <p>Текст до отступа</p> <img src="https://via.placeholder.com/10x1/FFFFFF/FFFFFF" width="10" height="1" alt="Отступ"> <p>Текст после отступа</p> </body>

Как это выглядело на сайте:

Хакнуть HTML: как разработчики обходили ограничения разметки

Хак был распространен в 1990-х гг. Настраивая размер и ориентацию «картинки», можно было разделять элементы разными промежутками.

Выглядит странно, но тогда наряду с табличной структурой это было едва ли не единственным способом регулировать расположение элементов на странице. Минус решения — об адаптивности верстки речь не шла. Сейчас CSS-свойства margin, padding и gap делают такие манипуляции ненужными.

Добавить анимированный текст

Зачем: привлечь внимание пользователя к определенному тексту в эпоху до сложных CSS-анимаций.

Разработчики добавляли тег <blink>, который заставлял текст непрерывно мигать.

<body> <blink>Важное объявление!</blink> </body>

Или тег <marquee> для создания бегущей строки.

<body> <marquee behavior="scroll" direction="left" scrollamount="5">Текст движется по экрану!</marquee> </body>

Как это выглядело на сайте:

Анимация была популярна поначалу, но быстро стала восприниматься как некачественный раздражающий элемент. Тег <blink> окончательно ушел в прошлое: его удалили из стандарта HTML5 и отключили в современных версиях браузеров Chrome, Firefox и Edge. Но бегущая строка всё еще поддерживается браузерами из-за обратной совместимости.

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

Создать уникальный дизайн текста

Зачем: чтобы уйти от ограниченного количества стандартных шрифтов и создать свой визуальный стиль сайта.

На заре веб-разработки браузеры отображали в основном только стандартные шрифты, например Arial, Times New Roman и Verdana. Они были предустановлены на устройствах пользователей.

Разработчики использовали костыли, чтобы добавить разнообразия. Например, заменяли текст графическими изображениями или использовали sIFR (Scalable Inman Flash Replacement) — с помощью Flash вместо текстовых элементов показывали векторные шрифты.

<body> <!-- Замена текста картинкой --> <h1><img src="https://via.placeholder.com/300x50?text=Custom+Font" alt="Заголовок"></h1> <!-- Использование sIFR для замены текста на векторные шрифты через Flash:--> <script type="text/javascript"> replaceSWF("h1", "customfont.swf"); </script> </body>

Как это выглядело на сайте:

Хакнуть HTML: как разработчики обходили ограничения разметки

Решения вызывали множество проблем. Одна из них — ухудшение SEO из-за медленной загрузки страниц и невозможности индексировать текст с картинок. Метод sIFR работал только при установке Flash на компьютере пользователя. Проблему решило добавление технологии @font-face в CSS.

Адаптировать сайт для разных браузеров

Зачем: чтобы сайт правильно отображался в разных браузерах.

В эпоху «войн браузеров» в 1997–1999 годы Internet Explorer (IE) от Microsoft и его конкурент Netscape Navigator от компании Netscape Communications Corporation по-разному интерпретировали CSS. Разные версии IE тоже обрабатывали HTML и CSS каждая по-своему. Всё это создавало хаос для разработчиков.

Приходилось использовать специфическое написание селекторов CSS для разных браузеров: например, <_width> понимал Internet Explorer, но игнорировал Netscape.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>CSS-хак для IE</title> <style> p { color: blue; _color: red; /* Только для Internet Explorer 6 */ } </style> </head> <body> <p>Этот текст должен быть красным в IE6 и синим в других браузерах.</p> </body> </html>

Позже применяли условные комментарии, которые работали только в определенной версии Internet Explorer.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Условные комментарии для IE</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 50px; } h1 { color: blue; /* Стандартный стиль для всех браузеров */ } </style> <!-- Условный комментарий для IE6 --> <!--[if IE 6]> <style> h1 { color: red; /* Стиль для IE6: заголовок становится красным */ } body::before { content: "Вы используете Internet Explorer 6!"; color: white; background-color: red; padding: 10px; display: block; text-align: center; } </style> <![endif]--> </head> <body> <h1>Заголовок с условными стилями</h1> <p>Этот текст выглядит одинаково во всех браузерах, а заголовок изменится в IE6.</p> </body> </html>

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

Открывать сайт быстрее

Зачем: оптимизировать скорость загрузки сайта, чтобы улучшить пользовательский опыт и рейтинг сайта в поисковых системах.

Разработчики используют атрибут loading="lazy" для отложенной загрузки изображений: картинки загружаются не при переходе на сайт, а только когда пользователь доходит до нужного места на странице.

<body> <img src="https://via.placeholder.com/600x400?text=Lazy+Loaded" loading="lazy" alt="Ленивая загрузка"> </body>

Разработчики используют <link rel="preload"> для предварительной загрузки шрифтов и скриптов.

<head> <meta charset="UTF-8"> <title>Предзагрузка шрифтов</title> <link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf" as="font" type="font/woff2" crossorigin="anonymous"> <style> body { font-family: 'Roboto', Arial, sans-serif; } </style> </head>

Эти методы значительно ускорили работу сайтов. Ленивая загрузка уменьшала первичное время загрузки страниц с большим количеством контента, экономя трафик пользователей. Предварительная загрузка позволяла браузеру заранее подготовить важные файлы, улучшая скорость отображения. Если раньше подобные задачи решались сложными JavaScript-скриптами, то теперь это стандартные функции HTML.

Упростить автозаполнение форм

Зачем: создать подсказки для заполнения форм без лишних скриптов и тяжелого кода.

Вместо скриптов и библиотек разработчики используют тег <datalist> для создания списков автозаполнения. для создания списков автозаполнения.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Автозаполнение форм</title> </head> <body> <h1>Введите название браузера</h1> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> <option value="Safari"> <option value="Opera"> </datalist> </body> </html>

Как это выглядело на сайте:

Хакнуть HTML: как разработчики обходили ограничения разметки

До появления <datalist> разработчики создавали сложные JavaScript-решения для автозаполнения. Нативный HTML5-элемент простой, легковесный и не требует подключения дополнительных библиотек. Тег позволяет создавать интерактивные подсказки на основе введенной информации прямо в HTML.

Описанные хаки — не просто технические курьезы, а важный этап развития интернета. Каждое нестандартное решение было шагом к удобным сайтам. Сейчас можно посмеяться над странными решениями, но такой подход двигал технологии вперед.

А какие необычные методы разработки запомнились вам? Делитесь в комментариях своим первым опытом создания сайтов и рассказывайте про хаки, которые используете до сих пор.

1919
22
4 комментария

Не ХТМЛ, но про таблицы: одно время попадались доки в Ворде, которые сыпались при малейшем вмешательстве и не поддавались нормальному форматированию. А потом я поняла, что там таблицы с невидимыми границами. И стала сама так иногда делать :)

1

Классная, подробная статья

1

Вспомнил Dreamweaver и всплакнул)