Устаревшие HTML-фрагменты и артефакты

X-UA-Compatible

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

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

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

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

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

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

Значение requiresActiveX использовалось для переключения Internet Explorer 10 из режима Metro в классический режим рабочего стола, так как 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 через специально отформатированные комментарии, как показано в примере. Для уточнения условия можно было использовать несколько операторов:

<!--&{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, которая автоматически внедряла гиперссылки в страницы. Например, система могла обнаружить названия крупных компаний и автоматически сделать их кликабельными ссылками на информацию о компании и котировки акций. Владельцы сайтов были возмущены, и появился мета-тег MSSmartTagsPreventParsing для отказа от этого функционала. Microsoft позже полностью удалила эту возможность.

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-х W3C попыталась создать технический стандарт для маркировки интернет-контента — Platform for Internet Content Selection (PICS). Эту систему встроили в множество фильтрующих продуктов и в Internet Explorer начиная с версии 3. Мета-тег позволял сайтам самостоятельно маркировать свой контент.

Неудивительно, что многие владельцы сайтов просто лгали и неправильно классифицировали свои проекты. Другие попросту игнорировали теги. Protocol for Web Description Resources (POWDER) пришла на смену PICS, но оказалась такой же безуспешной. 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)">

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

Frame Buster

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

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

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

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

Браузер Baidu включал функцию 'транскодирования' страниц на мобильных устройствах, которая была крайне непопулярна. Сайты маршрутизировались через transcoder.baidu.com и модифицировались: макеты перестраивались, стили удалялись, изображения сжимались, логотипы удалялись, а исходная реклама заменялась на объявления Baidu Union. Это сильно нарушало работу сайтов. С 2012 по 2018 год владельцы добавляли эти теги, чтобы отказаться от такого транскодирования.

Skype Toolbar

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

Расширение 'Skype Toolbar' (позже переименованное в 'Skype Click to Call') было доступно для Internet Explorer, Chrome и Firefox с середины 2000-х до середины 2010-х годов. Оно устанавливалось вместе с 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 Crawling

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

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

Веб-каталоги

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

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

Имя веб-приложения

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

application-name использовался различными реализациями веб-приложений в разных браузерах до стандартизации Progressive Web Apps (PWA). При отсутствии этого тега системы обычно использовали значение из <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 устанавливал начальный размер окна (минимум 800×600 px), msapplication-navbutton-color устанавливал цвет кнопок навигации браузера, а msapplication-task определял быстрые действия, доступные при клике правой кнопкой на закреплённом сайте.

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

<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">

Аналогично функционалу Pinned Sites, эти значения использовались для визуального оформления. msapplication-TileColor, msapplication-TileImage и различные теги с msapplication-square* и msapplication-wide* устанавливали тему плиток для разных версий Windows, включая классический интерфейс, 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">

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

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

<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"]
}

Такие приложения можно было распространять в Chrome Web Store только с JSON-манифестом и значком, без необходимости в полном формате .crx, используемом для расширений. Позже этот тип приложения был переименован на '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 ввела вышеуказанные мета-теги. Значок, экран загрузки и заголовок понятны сами по себе, 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 полноэкранности и ориентации, а также распространению более функциональных браузеров.

Оптимизация для PDA

<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

<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-версию страницы, однако AMP больше не используется широко, и Google больше не продвигает эту технологию, делая тег ненужным.

Reading View в 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. Существовало множество таких компонентов, и разработчики могли создавать свои собственные, используя FrontPage SDK.

Really Simple Discovery

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

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

Pingbacks

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

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

К сожалению, pingbacks быстро стали каналом для спама и манипуляций 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' для определения метаданных для встраивания. Множество других сайтов приняли её как de facto стандарт и реализовали теги. Например, 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 при создании встраивания ссылок. Однако документация и валидатор карточек больше не доступны (ранее на https://dev.twitter.com/cards/getting-started и https://cards-dev.twitter.com/validator соответственно). X откатывается на широко признанные Open Graph мета-теги, делая Twitter-специфичные объявления в значительной степени бесполезными. Их следует заменить на Open Graph теги. Кроме того, их следует удалить, потому что X — ужасный сайт с плохой модерацией, принадлежащий человеку, который публично исполнил нацистское приветствие и напрямую способствовал подъёму фашизма в США и во всём мире, среди прочих ужасов.

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

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

Заключение

Эта статья не является исчерпывающей. Здесь представлены только более популярные или примечательные нестандартные фрагменты. На просторах интернета гораздо больше малоизвестных кусочков. Любопытному читателю стоит посмотреть WhatWG Wiki, где без подробностей перечислены ещё некоторые.