【第7回】HTML5とHTML4,XHTMLの違いその6:セクションとアウトライン

Posted by 寺西裕紀 | 12月 21, 2011 | No Comments

HTML5とHTML4,XHTMLの違いについて最後となるこの回ではセクションとアウトラインという概念について説明する。

セクション

セクションとは文章の一区分のことである。文章は複数の章から成り、各章はそれぞれ見出しと内容を持つ。各章の内容にはさらに細分化された節という区切りが存在し、章と同様に節もそれぞれが見出しと内容を持つ。このような見出しと内容のひとまとまりをセクションという。本は章という複数のセクションに分かれ、それぞれの章は節というセクションを持っている。本自体が「本」という一つのセクションを成しているとも言える。文章は同じ大きさのセクションの集合が成す階層によって構造化されている。

パーフェクトJavaScript
├■Part1　JavaScript~overview
│└1章　JavaScriptの概要
├■Part2　JavaScript言語仕様
│├2章　JavaScriptの基礎
│├3章　JavaScriptの型
│├4章　文、式、演算子
│├5章　変数とオブジェクト
│├6章　関数とクロージャ
│└7章　データ処理
├■Part3　クライアントサイドJavaScript
│├8章　クライアントサイドJavaScriptとHTML
│├9章　DOM
《省略》

ウェブページも例外ではない。文書量や見出しの数の違いはあるが、多かれ少なかれHTML文書も階層を持つ。

旧来のHTMLでは、文書を階層化するために見出しの大きさに応じてh1～h6要素が使われてきた。

<h1>表題</h1>
<p>...</p>
<h2>第1章</h2>
<p>...</p>
<h3>1.1.節</h3>
<p>...</p>
<h3>1.2.節</h3>
<p>...</p>
<h2>第2章</h2>
<p>...</p>
<h3>2.1.節</h3>

階層の深さは見出し要素の数字によって暗黙的に表されていたが、上の例のように見出し要素で区切られた章や節の内容はマークアップ上では同じ階層に位置することになる。章という大きなセクションと節という小さなセクションが階層関係でなく並列な関係を表しているのだ。

HTML5では明示的に文書構造をマークアップできる要素が新たに規定された。sectionやarticleなどといったセクショニング・コンテンツに属する要素を使うことで、セクションを明示的に囲い込み、文書の階層構造を示すことができる。

<h1>表題</h1>
<p>...</p>
<section>
  <h2>第1章</h2>
  <p>...</p>
  <section>
    <h3>1.1.節</h3>
    <p>...</p>
  </section>
  <section>
    <h3>1.2.節</h3>
    <p>...</p>
  </section>
</section>
<section>
  <h2>第2章</h2>
  <p>...</p>
  <section>
    <h3>2.1.節</h3>

アウトライン

このようにHTML5ではマークアップ上でもコンテンツの階層構造を示すことができるようになった。人間だけが理解できる暗黙的な階層構造でなく、マークアップによってコンピュータでも理解することができるように明示的に表された階層構造のことをアウトラインという。

HTML5でマークアップする場合、コンピュータでも理解することができる階層構造を意識する必要がある。そのためにはまず、マークアップが構造化（アウトライン化）されるアルゴリズム（アウトライン・アルゴリズム）を理解しなければならない。以下アウトライン・アルゴリズムを簡単に説明する。

まずセクショニング・コンテンツに属する要素が使われていないマークアップの場合、見出し要素が現れるたびにその数字の大きさによってアウトライン化が行われる。アウトラインにおける階層の深さをアウトライン・レベルというが、以前に現れたセクションの見出しと比較して数字が大きい場合アウトライン・レベルが1段階下がり（より深い階層となり）、小さい場合はアウトライン・レベルが上がる（より浅い階層となる）。
次にセクショニング・コンテンツの属する要素を用いたマークアップの場合だが、この場合はセクショニング要素が現れるたびにアウトライン・レベルが1段階下がり新たなセクションが開始されたという解釈がなされる。この要素の中で最初に現れる見出し要素がそのセクションにおける見出しとなり、セクショニング要素の閉じタグが現れた時点でそのセクションが終了したと解釈される。ただしセクショニング・ルートというカテゴリーに属する要素はアウトライン・アルゴリズムにおいて独立したコンテンツとしてみなされるため、これらの要素の中にセクションが存在していてもアウトライン化はされない。

詳しい説明・例は参考URLを見ていただきたい。またマークアップされたHTML文書のアウトラインを確認する場合はHTML 5 Outlinerというツールを利用するとよい。

以上6回に渡りHTML5と旧来のマークアップとの違いを説明してきた。この違いは一言で”よりセマンティックになった”と言えるだろう。セマンティックなHTML5が持つもう一つの特徴であるAPI群については、今後メインで解説していく。各要素の使い方は必要に応じて追加で解説するが、全ての要素については網羅することはおそらくできないのでご了承いただきたい。要素の属性などの細かな違いはその属性に関連した要素を用いる場合に解説していきたいと思う。

