[Перевод] Как всегда, (почти) во всём виноват Internet Explorer: древности и артефакты в HTML

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

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

X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

В эру, когда браузеры быстро менялись, а поведение часто зависело от конкретной версии, считалось необходимым сообщать о совместимости с версиями браузеров при помощи метатега X-UA-Compatible. В примере выше атрибут контента равен IE=edge: это означает, что целевым выбран наивысший поддерживаемый режим документа в Internet Explorer (IE).

Как указано в документации, кроме edge есть и другие значения. В атрибуте можно указать значение от 5 до 11, соответствующее версии Internet Explorer, или с EmulateIE7 по EmulateIE11 для входа в режим этих версий, но только в случае объявления валидного DOCTYPE; в противном случае нужно откатиться в режим совместимости.

<meta http-equiv="X-UA-Compatible" content="chrome=1">

До того, как рынок захватил Chrome, компания Google выпустила плагин для Internet Explorer под названием Google Chrome Frame. Он устанавливался в Internet Explorer с версии 6 по 9 и в случае указания тега рендерил веб-сайты при помощи модифицированного движка WebKit Chrome вместо движка Trident Internet Explorer.

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">

requiresActiveX использовался, чтобы сообщить Internet Explorer 10 о необходимости переключения в режим рабочего стола в режиме Metro, который не поддерживал плагины.

Координаты ICBM

<meta name="ICBM" content="-31.9548, 115.8602">

В жаргоне ICBM (intercontinental ballistic missile, «межконтинентальная баллистическая ракета») — это географическое местоположение человека, использовавшееся ещё во времена Usenet. Этот метатег использовался для идентификации местоположения темы веб-сайта; на него ссылался сервис GeoURL, создававший схему сайтов на земном шаре, помогая людям находить географически близкие им сайты.

Условные комментарии

<!--[if gte IE 6]>
	<p>Only shown in Internet Explorer 6 and higher.</p>
<![endif]-->

В эпоху регулярных изменений веб-браузеров и полномасштабных браузерных войн иногда бывало важно подстроить сайт под конкретный браузер или его версию. Microsoft реализовала это в Internet Explorer при помощи специально форматируемых комментариев, пример которых показан выше. Эти условные комментарии, или «condcoms», можно было писать и уточнять при помощи различных операторов:

<!--&{navigator.appName == 'Netscape'};
	<p>Only shown in Netscape.</p>
-->

<!--&{navigator.platform == 'win95'};
    <p>Only shown in Netscape on Windows 95.</p>
-->

У Netscape имелся собственный способ обработки условных комментариев при помощи сущностей JavaScript, которые следовали за открывающим тегом комментария. В случае результата true комментарий добавлялся. В случае false он оставался просто комментарием. Другие браузеры всегда обрабатывали такую разметку, как обычный комментарий.

Microsoft Smart Tags

<meta name="MSSmartTagsPreventParsing" content="TRUE">

Smart Tags — это система, с которой Microsoft экспериментировала в бета-версиях Internet Explorer 6. Она должна была автоматически инъецировать в страницы гиперссылки¹. В качестве примера полезности Microsoft приводила такой: «Smart Tag может обнаруживать в вебе названия крупных компаний и добавлять ссылки на них, позволяя пользователям получать доступ к курсу их акций и информации о компании». Владельцы сайтов были в гневе, поэтому был добавлен метатег MSSmartTagsPreventParsing, позволявший отключить эту фичу. Она не добралась до полного релиза Internet Explorer, однако была реализована в Microsoft Word.

^{1. Google попробовала реализовать нечто очень похожее в конце 2024 года при помощи фичи «Page Annotations» в приложении Google для iOS. Пользователей она бесила, и в марте 2025 года её внедрение было прекращено.}

PICS

<meta
	http-equiv="PICS-Label"
	content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
           until "1995.12.31T23:59-0000"
           for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
'
>

В середине 90-х World Wide Web Consortium (W3C) попытался создать набор технических спецификаций для разметки Интернет-контента под названием Platform for Internet Content Selection (PICS). PICS был внедрён во многие приложения для фильтрации, а также в Internet Explorer версии 3. Для разметки страницы можно было добавить на неё показанный выше метатег.

