01. HTML и CSS

Тим Бернерс-Ли Язык HTML был разработан британским учёным Тимом Бернерсом-Ли (Tim Berners-Lee) в 1991–1992 гг., в то время, когда он работал в ЦЕРН (CERN) — Европейский совет по ядерным исследованиям в Женеве (Швейцария).

Версия HTML 1.0 была предельно проста — кроме элементов для записи гипертекстовых переходов (для контекстной связи документов друг с другом), она предусматривала лишь несколько элементов для логической разметки текста и один элемент (IMG) для записи ссылок на файлы с картинками-иллюстрациями.

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

Итак, HTML был создан как язык структурной разметки документов. Что это означает? Это означает, что на этом языке можно обозначать границы частей документа и их соподчинение (это и есть структура): заголовки Hn, абзацы P, цитаты CITE, термины DFN, выделения EM, сильные выделения STRONG и так далее.

А вид элементов на экране? Задача представления элементов возлагалась на браузеры.

Благодаря такому разделению размеченный текст может без труда выводиться на любое мыслимое устройство вывода. Например, браузер на компьютере с текстовым монитором может обрамлять выделенный текст знаками подчёркивания (вот так: это _выделение_), на графический монитор выводить текст курсивом (вот так: это выделение), а на компьютере с голосовым выводом произносить выделенный текст повышенной интонацией.

Очень хорошо! Теги HTML совсем немного увеличивали объём исходного текста, зато делали его просмотр независимым от компьютера и операционной системы. И было даже не важно, какой на компьютере монитор, маленький, большой, текстовый, графический, или даже нет его вовсе, а вместо него — синтезатор речи.

Очень хорошо! Но скучновато… Все тексты, размеченные тегами HTML, смотрятся неплохо (разработчики браузеров постарались), но совершенно одинаково. И нет никакой возможности изменить визуальное представление элемента на экране, этим занимается браузер, не суйтесь разработчики гипертекстовых страниц!

Безобразие! Получается, что все сайты будут на одно лицо. Так не пойдёт. Мы хотим не просто кушать информацию, мы хотим, чтобы она подавалась под разными соусами, мы хотим, чтобы над страницами трудились дизайнеры и превращали их в произведение искусства!

Так примерно думали и говорили Web-разработчики и давили на производителей браузеров: дайте нам возможность самим управлять видом страниц, добавьте в HTML нужные для этого средства!

Так вот и стал HTML пополняться специальными элементами и атрибутами, которые позволяли непосредственно управлять видом материала на экране: элемент I — для оформления курсивом, B — для полужирного начертания, FONT — для задания шрифта; атрибут color — для установки цвета, size — для изменения размера, border — для создания рамки и так далее.

Стало хорошо и одновременно плохо. Хорошо, потому что Web засверкал, заблестел и даже местами, благодаря трудам настоящих дизайнеров, стал по настоящему красивым.

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

Более того, собственно структурная разметка стала вообще сходить на нет. Вместо H1 заголовок запросто размечался визуальным элементом FONT, в котором атрибутами задавался шрифт, цвет и размер. Вместо законного элемента P для оформления абзацев использовалась пара тегов <BR> и так далее. HTML вместо языка разметки структуры всё больше превращался в средство визуального представления материала на экране.

На самом деле, это ужасно! HTML-код стал тяжёлым, нечитабельным, нелогичным и плохо совместимым с разными браузерами, ведь очень часто разработчики браузеров придумывали свои собственные визуальные теги и атрибуты, которые другие браузеры не поддерживали.

Помимо утяжеления страниц, килобайтный вес которых напрямую определяет посещаемость сайта (чем быстрее страница грузится, тем охотнее её просматривают в Сети), совмещение визуальных указаний со структурной разметкой существенно усложняет модификацию дизайна.

В самом деле, если разработчик принял решение выводить текст рубленым шрифтом пониженного размера вместо ранее используемого серифного шрифта, он должен внимательно отредактировать сотни страниц сайта, заменяя всюду тег <FONT face="Journal">, тегом <FONT face="Verdana" size="-1">.

Автоматизировать такую замену нельзя, ведь исходные теги FONT могут содержать и другие атрибуты, например, color. Приходится выполнять правки вручную, лишь частично упрощая жизнь автоматическим поиском по ключу font. Работа большая, как и вероятность ошибки: легко можно пропустить правку тега или даже целого файла.

Надо было возвращаться к истокам: освободить HTML от визуального мусора, оставить в нём только средства для разметки структуры. Увы, такой возврат был невозможен: в Сети уже работало множество сайтов созданных визуальными средствами HTML. Да и от самих красот никто бы уже не отказался. Ни читатели, ни разработчики, ни производители браузеров, которым важно привлечь внимание к возможностям своего продукта.

Далее события развивались так. Описанием стандартов HTML, начиная с версии 2.0 (1994 год), стала заниматься международная организация W3C (от англ. World Wide Web Consortium — Консорциум Всемирной паутины).

В 1995 году Консорциум ввёл в HTML версии 3.0 поддержку иерархических стилевых спецификаций CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей).

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

Таким образом, на CSS возлагалась задача объяснить браузеру, как отображать элементы на экране и, следовательно, сделать ненужными визуальные средства в самом HTML.

Вот оно идеальное решение: в коде HTML размещать только структурную разметку, а описания визуальных свойств элементов — в коде CSS.

Надо сказать, что ни W3C, ни любая другая организация не могли очистить язык HTML от визуальных средств. Ведь если бы браузеры перестали поддерживать визуальные теги и атрибуты, то 99% сайтов в Сети перестало бы работать!

Иными словами, W3C не удалила из стандарта HTML 3.0 визуальные средства, но она стала активно уговаривать разработчиков не использовать эти средства. Взамен был предоставлен новый язык CSS, который специально предназначался для описаний вида элементов на экране или их представление на других средствах отображении информации (например, на голосовом синтезаторе). Причём возможности CSS существенно превосходили визуальные возможности HTML.

Такие вот дела. Сейчас мы работаем на HTML 4.01 (стандарт опубликован W3C в 1999 году) скоро выйдет HTML 5.0, но мы можем по-прежнему игнорировать CSS, и создавать сайты только на HTML, смешивая в одну кучу структуру и образы — ведь визуальные теги и атрибуты в HTML работают, как и раньше.

Только зачем это нам? Мы этого не хотим. Мы будем использовать CSS и будем изживать визуальные теги из своих HTML-кодов. Так ведь?

HTML и XHTML

В 1997 году W3C опубликовала стандарт HTML 4.0, а в 1999 году — HTML 4.01. Считалось, что на этом развитие языка HTML заканчивается, и на смену ему приходит новый язык XHTML.

Действительно, в 2000 году была опубликована спецификация XHTML 1.0. Буква “X” здесь означает XML (англ. eXtensible Markup Language — расширяемый язык разметки, компактное упрощённое подмножество языка SGML).

XHTML — это попытка обеспечить описания данных с помощью выразительных средств сложного XML, сохранив при этом простоту и удобство HTML.

Однако HTML продолжил свою жизнь, и в качестве подмножества XHTML, и в “чистом” виде, — как простой и привычный инструмент разработки сайтов.

Стало понятно, что, по крайней мере, на уровне первой версии язык XHTML не даёт практически никаких преимуществ по сравнению с HTML, но синтаксические требования в языке XHTML существенно выше, что усложняет использования этого языка разметки.

Кроме того, слухи о конце HTML оказались “сильно преувеличенными”. В 2007 году в новой рабочей группе W3C началась работа над HTML 5. Первый черновик спецификации стал доступен широкой общественности уже 22 января 2008.