■参考URL:

Category: html5

【第6回】HTML5とHTML4,XHTMLの違いその5:廃止になった要素

Posted by 寺西裕紀 | 12月 19, 2011 | No Comments

HTML5では、見た目しか表さずCSSで対処すべき要素、フレーム関連の要素、これまでほとんど使われなかった要素が廃止となった。この中の多くの要素は、HTML4.01やXHTML1.0では非推奨や廃止とされた要素だ。
これらの廃止となった要素を代替手段の一例とともに紹介する。

見た目しか表さずCSSで対処できる要素

これらの要素は見た目しか表さず、HTML文書内で構造的な意味を持たないため、CSSで代替することが可能であり廃止対象となった。

basefont: この要素は文書の基準フォントサイズを表す要素だがCSSで代用することができる。書体の指定にはfont-familyプロパティを、文字サイズの指定にはfont-sizeプロパティを、文字色の指定にはcolorプロパティを用いればよい。
big: この要素はテキストを一回り大きく表示する要素だがCSSのfont-sizeプロパティで代用することができる。
center: この要素は要素およびテキストをセンタリングする要素だがCSSで代用することができる。要素のセンタリングにはmagin-left:auto, margin-right:autoとし(IEの場合はさらにtext-align:center)、テキストのセンタリングにはtext-align:centerとすればよい。
font: この要素はフォントのサイズ・色・種類を指定するのに使用する要素だがCSSで代用することができる。書体の指定にはfont-familyプロパティを、文字サイズの指定にはfont-sizeプロパティを、文字色の指定にはcolorプロパティを用いればよい。
strike: この要素は削除されたテキストであることを表し、一般的なブラウザではテキストに打ち消し線がひかれて表示される。この要素を代替する場合、削除という訂正を表すならdel要素、関連が無くなったことを表すならs要素、単に取り消し線をレンダリングしたい場合はCSSのtext-decorationプロパティを用いればよい。
tt: この要素はテキストを等幅フォントで表示する要素だがCSSのfont-family:monospaceで代用することができる。

フレーム

フレーム分割はユーザビリティやアクセシビリティに悪影響があるために、それに関する要素が廃止されることになった。

frame, frameset, noframes: これらの要素が廃止になったことでページをフレームで分割することができなくなった。ただ単に特定の領域にスクロールが必要なのであればCSSで対処し、複数のページで共通部分を表示させたい場合はiframe要素を使うか、またはSSIを使ってサーバー側でインクルードする方法が考えられる。

ほとんど使われていない要素

これらの要素はこれまで規定されていたものの、使用例が少ない、混乱の元になる、また他の要素でよりよく処理できることからウェブ制作の現場ではあまり使われておらず、HTML5では廃止対象となった。これらの要素は他の要素で代用することができる。

acronym: この要素は、「Ajax（エイジャックス）」のように単語の先頭の頭文字を組み合わせてつづり読みにし、1つの単語として発音する省略語を表すために使用される要素であった。しかしabbr要素との違いが明確でないためこの要素は廃止され、略語にはabbr要素を用いることになった。
applet: この要素はJavaアプレットを埋め込むための要素であったが、HTML4.01, XHTML1.0では非推奨とされ、object要素の使用が推奨されていた。HTML5では廃止となり、その代替にはobject要素を用いることになった。
isindex: この要素はキーワード検索入力欄の埋め込みを表す要素であるが一般的に使われることはなく、キーワード検索入力欄の埋め込みには、通常form要素が使用されている。HTML4.01, XHTML1.0で非推奨だったこの要素はHTML5では廃止され、代替としてform(input)要素を用いることになった。
dir: この要素は複数の段からなるディレクトリ（一覧）を示すリストを表す要素であるが、実際にはどのブラウザにおいてもul要素と同じ表示である。HTML5ではこの要素は廃止され、代替としてはul要素を用いることになった。

最後に、noscript要素は HTML 構文でのみ適合されるようになった。これは noscript 要素の利用が HTML パーサーに依存するからであり、そのため XML 構文では使用することができなくなった。

■参考URL:

Category: html5

【第5回】HTML5とHTML4,XHTMLの違いその4:変更された要素

Posted by 寺西裕紀 | 12月 19, 2011 | No Comments

今回はHTML5で再定義された要素についてその変更点を説明する。これらの要素を使う場合、これまでの使用方法と区別してマークアップすることが大切だ。

