ホームページを作るときには、ページの構造を意識してHTMLを記述する(マークアップ)する必要があります。
「アウトライン」「アウトライン化」「アウトラインを取る」などと表現されることもあり、ホームページを制作する上で大変重要な要素となります。
アウトラインとは?
アウトラインとは、曖昧な文書構造を、より明確にするための手法や考え方です。
h1~h6やpなどを利用してなんとなく文書の構造を作ることはできますが、これではキチンと構造を管理することができません。また、統一された記述方法がなく文書構造も書く人によってバラバラになりがちです。
そこで、<section>や<article>などの文書構造を担当する要素を使い、よりハッキリとした文書構造にしよう!というのがアウトラインの目的です。
文書構造とは?
文書構造といってもピンとこないかもしれませんが、例えば雑誌を思い浮かべてください。
目を引くような大見出しやキャッチコピーがあり、ついで中見出し、文書、小見出しといった感じで構成されています。
ホームページもこのような構造にするのが望ましいとされ、文書構造要素を使うことにより細かに構造を指定することができます。
文書構造が明確化されるメリット
文書構造が明確化されることにより、様々なメリットがあります。
例えば記述方法の統一であったり、ソースコードが見やすくなったり。
しかし、1番のメリットは「機械にキチンと理解してもらえる」ことです。
人間であれば、「ここの文は大事なんだな」「なるほど、こういうことか!」など、大事な箇所を文章の流れや見かけで判断することができます。
しかし機械は見かけで判断することができず、ソースコードのみで判断します。
文書構造要素を使わずに機械に理解してもらうこともできなくなはいですが、キチンと理解してもらうことが難しいです。
もちろん、ある程度理解してくれてはいますが、文書構造タグを使えば「もっと理解してくれる」ということです。
機械による読み方の違い
見た目はまったく同じでも、ソースコードが異なれば機械からの読み方はまったく違ってきます。
例えば、以下の画像を見比べて見て下さい。
この2つのページ、見かけはまったく同じです。
しかし、ソースコードを見てみると異なる箇所があります。
1は文書構造要素を使わずに書いたソースコード、2は文書構造要素を使って書いたソースコードです。
この2つのページを機械に読んでもらった場合、より正確に文書構造を理解してもらえるのはどちらでしょうか?
正解はもちろん、2です。
キチンと、「ここからここまでが○○ですよ」「次の段落はここですよ」と指定しているため、機械もその通りに読んでくれます。
もちろん、「ここは大事なことが書いてあるな」もよく理解してくれます。
文書構造を明確にすることにより、機械にページ内容を理解してもらえるのでGoogleやYahooなどの検索エンジンに好まれるようになります。
検索エンジンに好まれるようになれば検索結果にヒットしやすくなり、アクセス数が増えることだってあります。
覚えておきたいポイント
セクション要素の種類
セクション要素には
<section>
<article>
<nav>
<aside>
などがあります。
これらを使い、文書構造を機械に正確に伝えます。