Как и можно было предположить, многие владельцы сайтов просто обманывали и неправильно указывали категории своих сайтов. Большинство же просто так и не добавляло эти теги. За PICS последовал Protocol for Web Description Resources (POWDER), но и он не справился со своей задачей. От PICS практически полностью отказались к 2003 году.

Переходы между страницами

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2.0,Transition=12)">

Аналогично тому, как в приложениях для создания презентаций наподобие Microsoft PowerPoint и Apple Keynote можно настраивать переходы, Internet Explorer с версии 4 по версию 8 поддерживал показанные выше теги эффектов стилей переходов. Эта фича официально добралась до веб-платформы только после внедрения View Transition API. Веб-разработчик Bramus портировал переходы Internet Explorer на новый View Transition API.

Взломщик фреймов

<meta http-equiv="Window-target" content="_top">

Этот нестандартный метатег, появившийся в Netscape Navigator в середине 90-х и постепенно добравшийся до Internet Explorer и других браузеров, заставлял страницу высвободиться с родительской страницы, если она загружалась во фрейме, и открыться в виде отдельного окна браузера. Обычно им пользовались веб-разработчики, чтобы их страницы не встраивали во фреймы на других сайтах. _top у Window-target указывает, что страница должна загружаться в окне верхнего уровня. Сегодня для предотвращения встраивания страниц используют заголовки безопасности.

Транскодинг страниц Baidu

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-siteapp,no-transform">

В Baidu Browser (百度浏览器, bǎi dù liú lǎn qì) присутствовала фича «транскодинга» страниц на мобильных, которая была крайне непопулярной. Веб-сайты маршрутизировались через transcoder.baidu.com и модифицировались. Фича меняла их структуру, вырезала стили, сжимала изображения, удаляла брендинг и рекламу, вставляя при этом рекламу Baidu Union (百度联盟, bǎi dù lián méng). Это сильно калечило сайты. Один из показанных выше тегов можно было добавлять на сайты с 2012 по to 2018 год, чтобы отказаться от такого транскодинга.

Skype Toolbar

<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

Для Internet Explorer, Chrome и Firefox существовал аддон «Skype Toolbar» (позже «Skype Click to Call»). С середины 2000-х до середины 2010-х он автоматически устанавливался вместе со Skype, пытался распознавать на страницах телефонные номера и отображать нажимаемый значок. Этот значок позволял совершить вызов через Skype, добавить номер в адресную книгу Skype, а также пользоваться другими функциями, связанными со Skype. При вставке значка аддон часто ломал страницы, поэтому разработчики добавляли этот тег для отключения его на своих сайтах.

В Firefox аддон был настолько нестабильным, что Mozilla заблокировала его в 2011 году.

Image Toolbar

<meta http-equiv="imagetoolbar" content="no">

В Internet Explorer 6 появилась панель Image Toolbar, которая отображалась над изображениями; в ней находились кнопки, например, для сохранения или отправки изображения. Естественно, разработчиков бесило такое вмешательство в их сайты, которое можно было отключить при помощи метатега.

ClearType

<meta http-equiv="cleartype" content="on">

ClearType — это система Microsoft для повышения читаемости типографики. Этот тег можно было добавлять на страницы для улучшения типографики на устройствах с низким разрешением, в частности, на тех, где был установлен Pocket Internet Explorer / Internet Explorer Mobile.

Краулинг AJAX

<meta name="fragment" content="!">

Раньше при краулинге страниц пауки Google не исполняли JavaScript, поэтому сайты с AJAX-контентом не индексировались. Этот метатег говорил краулеру Google, что нужно запросить страницу с параметром запроса _escaped_fragment_, который должен был возвращать HTML-версию содержимого страницы. Google начала рекомендовать такое решение в 2009 году и прекратила советовать так поступать в 2015 году.

Каталоги

<meta name="robots" content="noodp, noydir">