a: HTML4ではhref属性を使わずにname属性によってコンテンツの位置を示すアンカーを表していた。HTML5ではname属性は廃止され、href属性のないa要素はid属性などを伴ってリンクが設定される可能性を示すプレースホルダを表すようになった。またこれまでフレーズ内容 (インライン要素またはテキスト) のみに限定された内容モデルが変更され、フロー内容 (ブロック要素) も含むことができるように変更された。
address: HTML4ではaddress要素が表す連絡先情報がどのコンテンツに関連しているかについては規定されていなかったが、HTML5では新しいセクショニングの概念により、適用範囲が限定されるようになった。
b: HTML4では単に太字でレンダリングするだけの見た目に特化した要素だった。HTML5では文書の概要におけるキーワードや、レビューにおける製品名、対話的なテキストベースのソフトウェアにおける実行可能箇所、記事のリード文などといった注意を引きつけたい箇所を示す場合に用いられるようになった。
cite: HTML4では引用元や参照元の情報を表すことになっていたが、HTML5では作品 (例: 本、新聞、小論、詩、楽譜、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇、戯曲、オペラ、ミュージカル、展示、訴状、判決書、etc.) のタイトルのみを表すようになった。
dl: HTML4では定義リストとして規定されていたが、HTML5では名前と値のグループからなる連想(関連)リストを表すようになり、より汎用的なリストとして使用できるようになった。
head: 子要素としてobject をもつことができなくなった。
hr: HTML4では単に水平線をレンダリングするだけの見た目に特化した要素であったが、HTML5では段落（テーマ・話題）の区切りを表すようになった。
i: HTML4では単にイタリック体でレンダリングするだけの見た目に特化した要素だったが、HTML5では文章のなかで、異なったトーンや雰囲気、もしくは他のテキストと性質が異なる箇所を表すようになった。たとえば分類、専門用語、他言語での慣用句、考え（心の中で思ったこと）、アルファベットでの船舶名表記など印刷時にイタリック体となるような部分を他と区別する場合に用いる。
label: HTML4ではラベルをクリックするとlabel要素と関連づけられたフォームコントロールがフォーカスされていたが、HTML5ではそのような挙動はプラットフォーム側の基準に従うことになった。
menu: HTML4ではリストを表す要素であった（ただしリストを表す場合ul要素を用いることが推奨され、menu要素は非推奨な要素であった）。HTML5ではツールバーやコンテキストメニューを表すよう再定義された。
s: HTML4では単に取り消し線をレンダリングするだけの見た目に特化した要素であった。HTML5では正しくなくなった、もしくは関係のなくなった内容を表すようになった。
small: HTML4では単に小さい文字をレンダリングするだけの見た目に特化した要素であった。HTML5では細則などの補足的な注釈を表すようになった。
strong: HTML4では強調を表していたが基本的にはem要素との区別がされていなかった。HTML5では文章の一部を部分的に強調するものではなく、文章の重要度を示すものとなった。
u: HTML4では下線をレンダリングするだけの見た目に特化した要素であった。HTML5では音声では明示化されることはないものの明示的に区別して表示される、文意に影響しない注釈を表す。たとえば、中国語での固有名詞や、スペルミスのある単語の指示などに利用される。

■参考URL:

Category: html5

【第4回】HTML5とHTML4,XHTMLの違いその3:新たに追加された要素

Posted by 寺西裕紀 | 12月 12, 2011 | No Comments

今回はHTML5で新たに追加された要素についてその概要を説明する。

section: 文書やアプリケーションにおける一般的なセクションを表す。h1~h6と共に使用することで、文書構造を表すことができる。
article: ブログのエントリや新聞記事など、文書内の単独で成り立つ独立のコンテンツを示す。
aside: ページ内にあるその他の内容と、関連性が薄いコンテンツを表す。補足記事やサイドバーに用いる。
hgroup: セクションの見出し（h1~h6）をグループ化する。
header: 導入部やナビゲーションをグループ化する。
footer: セクションのフッタを表す。フッタは主に作者に関する情報や、著作権情報などを含む。
nav: ナビゲーションとなるセクションを表示する。
fugure, figcaption: figure要素は本文から単独で参照されることが多い自己完結するフロー・コンテンツ（イメージ、ビデオなど）とそのキャプションをグループ化する。キャプションにはfigcaption要素を用いる。
video, audio, source: audio要素とvideo要素はマルチメディアコンテンツに用意された要素であり、ユーザーエージェントが自動的に（プラグインを用いることなく）インターフェースを用意する仕組みが提供される。どちらの要素にも API が提供され、製作者がスクリプトを利用し独自のユーザーインターフェースを開発することもできる。source要素を使うことで異なるマルチメディアファイルのURL,MIME-Typeを複数指定できる。
track: video要素にテキストトラック（字幕）を提供する。
embed: プラグインを利用するコンテンツに使われる。これまで一般に使われてきたがHTML5で正式に規定された。
mark: 他の文脈との関連性から言及目的で印付けられたテキストを表します。著者が読者に注意を促したい部分に用いる。
progress: ダウンロードや負荷の高い処理など、実行中のタスクの進捗度を表す。
meter: 下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用する。ディスク使用率などの計測結果を表す。
time: 日付や時刻などの時間情報を表す。
ruby, rt, rp: ルビ（ふりがな）をマークアップする。
bdi: マークアップしたテキストが周辺の文字における双方向テキスト書式制御の影響を受けないようにする。
wbr: 長いテキストに改行機会 (line break opportunity) を与える。
canvas: グラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスをレンダリングするために用いられる。
command: ユーザーが呼び出すことができるコマンドを表す。menu要素の中でツールバーなどのメニューの項目として使う。
details, summary: ユーザーの要求に応じて付加的な情報やコントロールを表す。summary要素がその概要や説明、キャプションを提供する。
datalist: input要素の新しいlist属性と組み合わせ、コンボボックス作成し入力候補を構成する。
keygen: キーのペア（秘密鍵・公開鍵）を生成するためのフォームコントロールを表す。
output: スクリプトによる計算結果など、何らかの出力結果を表す。

