HTML5

HTML5 について

書店のコンピュータの棚に行くと、HTML5 という文字が躍っている。HTML5 とは何だろうか気になって、 森 史憲：HTML5マークアップ入門という本を一冊買った。このページは、 森氏の本をはじめとして、いろいろな本や Web ページから集めた情報を自分用にまとめたものである。なお、 HTML5 で初めて導入された記法だけではないことをお断りしておく。

互換性

HTML5 は、HTML4.01 や XHTML1.0 との互換性はない。ではどう違うのか。追加された要素、変更された要素、廃止された要素がある。

追加された要素

section, nav, article, aside, header, footer, hgroup などがある。使用の仕方は難しい。

変更された要素

廃止された要素

HTML5 で廃止された要素 (elements) には、acronym, basefont, big, center, font, tt などがある。

acronym

acronym が廃止された。abbr との区別で混乱するからというのが理由である。代替は abbr である。 厳密には両者は違う概念だが、長いものを省略して読みやすくしたり識別したりしやすくする意味では同じである。 acronym は頭字語と訳され、単語の頭文字をつなげたものだ。たとえば、UNESCO は United Nations Educational, Scientific, and Cultural Organization の頭字語である。 頭字語には、元のことばとは読み方が異なるという特徴がある。 一方 abbr は 省略語 abbreviation という意味の省略語である。これは頭文字ではなく、はじめだけを取った省略語である。 長いことばの初めをとるか、頭文字だけを抜くかという区別をせず、省略という概念でまとめたということだろう。

私は妙に凝り性で <acronym> をけっこう使っていたから、HTML5 に対応するためには修正しないといけない。 もっともこの場合は、<acronym> を <abbr> にかえればよいだけである。

tt

tt (TeleType) が廃止された。 適切な要素である kbd, var, code, samp にそれぞれ分解するようにとのことだ。 私は tt は使っていないが、以前の掲示板の CGI では tt を使っていた。この過去のログの tt は削除した。

basefont, big, center, font

CSS を使う。これらはけっこう使っているから直さないといけない。 だいたい、Traditional では許されているが、Strict では使えないものだったような気がする。

font は自分ではめったに使わなかったが、色指定で結構使われている。 だから、
<font color="#CA4000">コンテンツ<font>
のようなところは、
<span style="color:#CA4000">コンテンツ<span>
のように直した。

廃止された属性

廃止された属性(attribute) は、ここでは数えきれないほどある。 HTML Standard --- Obsolete Features(日本語訳) (triple-underscore.github.io) には、廃止された要素も合わせて紹介されている。

私のホームページでよく使われているのは、table 要素の align, border, cellpadding, cellspacing, height, rules, width, summary 属性などだ。

HTML5 の概念

さて、ここまでみてきたが、HTML5 とはつかみにくい概念だ。

HTML5 のご利益

だいたい何の役に立つのか。解析ツールがあれば役に立つのかもしれないが、 どこでどのような解決ができるのだろうか。

HTML5 の実装

実現しているブラウザはあるのか。だいたい、アウトラインを抽出してみせるブラウザがほとんどない。 Google Chrome の拡張機能である HTML Outliner しか紹介されていないのではないか。

ナビゲーション

関連するリンクとして、nav 要素で囲んで示している。

• HTML のリンク要素によるナビゲーション
• XHTML

記事本体からは外れている内容

この記事は HTML5 について書かれている。これは、私の WEB ページのうちで異例なフォーマットである。 他にも、私の WEB ページのうち（世間では常識であっても私としては）異例の技術を使っているページは次の通り。

• SVG のいくつか。例：曲線の表現
• MathML
• Flash のいくつか。例：将棋日誌の棋譜再生

フォームに関しては、フォームを参照のこと。

変わらないところ

id 属性に関して注意すべき点は以下の通りだ。

• 1つのIDは、同じ文書内で1ヵ所にだけ使用できる（重複させてはならない）
• 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）のみ。 ただし、実は W3C で HTML5 で使える文字が厳格に規定されているわけではない。上記は HTML 4.01 の規格である。
  https://www.w3.org/TR/html401/types.html#h-6.2
  ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
  さらに厳しく、ハイフン以外の記号は使わない方が無難だ、と主張するページもある。
  
• アルファベットで始めなければならない（数字や記号で始めてはならない）
• 大文字と小文字を区別する

ルビの振り方

ルビについては変わらないはずである。 次の例文は、中島敦「李陵」の冒頭である。

漢の武帝ぶていの天漢二年秋九月、騎都尉きとい・ 李陵りりょうは歩卒五千を率い、 辺塞へんさい遮虜鄣しゃりょしょうを発して北へ向かった。

簡単には次のようにする。

<ruby>
  <rb>遮虜鄣</rb>
  <rt>しゃろしょう</rt>
</ruby>

ルビ非対応ブラウザではルビの前後にカッコを入れるのが親切だ。その場合はこうなる

<ruby>
  遮虜鄣
  <rp>(</rp>
  <rt>しゃろしょう</rt>
  <rp>)</rp>
</ruby>

折り畳み

折り畳みに関しては、<details> : 詳細折りたたみ要素 と <summary> : 概要明示要素 が使える。

なお、HTML に関して借りた本もある。 WWW, HTMLのページを参照。