Веб-каталоги (web directory) были очень популярным способом поиска контента в Интернете. Самыми популярными каталогами были Yahoo Directory и DMoz (названный по своему URL directory.mozilla.org). Каталоги иногда писали собственные заголовки и описания сайтов, которые использовали некоторые поисковые движки. Чтобы сообщить поисковым движкам, что нужно использовать метаданные со страницы, а не из каталогов, разработчики добавляли этот метатег. Сегодня обоих каталогов уже не существует, поэтому эта разметка неактуальна.

Web App Name

<meta name="application-name" content="App Title">

До распространения Progressive Web App (PWA) разные реализации веб-приложений в разных браузерах использовали application-name. Если этот тег отсутствовал, системы обычно брали название из <title>.

Закреплённые сайты Internet Explorer

<meta name="msapplication-tooltip" content="Visit our site!">
<meta name="msapplication-starturl" content="./">
<meta name="msapplication-window" content="width=1024;height=768">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-task" content="name=Blog;action-uri=/blog;icon-uri=/favicon.ico">

В Internet Explorer версии 9 и выше в Windows 7 существовала функция закрепления сайтов на панели задач. При закреплении сайты отображали свои функции на уровне операционной системы и браузера, почти как современные прогрессивные веб-приложения. msapplication-tooltip — это текст, отображаемый при наведении на значок сайта, msapplication-starturl задавал корневой URL закреплённого сайта, msapplication-window устанавливал исходный размер окна закреплённого сайта при открытии (с минимальной шириной 800px и высотой 600px), msapplication-navbutton-color задавал цвет для кнопок навигации «назад» и «вперёд» интерфейса браузера, а msapplication-task позволял определять быстрые действия, получить к которым доступ можно было, нажав второй клавишей мыши на закреплённом в панели задач сайте. Например, это могла быть быстрая ссылка на страницу блога.

Microsoft Web Apps

<meta name="msapplication-TileColor" content="#FF3300">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="/images/small-tile.png">
<meta name="msapplication-square150x150logo" content="/images/medium-tile.png">
<meta name="msapplication-wide310x150logo" content="/images/wide-tile.png">
<meta name="msapplication-square310x310logo" content="/images/large-tile.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Аналогично функциональности закрепления сайтов, эти значения использовались для отображения. msapplication-TileColor, msapplication-TileImage и теги с атрибутами вида msapplication-square* и msapplication-wide* применялись для настройки тем плиток разных версий Windows, в том числе UI рабочего стола, Metro UI и Windows Mobile.

<meta name="msapplication-badge" value="frequency=360;polling-uri=https://contoso.com/BadgeUpdate.aspx">

С помощью msapplication-badge указывался веб-адрес, с которого запрашивались уведомления, отображаемые на Live Tile сайта.

Закреплённые сайты Chrome

<meta name="application-url" content="https://vale.rocks">

У Google Chrome имелись функции закрепления веб-приложений; в application-url указывался их начальный URL.

Закреплённые сайты Safari

<link rel="mask-icon" href="icon.svg" color="green">

Закреплённые сайты/вкладки в Safari позволяли «пользователям оставлять любимые веб-сайты открытыми, запущенными и легкодоступными». Наряду с цветом значка для закреплённой вкладки можно было задать SVG-значок.

CRX-less Web Apps

<link rel="chrome-application-definition" href="application_definition.json">

CRX-less Web Apps — это приложения Google Chrome, позволявшие использовать онлайн-манифест для описания развёрнутого приложения. Метатег ссылается на файл JSON с манифестом:

{
	"name": "Application",
	"description": "Description describing the app.",
	"launch_url": "index.html",
	"launch_container": "panel",
	"icons": {
		"128": "128.png"
	},
	"permissions": ["notifications"]
}

Такие CRX-less apps можно распространять в Chrome Web Store одним только JSON-манифестом и значком, без необходимости полного формата .crx, который использует Chrome для расширений. Этот тип приложений позже переименовали в Chrome Apps; сейчас их поддержка сворачивается.

Веб-приложения iOS

