利用者:２Ｐ/マークアップ
HTML5の勧告に基づいて現行のマークアップの問題点, その解決策によって新たに発生する問題について考察する. 勧告書の非公式な日本語訳はOperaWikiで作成されているが, 今回の考察にあたっては英語原文を参照した. 用語は先行訳と一致していない恐れがあり, 定着していない用語と判断したものは初出時に原語を併記し, または原語をそのまま用いた.
| HTML5 | W3C Recommendation 28 October 2014 | http://www.w3.org/TR/2014/REC-html5-20141028/ |
| Cascading Style Sheets Level 2 Revision 1 | W3C Recommendation 07 June 2011 | http://www.w3.org/TR/2011/REC-CSS2-20110607 |
定義リスト/記述リスト
HTML4.01までは定義リスト (description list) であったが, HTML5では記述リスト (description list) に変更された. 以下HTML5勧告からの引用とその訳.
"The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name."
"dl要素は0個以上の名前-値の組によって構成される連想リスト (定義リスト) を表す. ひとつの名前-値の組は1つ以上の名前 (dt要素) とそれに続く1つ以上の値 (dd要素) によって構成され, dt及びdd以外のいかなるノードも無視する. ひとつの記述リスト中に複数の同じ名前のdt要素が存在してはならない."
名前-値の組は用語集のほかQ&Aなどであってもよいとされる.
dtとddの対応は必ずしも1対1でなくてもよい. しかし複数のddを同じdtに対応させる場合, それぞれのddの内容は別のもの, 選択肢 (alternatives) でなくてはならず, つまり改行目的はもちろん改段落目的で新たなdd要素に移ることは多くの場合不適切であると考えられる. そのような場合はpタグの使用がHTML的には適切だと思われる.
dt要素の許可されるコンテクストはdl要素の内側かつdd又はdd要素の前であり, dd要素の許可されるコンテクストはdl要素の内側かつdd又はdd要素の後とされる. よって, dlの最初の子要素がddとなることや最後の子要素がdtとなることは意味的のみならず文法上も許可されない.
前述のとおり"定義"という用法に限られない汎用リストとなり, 定義という意味を示す目的では#dfn要素を使用するようになっている. 用語集のページでは現在
;<span id="用語">用語</span> :用語解説
というマークアップが使われているが,
;<dfn id="用語">用語</dfn> :用語解説
に置き換えられることが意味的に, またソースの短縮という観点からも望ましい.
dfn要素
定義される用語を示す要素. 用語の定義は直近の祖先である段落または記述リストの組またはセクションで説明されなければならない.
テーブル
テーブルをレイアウト目的で使うことは非推奨とされ, どうしてもその必要がある場合はrole属性に"presentation"を指定してその旨を明示するべきとされている. (しかしポケモンWikiの読者としてスクリーンリーダー使用者が想定されているとは考えにくく, 個人的にはそこまでする必要はないような気がする)
現在ポケモンWikiで使われているレイアウト目的のテーブルはほぼ全て箇条リストを段組みするためのものである. これはレイアウト目的のテーブルであるのみならず, 箇条リストを分断してしまっているという点で構造的にも問題がある. HTML5の勧告ではレイアウトにはCSSを使うことを推奨している. CSS2.1にはリストを分断することなく段組みにする方法はおそらく存在しない (段組みを行うだけで良ければfloatプロパティが使用できる. 実装例:せいかく) が, CSS3のMulti-column Layoutを使えばこれを実現できる.
- column-widthプロパティ
- 1段分の幅の理想値
- colun-countプロパティ
- 段の数
- column-widthとcolumn-countを同時に指定するcolumnsプロパティも存在する.
- column-widthの値は理想値であり, 環境に応じて多少増減する.
- 幅と段数が同時にしていされた場合は幅が優先され, 段数は最大段数の指定となる.
問題点はやはり対応ブラウザの少なさであるが, 対応していなくても段組みが行われないだけで害は無い. またマークアップがうんざりするほど長くなるという問題はあるが, これはテンプレートで対応するのが妥当であろう.
廃止要素
HTML5ではいくつかのpresentationalな要素や属性が廃止されている. 多くは代わりにCSSを使用するべきとされている.
big要素
font-size:largeなどで同様の効果を得られる.
center要素
テキストのセンタリングはtext-align:centerで, ボックスのセンタリングは左右marginをautoにすることで同様の効果を得られる.
font要素
CSSのfont関連プロパティを使用するべき.
strike要素
"内容の取り消し"という意味であればdel要素を, 取り消しではないが"内容が不正確または妥当でないことを示す"ためにはs要素を利用できる. そのいずれでもなく単に文飾として線を引きたい場合はtext-decoration:line-throughのスタイルを適用するべき.
こう書いても分かりにくいのでHTML5勧告文書にあるs要素の使用例を翻訳して引用する.
アイスティーとレモネードを買おう!
希望小売価格: 1本あたり $3.99今なら1本たったの $2.99!
