SimpleIsm

舞台裏は乱雑に、見えるところはシンプルに。

HTML 4.01最(再)小化

Posted on by Yoruaki

以前終了タグが省略可能な要素という記事を書いたことがあるのだけど(5年前…)、もっと省略した書き方を当時教えてもらったのだけど忘れてしまったので、もう一度調べながら書いてみた。

確かSGML宣言をすることでもっと省略できるとかだったので、上記を参考に調べてみると、HTML4におけるSGML宣言ではOMITTAGとSHORTTAGが両方YESなので、タグと属性名の省略が可能で、タグそのものを圧縮して書くこともできる。(…で合ってる？)

ということで以下のHTMLを省略してみた。

元のHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>HTML 4.01 Omissible & Minimized Elements Example</title>
    </head>
    <body>
        <h1>HTML 4.01 Omissible & Minimized Elements Example</h1>
        <p>Sample text 1</p>
        <p>Sample text 2</p>
        <p>Sample text 3</p>
        <ul>
            <li>Sample list 1</li>
            <li>Sample list 2</li>
            <li>Sample list 3</li>
        </ul>
        <table>
            <tr>
                <td>Sample table 1</td>
                <td>Sample table 2</td>
                <td>Sample table 3</td>
            </tr>
            <tr>
                <td>Sample table 4</td>
                <td>Sample table 5</td>
                <td>Sample table 6</td>
            </tr>
        </table>
        <p><a href="http://validator.w3.org/check/referer">Validator</a></p>
    </body>
</html>

省略したHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv=content-type content="text/html;charset=utf-8"
<title/HTML 4.01 Omissible & Minimized Elements Example/
<h1/HTML 4.01 Omissible & Minimized Elements Example/
<p>Sample text 1
<>Sample text 2
<>Sample text 3
<ul/
    <li>Sample list 1
    <>Sample list 2
    <>Sample list 3
/
<table/
    <tr
        <td>Sample table 1
        <>Sample table 2
        <>Sample table 3
    <tr
        <td>Sample table 4
        <>Sample table 5
        <>Sample table 6
/
<p><a href=http://validator.w3.org/check/referer>Validator

View Demo: HTML 4.01 Omissible & Minimized Elements Example

警告出まくりだけど、ちゃんとValid HTMLとなる。まともに表示されないけど。実はあまり理解できなくてちょこちょこ修正しながらValidatorかけてたのは内緒。

タグの省略について

SGML宣言して省略して遊んでたときに見つけた記事(これ見つけたから今回の記事書こうと思った)。html要素とかbody要素は省略して書くべきとのこと。パフォーマンスのために省略すべきということなら、正直Googleぐらいでかいサイトならいざ知らず、個人サイトとか中規模程度の企業サイトなら「そこじゃなくね？」とか思う。もっと他にできることあるだろうと。

IE6とかJSとかそこそこ弊害もあるし、「すべき」としてしまうのはちょっと強引かなぁと思ったのだけど、それについてはコメントで結構突っ込まれてた。

あ、でも何か一貫したポリシーの元で行う(社内のコーディングガイドラインに従うとか)ならアリだと思う。

追記

@yoruaki 「HTML 4.01最(再)小化」の記事拝見しました。最後のa要素ですが、文法的には問題ありませんがこういう風に解釈されないでしょうか? <a href=”http:”></a>http://validator.w3.org/check/referer >Validator

Twitter / SaekiTominaga: @yoruaki 「HTML …

拝見＆ご指摘ありがとうございます。その部分について、Validatorの警告を見てみます。

<p><a href=http://validator.w3.org/check/referer>Validator

For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the “/” character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible “self-closing” tag, then you need to use XHTML or HTML5.

This warning and related errors may also be caused by an unquoted attribute value containing one or more “/”. Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.

[Valid] Markup Validation of http://simpleism.net/misc/test/004.html – W3C Markup Validator

「このドキュメントでは、バリデータは従来のルールに従うと、<FOO />のように解釈し、紛らわしい警告やエラーメッセージを引き起こし、著者の期待を裏切ります。この解釈はHTML4や他のSGMLベースのHTML文書によって起こされます。このメッセージを回避するには、単純に”/”を削除すればOKです。ただし(“NB:” = “Nota Bane / 注意せよ”)、<FOO />を空要素タグとして解釈させたい場合は、XHTMLやHTML5を使用する必要があります。

この警告及び関連するエラーは、引用符で囲まれていない1つ、もしくは複数の”/”を含む属性値によって引き起こされます。 例: <a href=http://w3c.org<W3C</a> 解決策としては、値を引用符で囲むことです。」

こんなところですかね。もう警告文が複雑でいざ訳して文章にすると大変ですね…。

というわけで、上記の警告のように<a href />と解釈されるならば、仰るとおり<a href="http:"</a>http://validator.w3.org/check/referer>Validatorという風に解釈されると思います。

まぁそう解釈される可能性もあるよ、という警告なので(他にも16個も警告が…ｗ)、ネタとして見ていただければと思います。省略して書くために、調べたりなどの工数が3倍ぐらいかかるというなんとも非効率な書き方です…。