ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

HTML文章の構造を明確にする

アウトラインレベルでのマークアップ

ホームページを作るときには、ページの構造を意識してHTMLを記述する(マークアップ)する必要があります。

「アウトライン」「アウトライン化」「アウトラインを取る」などと表現されることもあり、ホームページを制作する上で大変重要な要素となります。

アウトラインとは?

アウトラインとは、曖昧な文書構造を、より明確にするための手法や考え方です。

h1~h6やpなどを利用してなんとなく文書の構造を作ることはできますが、これではキチンと構造を管理することができません。また、統一された記述方法がなく文書構造も書く人によってバラバラになりがちです。

そこで、<section>や<article>などの文書構造を担当する要素を使い、よりハッキリとした文書構造にしよう!というのがアウトラインの目的です。

文書構造とは?

文書構造といってもピンとこないかもしれませんが、例えば雑誌を思い浮かべてください。

目を引くような大見出しやキャッチコピーがあり、ついで中見出し、文書、小見出しといった感じで構成されています。

雑誌などの文書構造例

ホームページもこのような構造にするのが望ましいとされ、文書構造要素を使うことにより細かに構造を指定することができます。

文書構造が明確化されるメリット

文書構造が明確化されることにより、様々なメリットがあります。
例えば記述方法の統一であったり、ソースコードが見やすくなったり。

しかし、1番のメリットは「機械にキチンと理解してもらえる」ことです。
人間であれば、「ここの文は大事なんだな」「なるほど、こういうことか!」など、大事な箇所を文章の流れや見かけで判断することができます。

しかし機械は見かけで判断することができず、ソースコードのみで判断します。

ソースコードを読み込む様子

文書構造要素を使わずに機械に理解してもらうこともできなくなはいですが、キチンと理解してもらうことが難しいです。
もちろん、ある程度理解してくれてはいますが、文書構造タグを使えば「もっと理解してくれる」ということです。

機械による読み方の違い

見た目はまったく同じでも、ソースコードが異なれば機械からの読み方はまったく違ってきます。
例えば、以下の画像を見比べて見て下さい。

アウトラインの説明画像1
アウトラインの説明画像2

この2つのページ、見かけはまったく同じです。
しかし、ソースコードを見てみると異なる箇所があります。

ホームページの画像
ホームページの画像

1は文書構造要素を使わずに書いたソースコード、2は文書構造要素を使って書いたソースコードです。

この2つのページを機械に読んでもらった場合、より正確に文書構造を理解してもらえるのはどちらでしょうか?

正解はもちろん、2です。

キチンと、「ここからここまでが○○ですよ」「次の段落はここですよ」と指定しているため、機械もその通りに読んでくれます。
もちろん、「ここは大事なことが書いてあるな」もよく理解してくれます。

文書構造を明確にすることにより、機械にページ内容を理解してもらえるのでGoogleやYahooなどの検索エンジンに好まれるようになります。
検索エンジンに好まれるようになれば検索結果にヒットしやすくなり、アクセス数が増えることだってあります。

ソースコードは機械にわかりやすく

覚えておきたいポイント

セクション要素の種類

セクション要素には
<section>
<article>
<nav>
<aside>
などがあります。
これらを使い、文書構造を機械に正確に伝えます。

文書構造要素の一覧
« 前のページへ 【STEP.4】覚えておきたい大切な要素

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。