• 画像表示系の JavaScript で Web 標準に準拠した (妥当な) HTML を記述するには

    img 要素を出力する画像表示系の JavaScript を利用する際に、Web 標準に準拠した (妥当な) HTML 文書となるような記述の仕方について述べる。

    ※ このページでは複数の画像をアニメーション GIF のように連続表示する AnimateImage スクリプトを例に説明する。

    ※ 対象とする HTML の文書型 (DOCTYPE) は次の通り。

    • HTML 4.01 (Strict, Transitional, Frameset)
    • XHTML 1.0 (Strict, Transitional, Frameset)
    • XHTML 1.1
    • HTML5

    img 要素を出力するスクリプトを利用する上で、Web 標準に準拠した HTML を記述するためにポイントとなるのは次の 3 つ。

    • img 要素の alt 属性は必須
      • 画像の代替テキストが不要な場合は空文字列 (img@alt=””) を指定する
      • HTML5 では特定の条件を満たせば省略できる (詳細)
    • (body 要素内の) script 要素はインライン要素で noscript 要素はブロック要素
    • noscript 要素内にはブロック要素しか記述できない (HTML 4 Strict, XHTML 1.0 Strict, XHTML 1.1)
      • Transisional, Frameset ではインライン要素やテキストも記述できる

    従って Web 標準に準拠した HTML 記述は次のようになる。(p 要素を div 要素などほかのブロック要素に置き換えても OK)

    <p>
        <script type="text/javascript">
            animateImage('image[0-9].png', 'text');
        </script>
    </p>
    <noscript>
        <p><img src="image0.png" alt="text" /></p>
    </noscript>
    

    一方で次のようなコードを記述すると、

    <p>
        <script type="text/javascript">
            animateImage('image[0-9].png');
        </script>
        <noscript><img src="image0.png" /></noscript>
    </p>
    

    以下の点で Web 標準に準拠していない (妥当でない) HTML 記述と判定される。

    • 出力される img 要素に必須の alt 属性がない
      • HTML5 で alt 属性が省略可能な場合は除く
    • p 要素内に noscript 要素 (ブロック要素) がある
      • p 要素がブロック要素を内包可能な div 要素などの場合は OK
    • noscript 要素内に img 要素 (インライン要素) がある
      • Transisional, Frameset の場合は除く
    Post Tagged with

コメントを残す

メールアドレスが公開されることはありません。