戻る

アウトラインを確認する

HTML5の新しいタグでマークアップして文法的に問題がなくても、重要なのはブラウザや検索エンジンといったプログラムに対し、コンテンツの構造をきちんと伝えることができているかどうかです。そこで、「アウトライナー」と呼ばれるツールを利用して、コンテンツの構造(アウトライン)がきちんと取得されるかどうかを確認します。

ここでは「HTML5 Outliner」という、オンラインで提供されているアウトライナーを利用します。HTMLソースを直接入力する方法では文字化けするケースがありますので、「Input HTML」でファイルをアップロードするか、「URL」を指定して確認します。

たとえば、「Input HTML」でSTEP3-8のサンプルAのファイルを指定し、「Outline this!」をクリックすると、右のようなアウトラインが取得されます。アウトラインにはサイト名、ナビゲーションメニュー、記事のタイトル、小見出しがツリー構造でリストアップされ、コンテンツの構造が正しく取得されていることがわかります。「Untitled Section」と表示された項目は、<nav>でマークアップしたナビゲーションメニューです。

HTML5 Outliner
http://gsnedders.html5.org/outliner/

HTML5 Outlinerが取得したサンプルAのアウトライン

inserted by FC2 system