■参考URL:

Category: html5

【第3回】HTML5とHTML4,XHTMLの違いその2:コンテンツ・モデル

Posted by 寺西裕紀 | 12月 11, 2011 | No Comments

新しい概念:コンテンツ・モデル

HTML5では新たに「コンテンツ・モデル」という概念が加えれられた。これまでの(X)HTMLでは要素ごとにブロック要素・インライン要素が定義され、「インライン要素の中にはブロック要素を入れてはいけない」というルールが規定されていた。HTML5ではそれに付け加え、要素の使用目的に応じてカテゴリー分けがされている。

HTML5の要素のほとんどは以下のカテゴリーのどれかに属す(ただし複数のカテゴリーに属す要素も、どのカテゴリーにも属さない要素も存在する)。

メタデータ・コンテンツ
フロー・コンテンツ
セクショニング・コンテンツ
ヘッディング・コンテンツ
フレージング・コンテンツ
エンベッディッド・コンテンツ
インタラクティブ・コンテンツ

要素がカテゴリーに分けられることで、「〇〇という要素には△△というカテゴリーをふくむことができる」という厳格な指定ができるようになった。このように「どの要素にどんなカテゴリーを入れてよいのか」を定義したものをコンテンツ・モデルという。
（※正確に言えばコンテンツ・モデルが指定するものはカテゴリーに限らず、特定の要素であったり、子孫の要素であったり、”空”や”トランスペアレント”であったりする。）

例をいくつか挙げよう。p要素のカテゴリーはフロー・コンテンツであり、コンテンツ・モデルはフレージング・コンテンツである。これはp要素自身はフロー・コンテンツに属し、p要素の中に含むことが出来るものはフレージング・コンテンツであるという意味だ。hr要素のカテゴリーはフロー・コンテンツでコンテンツ・モデルは”空”だ。つまりhr要素自身はフロー・コンテンツを含むことができる要素の中で用いられ、hr要素の中には何も含むことができない（すなわち空要素であり<hr />と記述できる）。ul要素のコンテンツ・モデルは”li要素”なのでul要素の中にはli要素以外は入り得ない（ただしul要素に何も含めず空とすることは可）。このようにHTML5では要素ごとに「どんな種類の要素を含むことができるのか、また自身はどんな種類の要素なのか」と定義されている。これは要素間の相互関係とも言えるだろう。

■参考URL:

Category: html5

keep looking »

marketingblog.jp

世界のインターネット企業の動向とソーシャルメディア、スマートフォン関連のブログ情報サイト

【第7回】HTML5とHTML4,XHTMLの違いその6:セクションとアウトライン

セクション

アウトライン

【第6回】HTML5とHTML4,XHTMLの違いその5:廃止になった要素

見た目しか表さずCSSで対処できる要素

フレーム

ほとんど使われていない要素

【第5回】HTML5とHTML4,XHTMLの違いその4:変更された要素

【第4回】HTML5とHTML4,XHTMLの違いその3:新たに追加された要素

【第3回】HTML5とHTML4,XHTMLの違いその2:コンテンツ・モデル

新しい概念:コンテンツ・モデル

最近の投稿

広告エリア

便利なリンク集

海外サイト

Social Media Surf

ブログ検索

ABOUT

タグクラウドテスト

Twitterアカウント

カテゴリー

Last Day. jp

世界のインターネット企業の動向とソーシャルメディア、スマートフォン関連のブログ情報サイト

セクション

アウトライン

見た目しか表さずCSSで対処できる要素

フレーム

ほとんど使われていない要素

新しい概念:コンテンツ・モデル

最近の投稿

人気のコンテンツ

広告エリア

便利なリンク集

海外サイト

ブログ検索

ABOUT

タグクラウドテスト

Twitterアカウント

カテゴリー