Тяжелое полиграфическое наследие
Строго говоря, гипертекст появился очень давно: когда появились оглавления и предметные указатели, а также сноски и отсылки к другим фрагментам печатного издания. Другое дело, что книга не выполняла за читающего его работу и не отсылала к нужному фрагменту сама: для этого читателю приходилось искать нужную страницу самостоятельно. (В современных книгах все происходит примерно так же: со времен Гутенберга и Федорова в этом отношении технологии книжного дела не ушли далеко вперед.) Под «быстрым гипертекстом» понимается такая отсылка к другим документам или другим фрагментам текущего документа, когда пользователь видит только текст ссылки, а адрес находится вне поля его видимости (обычно браузеры все же дают подсказки о том, по какому адресу ведут ссылки — с помощью статусной строки или всплывающих подсказок). При этом по ссылке достаточно щелкнуть, чтобы перейти по нужному адресу — поэтому в сочетании и фигурирует слово «быстрый».
Кроме этого, текст на веб-страницах имеет еще три особенности, уже не такие существенные, но которые все же нельзя игнорировать.
Первая особенность связана с сущностью интернета и современным ритмом жизни. Если ценность фолианта не в последнюю очередь определяется количеством страниц в нем и объемом текста, то с веб-страницами как раз наоборот. Если страница не является аналогом бумажного издания, да еще раритетного, то чем короче на ней тексты, тем лучше. Дело в том, что восприятие информации при использовании электронных носителей информации существенно отличается от восприятия при использовании аналоговых. Это так называемый «синдром переключения каналов». Когда пульт в руке, очень легко переключаться с одного канала на другой. Когда достаточно щелкнуть по ссылке, очень легко покинуть один сайт и уйти на другой, потом на третий, а в конце просмотреть журнал посещений и ужаснуться, что вы уже на 124-м сайте за 17 минут. Психологически действует такой момент: если в течение нескольких секунд страница не заинтересовала посетителя, то он ее покинет. Вероятно, навсегда, потому что среди нескольких миллиардов веб-страниц всегда будет на чем остановиться. То же самое с телевизионными каналами (правда, их меньше).
Отсюда простой вывод: страница должна чем-то привлечь посетителя, иначе зачем она вообще создавалась? Если не внешним ви-
|
3. |
Верстка |
|
Дом, то содержимым, текстом. А в этом случае текстовые блоки должны быть лаконичными и понятными с первого прочтения. Понятность относительна (посетители всегда разные по степени подготовки), а вот правило лаконичности всегда должно соблюдаться. Длинные тексты на веб-страницах читать сложно, хотя бы в силу того, что с экрана читать сложнее, чем с бумаги. Лев Николаевич не выдержал бы натиска конкурентов, живи он в эпоху веб-дизайна. Вы думаете, почему японские хокку так популярны среди постоянных обитателей интернета? Потому что они короткие. Вторая особенность текстов на веб-страницах связана с большим количеством разных параметров устройств вывода. Во-первых, у посетителей разные мониторы. Во-вторых, даже на двух мониторах одинакового размера может быть разное разрешение (сейчас популярны от 800 на 600 точек до 1280 на 1024 точки). В-третьих, даже на одном мониторе с зафиксированным разрешением посетитель может сильно уменьшить окно браузера либо, напротив, развернуть его на полный экран (F11). От всех этих условий очень сильно зависит вид текста. Один и тот же текст может выглядеть то как одна строчка, то как столбец в 10 строк. Во время одной сессии работы с веб-страницей пользователь может изменять окно браузера, отчего текст «ползет», особенно если он сверстан не в колонке жестко заданной ширины. Если на бумаге текст располагается раз и навсегда, то на веб-страницах он очень подвижный. Наконец, даже не изменяя окна браузера, посетитель может воспользоваться функциями увеличения и уменьшения размера текста (есть во всех браузерах) и масштаба отображения веб-страницы (есть во многих современных браузерах). Так что, если текст не «отлит» в виде изображения (так делают некоторые веб-дизайнеры), то он совершенно неподконтролен. Посетитель в большинстве случаев сможет сделать с ним, что хочет. А если сделать из текста изображение, то ведь у посетителя может быть отключена графика в браузере. Бедные, бедные верстальщики, связавшиеся с веб-дизайном! Они вынуждены только уповать на то, что текст сверстан так удачно, что посетитель сайта не захочет проводить все эти манипуляции. Третья особенность текстов на веб-страницах связана с ограниченностью средств форматирования, предоставляемых по умолчанию. Верстальщик-полиграфист использует богатый арсенал приемов и средств, нарабатывавшихся даже не годами, а веками. Он не зависит от многообразия устройств вывода, а просто верстает и спокойно готовит файлы к печати. Язык же HTML изначально разрабатывался скорее как разделяющий фрагменты текста логически, а не визуально. Это производители браузеров назначали тэгам визуальное оформление, чтобы заголовок внешне отличался от основного текста, а цитата — от образца кода. Следующие версии добавили разработчикам немного средств визуального форматирования: текст может быть полужирным, курсив- |
|
|
188 |
|
Тяжелое полиграфическое наследие |
3.3 |
|
Ным, подчеркнутым и перечеркнутым, раскрашенным в цвета радуги, крупным или мелким, сверстанным благодаря таблицам в несколько колонок; ссылкам можно стало назначать свои цвета. Семантическая ориентированность кода была непоправимо нарушена, но текст стал менее одноликим. Хорошие дизайнеры не злоупотребляли открывшимися возможностями, проявляя вкус, а плохие увечили вид текста и делали его совершенно нечитаемым. Пробираясь сквозь версии браузеров, на сцену вышел язык CSS: он дал намного больше средств форматирования текста, позволив почти не нарушать логику тэгов. Однако хорошая поддержка CSS есть только в современных браузерах, в старых она была реализована очень по-разному. С помощью средств CSS можно реализовать многие из полиграфических особенностей верстки: разные варианты кегля шрифта, стили подчеркивания, начертания, капители, разрядка текста (трекинг), интерлиньяж, разные отступы абзаца, в том числе и отступы красной строки (благодаря чему оформление абзацев можно максимально приблизить к книжному), буквица, разные типы выключки (влево, вправо, от центра, по ширине) и т. п. Не во всех браузерах это работает одинаково хорошо, но к последним версиям тексты можно верстать уже очень красиво, почти не затрагивая HTML. Однако ряд параметров текста остается за пределами правил HTML и CSS. Среди них: 1. Нестандартные типы выключки: по ширине с последней строкой, выключенной от центра или вправо (обычно при выключке, или выравнивании, по ширине последняя строка абзаца оказывается такой, как если бы она была выключена влево) и по формату (когда все строки выключены одинаково по ширине). 2. Нормальное выравнивание по ширине. Проблема в том, что при такой выключке между словами образуются не очень красивые пробелы разной ширины — переносов ведь нет, и нечему корректировать внешний вид абзаца. 3. Переносы. Их можно реализовать на веб-страницах, но это, во-первых, связано с ручной работой (расстановка спецсимволов — мягких переносов, о которых пойдет речь в следующей главе), а во-вторых, переносы даже в этом случае не будут работать в браузерах на основе Gecko и в Konqueror (браузер Safari, хотя и построен тоже на KHTML, отображает такие символы корректно: только в концах строк, причем сами символы переносов выносятся за правую вертикальную линию набора). Расставлять переносы можно также сценариями: пример такого сценария будет приведен в следующей главе. 4. Висячая пунктуация. Реализуется несколькими способами с помощью тэгов HTML и средств CSS, позволяет выносить за вер- |
|
Верстка |
|
|
Тикальную линию набора целые символы или просто визуально выравнивать вертикальную линию набора. 5. Кавычки и тире. С клавиатуры без дополнительных средств или со - четаний клавиш нельзя ввести правильные виды кавычек (вместо них употребляют знаки дюйма) и тире (вместо которого — дефис). Для полиграфических верстальщиков это никогда не было проблемой, для веб-верстальщиков часто этот факт почему-то встает непреодолимой стеной. В итоге правила для кавычек и тире в книгах одни, а на сайтах другие. То же можно сказать и о других спецсимволах. (Какие же они «спец-», если присутствуют в стандартных наборах символов большинства гарнитур?) 6. Кернинг пар. В основном таблицы шрифтов выглядят достаточно корректно, но в отдельных фрагментах текста то и дело хочется то сдвинуть поближе две буквы, то наоборот, сделать разрядку. Увы, без помощи <span> и стилевых указаний это не реализовать, а с дополнительными тэгами возрастает объем файлов. 7. Вертикальный текст и текст, повернутый на 90 градусов. С помощью фильтров в Internet Explorer это реализовать можно, но этот браузер — не единственный. 8. Автоматически повторяющийся текст. В программах верстки обычно это делается на страницах шаблонов, но в веб-дизайне такого понятия нет. Текст можно включать в стилевые описания параметром content в псевдоэлементах :before и :after, но это, в свою очередь, не будет работать в Internet Explorer. На помощь приходят серверные сценарии. 9. Колонки. Даже если использовать таблицы либо соседствующие блоки, то разбивка на колонки производится вручную. Штатных средств разбивки текста на равномерные колонки в языках разметки нет. Могут выручить только сценарии на стороне сервера или клиента, которые считают количество символов или слов и разбивают текст на относительно равномерные колонки: они должны быть выровнены не только по ширине, но и по высоте. Дело осложняется еще больше, если дизайнер решил сделать колонки разной ширины (например, 1 узкая и 2 широких). 10. Тонкие пробелы — они нужны для разделения знака и номера параграфа, числа и знака процента и промилле и других подобных случаев. В этом случае пробел не разделяет, а скорее объединяет. Спецсимволы для тонких пробелов (которые к тому же являются неразрывными) есть, но они не поддерживаются браузерами. Для отображения таких пробелов можно использовать <span>, которому стилями назначен меньший кегль и меньшее значение трекинга (пробел окажется меньше по размеру, что нам и нужно), но, так как даже неразрывный пробел, оформленный тэгами <span> </span>, перестает связывать |
|
|
190 |
|
Тяжелое полиграфическое наследие |
3.3 |
|
Соседние слова, всю конструкцию с тонким пробелом посреди нужно оформлять еще тэгами <nobr>...</nobr> — неоправданное увеличение объема кода. 11. Обтекание текстом непрямоугольных объектов отсутствует в браузерах. Даже если вставляется изображение в форматах GIF или PNG с прозрачными областями по краям, то обтекание текстом происходит по условной прямоугольной границе по периметру изображения. Реализовать можно только версткой вручную наложением частей текста на изображение — относительное или абсолютное позиционирование. Как видно, часть этих недостатков в браузерах можно компенсировать обходными средствами, что, правда, нарушает идеологию языков разметки и раздувает объем кода. Производители браузеров улучшают поддержку специальных символов, но этот процесс идет неравномерно и в разных браузерах по-разному. Например, в Opera 6 не отображался русский знак номера № — вместо него просто появлялся пустой прямоугольник. Уже в седьмой версии ошибка была исправлена. Мягкие переносы не отображаются в браузерах на основе Gecko и в Konqueror. Несмотря на то, что в Firefox включен модуль проверки орфографии в формах, алгоритма расстановки переносов там так и не появилось. Сомнительно также, чтобы в ближайшем будущем появилась поддержка тонких пробелов, колонок и визуального выравнивания вертикальной линии набора. Колонки — разговор особый. На веб-страницах они в полном понимании этого слова появляются очень редко. Это связано с тем, что текст на веб-страницах, как уже говорилось, весьма подвижный, так что такое ручное формирование соседних столбцов текста, чтобы при изменении размера страницы или кегля шрифта текст все равно оставался выровнен по верхнему и нижнему краям, достаточно сложно. В программах верстки при изменении размера колонок или кегля шрифта текст автоматически перетекает из колонки в колонку, пока не будет достигнуто выравнивание. Колонки отсутствуют в спецификациях CSS, а производители браузеров двигаются с сторону стандартов, закрывая глаза на бедность возможностей оформления текста на страницах, поэтому в ближайших версиях ожидать такого новшества не приходится. Тут есть еще один момент. Страница печатного издания всегда перед глазами, и двигаться по колонкам текста нетрудно. (Некоторые проблемы возникают, когда полоса газеты — большого формата, например, А2, а текст сверстан на всю высоту полосы.) Особенность веб-страниц в том, что они могут быть любой высоты. Посетитель страницы, прочитав одну колонку, должен будет промотать страницу вверх и снова начать чтение, вместо того, чтобы читать текст последовательно. Поэтому колонки на веб-страницах применяются в основном для независимых |
Блоков текста: в одной колонке средства навигации, в другой основной текст, в третьей дополнительная информация, и т. п.
Однако множество других параметров, присущих оформлению текста в хороших печатных изданиях, можно реализовать на веб-страницах. Ниже приводится краткий обзор принципов оформления текста.
Если сравнивать понятия верстки веб-страниц с полиграфической версткой, то окажется, что три основных тэга для фрагментов текста имеют прямые соответствия в верстке печатных изданий. Тэг <div> соответствует любому текстовому блоку на странице (в разных программах верстки они обычно называются фреймами и блоками текста), при этом он может объединять сколько угодно абзацев. Тэг <p> соответствует абзацу. Тэг <span> соответствует отрезку текста, меньшему, чем абзац. Первые два элемента являются блочными (block), третий — линейным (inline). Все три тэга не имеют семантики, они нужны для физического разделения текста.
Тэг <span> применяется для форматирования фрагментов текста, меньших, чем абзац, если форматирование отлично от форматирования остального текста этого абзаца. Например, некоторые слова в абзацах требуют пояснения и снабжаются параметром title, содержанием которого и будет пояснение к термину. Однако посетитель не всегда может быть настолько догадлив, чтобы поднести курсор мышки к непонятному слову с тем, чтобы прочитать пояснение. Такие термины нужно выделять. Чтобы каждый раз не указывать стилями или иными тегами форматирование слова, требующего подсказки, достаточно оформить нужное слово тэгом <span> с указанием нужного класса, а в стилевых описаниях назначить стиль. Пример (фрагмент кода страницы):
<style>
Span. term { border-bottom:1px dashed silver; cursor:help;
}
</style>
</head>
<body>
^>Часто для <span class="term" ^^є="Включєниє одного файла в другой на стороне сервера; после такого включения в браузер выдается не два файла, а один — результат сборки">серверных включений</span> применяется технология SSI, используемая в некоторых языках.</p>
В результате таких действий в тексте абзаца слова «серверных включений» будут выделены светло-серым прерывистым подчеркиванием, при наведении на эти слова курсор будет принимать вид стандартного курсора «помощи» (стрелка с вопросительным знаком), а рядом будет всплывать подсказка с расшифровкой термина (фраза «Включение одного файла в другой на стороне сервера; после такого включения в браузер выдается не два файла, а один — результат сборки»).
Тэг <p> — это тот тэг, без которого при правильной верстке не должен обходиться ни один текст. Даже если текст состоит из единственного абзаца, не следует забывать заключить этот абзац в нужные тэги: это связано с тем, что стиль отображения основного текста должен назначаться именно абзацу.
Для блока текста всегда нужно указывать какие-то физические параметры: высота, ширина, цвет и т. п., иначе его использование не имеет никакого смысла: если не требуется специфическое форматирование блока текста, то логичнее использовать абзацы.
|
Высота —14 pt Высота —14 рх Высота — 1 ет Высота —2 ех Высота— 100% |
Если в разных программах верстки одни параметры могут назначаться абзацам, а другие фрагментам текста, меньшим, чем абзац, то на веб-страницах различные параметры форматирования текста можно применять к разным элементам. Так, границу (как со всех сторон, так и только с одной) можно назначить не только блоку, но и абзацу, и даже фрагменту текста.
|
Без указания высоты Высота— 14 pt Высота — 14 рх Высота — 1 ет Высота — 2 ех Высота—100% |
Кегль — правильное наименование высоты шрифта. При верстке бумажных изданий чаще всего применяется только единица «пункт», далеко не всегда на экране соответствующая понятию «пиксель». У каждой гарнитуры разные пункты: так, высота букв, набранных гарнитурой «Arial» кеглем в 12 пунктов, больше, чем у букв, набранных гарнитурой «Times New Roman» кеглем в те же 12 пунктов. На веб-страницах используются не только пункты, но и пиксели (не рекомендуется), проценты (от стандартного размера шрифта), единицы em и ex (высота соответствующих букв данного шрифта), и иногда даже миллиметры. В старых версиях браузеров были значительные разночтения в определении кегля шрифта, но сейчас ситуация нормализовалась. Простые тесты (в браузерах Internet Explorer 6, Firefox 2, K-Meleon 1, Opera 9, 7 и 5, Netscape 8 — все под Windows — и Safari 2 под MacOS X; см. примеры справа) показывают, что в большинстве браузеров текст, набранный заданным кеглем, отображается почти одинаково.
Гарнитура — рисунок шрифта, то, что мы привыкли называть шрифтом. Все гарнитуры подразделяются на несколько типов: с засечками (Times, Georgia, Newton), без засечек (Arial, Tahoma, Verdana, Helios), моноширинные (Courier, TypeWriter), декоративные (Decor, Edwardian Script), символьные (Webdings, Wingdings). Использование нестандартных гарнитур на веб-страницах — одна из главных головных болей для веб-дизайнеров. Дело в том, что обычно с операционной системой пос-
Тавляется достаточно ограниченный набор шрифтов, который к тому же различается от системы к системе и от версии к версии. Браузер, разумеется, использует только те шрифты, что установлены в системе. Конечно, в систему можно установить дополнительные шрифты, но пользователи устанавливают только те наборы, которые им нравятся, а вкусы у всех разные. Поэтому веб-дизайнер может быть уверен только в том, что корректно отобразятся только те шрифты, которые установлены в системе по умолчанию. Чтобы пользоваться гарнитурами, выходящими за пределы этого списка, приходится прибегать к различным хитростям. Например, файлы шрифтов можно выложить на сервере, а их подгрузку на страницу инициировать конструкциями, подобными этой:
<span style="src:url(адрес шрифта); font-family: MyFont">Нестандартный шрифт</span>
Адрес шрифта — это путь к файлу шрифта на сервере, MyFont — это условное обозначение названия шрифта, который нужно будет включить в страницу. Нужно, однако, сказать, что такой способ работает корректно не во всех браузерах и не со всеми типами шрифтов. И веб-дизайнеры возвращаются к старому способу: имитации текста графикой. То есть подготавливается изображение, где нужной гарнитурой сделана надпись. Изображение включается в какой-либо текстовый блок (например, <h1>, поскольку нестандартные шрифты ассоциируются в основном с заголовками), в качестве альтернативного текста к изображению (alt="...") используется тот же текст, что и на изображении. В этом случае соблюдается логика тэгов, используется нужная гарнитура, а из соображений доступности альтернативный текст при отключенной графике повторяет текст заголовка. Можно пробовать еще массу вариантов, например, когда графика используется в качестве фона, а текст невидим, но все эти способы менее удобны.
Правда, вселяет добрые надежды тот факт, что с каждой новой версией операционной системы поставляется все больше шрифтов.
Цвет шрифта сейчас зависит только от вкуса дизайнера. Мониторы, отображавшие только 256 цветов, верно уходят в прошлое, и остались они не у тех, кто пользуется интернетом. Современные мониторы предоставляют свободу выбора примерно из 16 миллионов цветов — то есть из всей палитры RGB.
Насыщенность шрифта бывает разной степени, однако в современных браузерах поддерживаются только 2 степени: нормальная насыщенность (светлая) и полужирная (жирная) — normal и bold.
Начертание — понятие емкое, но в отношении к шрифту оно имеет следующие значения: прямое (normal) или курсивное (italic). В полиграфической верстке существует понятие наклонного начертания
|
Тяжелое полиграфическое наследие |
3.3 |
|
(oblique), которое используется для тех шрифтов, которые не имеют особого рисунка для курсивного начертания. Трекинг — расстояние между буквами в словах: разрядка или сжатие текста. Нормальный трекинг равен нулю; положительные значения символизируют разрядку текста, а отрицательные, наоборот, уменьшение межсимвольного расстояния. Интерлиньяж — расстояние между строками, а точнее — высота строки, высчитываемая вместе с пробелами. 100%-ный интерлиньяж наиболее оптимален; сейчас модно делать его увеличенным (130%, 150%), что создает иллюзию свободно сверстанного текста. Такое понятие, как выворотка, не снабжено отдельным параметром в языках разметки, но его легко реализовать, потому что любому отрезку текста можно задать свой цвет (color) и цвет фона (background - color), отличные от заданных по умолчанию. Выключка — термин, который неоправданно забыт и заменен более понятным «выравниванием». На веб-страницах поддерживаются только 4 из 7 возможных видов выключки: влево, вправо, от центра и по ширине. Отступы и втяжки на веб-страницах были немыслимы до реализации CSS в браузерах. С появлением нормальной поддержки таблиц стилей абзацы на сайтах могут полностью имитировать вид традиционных книжных абзацев (свойство text-indent с положительным значением делают отступы красной строки, а с отрицательным — выступы «наружу», но при этом во избежание неприятного эффекта «съедания» части текста следует всему абзацу назначать положительное значение свойства margin-left, по модулю равное отрицательному значению text-indent). Это основные понятия типографики. Большинство привычных по книгам эффектов верстки текста можно реализовать и на веб-страницах. Остальные важные приемы форматирования связаны с логической разметкой текста. В каждом тексте должно быть четкое разделение на заголовок и основной текст. Исключением может являться только главная страница сайта, которая иногда выполняет скорее функции обложки или титульного листа, контаминированного с содержанием, и то на ней часто присутствует заголовок (<h1>). Остальные уровни заголовков не могут считаться обязательными, поскольку являются ситуативно обусловленными. Внешний же вид заголовков никак не регламентируется: если браузеры по умолчанию отображают содержимое тэга <h1> крупным (20-24 пункта) полужирным (не во всех браузерах) текстом с сильными отступами сверху и снизу, то дизайнер может назначить какое угодно стилевое описание: сделать фон, сопровождающие линии, как угодно менять кегль, выбирать гарнитуру, менять начертание и насыщенность, использовать декоративные элементы оформления (например, подчер- |
Кивание и надчеркивание). То же касается и остальных уровней заголовков. Рекомендации, которые в этом случае можно сделать, сводятся к следующему: все уровни заголовков должны обладать общностью стиля, чтобы явно выделяться на фоне основного текста, а само форматирование любого заголовка в чем-то (гарнитуре, цвете, насыщенности или кегле) должно быть контрастным по отношению к основному тексту. Вот пример заголовка второго уровня на одном сайте:
|
] География поставок |
Популярность |
|
1 оборудования на сегодняшний день окватывает |
Десятки |
|
Регионов России, а таюке основные страны СНГ: Украину, |
|
|
1 Белоруссию, Казахстан. Наше предприятие неоднократно |
|
|
Выигрывало тендеры на поставку газового оборудования |
|
|
1 благодаря высокому качеству выпускаемой продукции, ее |
|
|
Соответствию современным требованиям, а так» |
:е приемлемым |
|
Ценам. |
|
|
1 В целях установления |
Открытость |
|
| постоянного сотрудничества го поставке газовог |
■0 оборудования |
|
Мы готовы предоставить любую информацию о н |
Іашем заводе |
|
И выпускаемой продукции, необходимую ДЛЯ г" |
"'"ивования, |
Такой стиль заголовков называется «в оборку» — заголовок врезается в текст, но выделяется с помощью стилевых указаний.
H2 { float:right; width:190px; text-align:right; color:#BF0C0C; font-size:110%; font-weight:bold; padding-left:5px; padding-bottom:3px; margin-top:-8px; border-left:3px solid #BF0C0C; border-bottom:1px solid #BF0C0C;
}
Заголовки, набранные декоративными шрифтами, часто исполняются в виде графических вставок:
|
Ваш e-mail | |
|
|
Тема письма | |
|
|
Текст письма |
А |
|
J |
Браузер предоставляет (помимо всего прочего) систему оформления текста по умолчанию. То есть достаточно оформить текст семантически, разметив его необходимыми тэгами, как браузер сделает за вас половину работы, то есть отформатирует логически разные отрезки текста по-разному, отобьет друг от друга абзацы, выделит заголовки и цитаты, код и прочие элементы. Но в большинстве случаев «настроек по умолчанию» оказывается недостаточным. У каждого сайта есть свой стиль, свои «фирменные» цвета, с которыми синие подчеркнутые ссылки и громадные заголовки не всегда гармонируют. В качестве примера приведем результаты выполнения одного и того же HTML-кода:
Слева — список ссылок, справа — строка меню, элементы которой меняют цвет фона и шрифта и становятся подчеркнутыми при наведении. Только слева — результат выполнения кода без стилевых указаний, а справа — с подключением CSS. Код примера на HTML и CSS можно найти в главе «Техминимум: как сейчас принято» данной части книги.
Заголовки и подзаголовки, абзацы, списки, цитаты, таблицы, ссылки, легенды, элементы форм, логические блоки и фрагменты текста, изображения и другие элементы — их вид в современных браузерах легко поменять до неузнаваемости с помощью каскадных таблиц стилей, при этом сам HTML-код остается таким же лаконичным и строгим, каким он был в эпоху браузера Mosaic.