<link rel="apple-touch-icon" href="/custom_icon.png">
<link rel="apple-touch-startup-image" href="/splash.png">
<meta name="apple-mobile-web-app-title" content="App Name">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Чтобы позволить владельцам сайтов настраивать поведение веб-сайтов при добавлении на главный экран в iOS, Apple реализовала эти метатеги. Назначение icon, startup image и title понятно без объяснений; apple-mobile-web-app-capable отключал отображение интерфейса браузера, а apple-mobile-web-app-status-bar-style позволял присваивать панели состояния операционной системы одно из трёх значений:

• default — белый фон с чёрным текстом и значками.

• black — чёрный фон с чёрным текстом и значками.

• black-translucent — фоновый цвет берётся из цвета фона веб-страницы с белым текстом и значками.

Теперь эти метатеги устарели из-за современных определений PWA.

<meta name="apple-touch-fullscreen" content="yes">

apple-touch-fullscreen использовался в ранних демо iOS 2, однако в документации Apple отражён только apple-mobile-web-app-capable. Из-за присутствия в этих ранних демо apple-touch-fullscreen стал популярным до выпуска фичи; вероятно, это заставило Apple сделать его алиасом apple-mobile-web-app-capable.

UC Browser и QQ Browser

<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">

UC Browser и QQ Browser были особенно популярны в Азии с начала по середину 2010-х благодаря сильной экономии данных и оптимизации под дешёвые устройства. UC Browser использовал screen-orientation для переключения в определённое расположение и full-screen для сокрытия интерфейса браузера. QQ Browser поступал так же, только при помощи тегов x5-orientation и x5-fullscreen. «X5» в именах этих метатегов означают браузерный движок X5 Tencent. Эти метатеги больше не требуются из-за стандартных API для работы с полным экраном и ориентацией, а также из-за популяризации более мощных браузеров.

Оптимизация под КПК

<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">

До распространения <meta name="viewport" content="width=device-width">, позволяющего сайтам чётко масштабироваться под маленькие экраны, для мобильного контента широко применялись эти теги. HandheldFriendly был создан для AvantGo, а затем распространился на Blackberry Browser, а MobileOptimized разработала Microsoft для старых версий Windows Mobile.

Internet Explorer Tap Highlight

<meta name="msapplication-tap-highlight" content="no">

Этот тег препятствовал подсвечиванию ссылок при касании в Internet Explorer 11. Он был похож на -webkit-tap-highlight-color, однако в отличие от этого свойства, он был двоичным и не позволял менять цвет.

Revisit-After

<meta name="revisit-after" content="7 days">

У веб-сайта Vancouver Webpages имелся небольшая региональная поисковая система searchBC (BC обозначает «British Columbia»), которая использовала этот тег, чтобы определять, с какой частотой следует выполнять периодический скрейпинг сайта. Однако это был единственный известный пример использования тега. Нет никаких свидетельств того, что им пользовался какой-либо крупный поисковый движок, в том числе и Google. Тем не менее, вокруг него образовался некий SEO-миф, распространившийся по вебу.

Пререндеринг страниц

<link rel="prerender" href="https://example.com">

Этот не имевший спецификации тег полностью поддерживался в Chrome только в версиях с 13 по 62; он загружал и обрабатывал страницу, чтобы она была готова, когда пользователь перейдёт к ней. Эту функциональность заменил Speculation Rules API.

Версия Accelerated Mobile Pages

<link rel="amphtml" href="https://example.com/amp.html">

Accelerated Mobile Pages (AMP) — это реструктурированные версии страниц, оптимизированные для ускорения загрузки контента. Этот тег применялся для указания ссылки на AMP-версию страницы, однако Accelerated Mobile Pages перестали широко применяться, а Google больше их не продвигает, поэтому тег перестал быть нужным.

Роль области Footer в Safari

<footer role="contentinfo"></footer>

До Safari 13 роль области contentinfo некорректно предоставлялась VoiceOver, что представляло собой серьёзную проблему accessibility. Для её решения разработчики в явном виде указывали role в подвале страницы.

Режим чтения Internet Explorer

<meta name="IE_RM_OFF" content="true">

В Internet Explorer 9 появился «Режим чтения» (Reading View). Нажав на кнопку, появляющуюся в интерфейсе браузера, можно было получить упрощённую версию страницы, удобную для чтения. Страницы могли отказываться от появления этой кнопки при помощи данного метатега.

