画像表示系の 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 の場合は除く