マークアップのないウェブページ

HTMLが一切無い魔法のようなウェブページ

世の中には一切HTMLのない、一切マークアップのないウェブページがあります。如何にして、そんな事を実現しているのか。そのアイデアを紹介します。

真っ白なソース、その隠し味

https://mathiasbynens.be/demo/css-without-html

こちらが、マークアップのないウェブページです。

マークアップのないウェブページ

やあ!僕のソースコードを見てみて 🙂

と書いてありますね。そして実際に確認するとソースコードは真っ白!そうです、一切マークアップされていないのです。headもbodyも、一文字もありません。

このカラクリの秘密はHTTPヘッダーにあります。

Link in HTTP-Header

src

この画像はHTTPヘッダーを表示したものです。そしてここで重要なのはLink: <css-without-html.css>;rel=stylesheetです。お気づきかと思いますが、これは、Link:ヘッダーを使ってスタイルシートを指定しているのです。

「え、スタイルシートってHTML内の<link rel=”stylesheet”>でしか指定できないじゃないの?」と思った人もいるかもしれませんが、HTML以外にも<link href=””>を利用できるようにLink:(リンクヘッダー)というものが定められています。機能としてはほぼ<link href=”” rel=””>と同じような役割で、例えば、pdfファイルにLinkヘッダーを使ってHTMLバージョンのurl情報を示したり、画像ファイルにライセンス情報やcanonicalなurlを示したりが可能なわけです。(Googleもサポートしています)

省略された<html>と<body>

htmlのイメージ

見えないところでスタイルシートを読み込んでいることがわかったわけですが、HTMLソースには一切エレメントがありません。このスタイルシートは一体何をスタイリングしているのでしょうか。cssを見てみましょう

なんと!html{}やbody{}があります。そしてbody::aftercontentには

O HAI! Have a look at my source code 🙂

もあります。すなわち、ブラウザ上では<html>も<body>も存在することになっているのです。コイツらは一体どこからやってきたのでしょうか。

実はhtmlもbodyもブラウザが自動的に創りだしたものなんです。そうなんです、実は<body>や<head>、<html>でさえも省略することが許されているのです。このページがvalidなhtmlといえるのかどうか怪しいところですが、条件さえクリアすれば仕様上タグの省略は問題ないのです。省略されたheadやbodyなどのタグはブラウザが補完してくれます。勝手に作ってくれるので!!(document.head || document.body)trueです。

GoogleのHTMLスタイルガイドには数バイトのパフォーマンスのために、省略出来るタグは省略せよ、という記述もあります。頭おかしいですね 😉

画して無から有が生まれた

種を明かせば、コンテンツをcssに隠し、cssをレスポンスヘッダーに隠し、マークアップを省略してと、まあ、よくやるもんです。まったく実用性はないですが、アイデアとしては面白いですね。

photo:Erick Dimas

ブランクスペース 😉