FrontPage

<!--webbot bot="Timestamp" s-type="EDITED" s-format="%B %d, %Y" startspan -->
<!--webbot bot="Timestamp" i-checksum="54321" endspan -->

<!--webbot bot="TableOfContents" s-component-title="Site Map" s-starting-point="index.htm" s-heading-level="3" startspan -->
<!--webbot bot="TableOfContents" endspan -->

<!--webbot bot="HitCounter" u-custom i-digits="6" startspan -->
<!--webbot bot="HitCounter" endspan -->

<!--webbot bot="PurpleText" preview="TODO: Replace product prices before launching sale page." startspan -->
<!--webbot bot="PurpleText" endspan -->

Microsoft FrontPage — это старый WYSIWYG-инструмент для создания веб-сайтов. Наряду с другим кодом, он инъецировал WebBot Components наподобие показанных выше. Это комментарии с разметкой, поэтому они не отображались на самой странице, но обрабатывались FrontPage Server Extensions (FPSE) и использовались в редакторе FrontPage. Существовало множество таких WebBot Components, а разработчики могли создавать собственные при помощи SDK FrontPage.

Really Simple Discovery

<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

Really Simple Discovery (RSD) была системой отображения клиентам сервисов управления блогами. Ссылка в head направляла клиентов к XML-документу, содержащему конечные точки, к которым могли подключаться инструменты наподобие Windows Live Writer, BlogJet и MarsEdit. Её реализовали на нескольких платформах, в том числе WordPress, Blogger, LiveJournal, TypePad и MediaWiki. Из-за современных систем публикаций RSD потеряла свою актуальность.

Пингбеки

<link rel="pingback" href="https://example.com/xmlrpc.php">

Пингбеки — это система, при помощи которой сайты уведомляли другие сайты, когда ссылались на них. Получивший «пинг» сайт проверял наличие ссылки на сайте, отправившем «пинг», а затем создавал примечание вида «[Веб-сайт] сослался на эту страницу». Они работали примерно так же, как современные WebMentions.

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

Share Partners

<link rel="image_src" href="https://example.com/post/image.png">
<link rel="audio_src" href="https://example.com/post/audio.mp4">
<link rel="video_src" href="https://example.com/post/video.mp4">

До создания компанией Facebook Open Graph у неё имелась система «Share Partners» для определения метаданных, используемых в embed. Многие другие сайты, например, Digg, тоже внедрили эту систему в качестве своеобразного стандарта и реализовали теги.

rel="image_src" ссылался на встраиваемое изображение, rel="audio_src" — на встраиваемое аудио, rel="video_src" — на видео. Существовало множество других метатегов, поддерживаемых в разной степени.

Twitter Embeds

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@account">
<meta name="twitter:creator" content="@writer_account">
<meta name="twitter:url" content="https://example.com/posts/hello-world">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/hello-world-embed-image.png">
<meta name="twitter:image:alt" content="Alternative text for the image.">

Эти метатеги (и некоторые другие, применявшиеся реже) использовались в Twitter для генерации embed ссылок. Однако документация и валидатор карточек уже недоступны (раньше они находились по адресам https://dev.twitter.com/cards/getting-started и https://cards-dev.twitter.com/validator). X вернулся к широко используемым метатегам Open Graph, из-за чего специфичные для Twitter объявления в основном стали бесполезны. Их следует заменять на страницах на теги Open Graph.

<meta name="twitter:dnt" content="on">

Кроме того, у Twitter имелся метатег Do Not Track для отказа от слежения при использовании виджетов Twitter for Websites. Документация по нему (ранее находившаяся по адресу https://dev.twitter.com/web/overview/privacy) тоже теперь недоступна, а сам тег, похоже, больше не учитывается.

В моей статье перечислены не все артефакты, а только самые популярные или примечательные нестандартные фичи. В киберпространстве существует ещё множество других забытых древностей. Если вам любопытно, некоторые другие метатеги перечислены, хоть и без подробностей, в WhatWG Wiki. Кроме того, существует очень длинный список подобных реликтов CSS из релизов браузеров прошлого.