正しいHTML文書を作るための方法と考え方
はじめに
私はHTMLの専門家ではありませんので、あまり偉そうなことは言えませんが、HTML文書としての本来のあり方とはどういうものか説明させていただきます。
もし私の認識に間違った部分がありましたら、ツッコミお願いします(笑)
正しいHTML文書とは
本には、章があり、章の中にセクションがあります。
章やセクションはそれぞれ見出しになりますよね。
見出しがあって、その後にリード（見出しから本文につなげるためのモノ）があり、場合によってその後に小見出しがあり、本文があります。
見出しと本文がなければ、意味のある文書とは言えませんし、とても読みにくいものになります。
Webページでも同じことが言えるのです。
内容に即したマークアップがされていないと、正しいHTML文書とは言えません。
内容に即したマークアップとは、Webページのどこが見出しであり、どこが本文なのか明確にするということです。それぞれの部分に意味合いをつけることが、マークアップということになります。
内容に即したマークアップがなされていれば、どのデバイスでも正しく内容を読み取ることができます。とりわけ、Google等のロボット型サーチエンジンでは、Webページ内の見出しと本文を見分けてインデックス（索引）化し、データベースにします。適切にマークアップがされていると、結果的にあなたのWebサイトで提供されているコンテンツを求めるサイトの訪問者が、あなたのサイトを見つけやすくなります。
HTMLのタグにもそれぞれ意味があります。タグの意味をまず理解してください。
<h1>~<h6>の h は heading の意味であり、「表題・見出し」ということになります。
<p>は Paragraph の意味で、「段落」になります。
<hr>は、Horizontal Rule の略で、「水平線」という感じになります。
英語でいう、「見出し」は通常「header」という単語を使うみたいです。
英語での<h1>から<h6>までのタグの説明として、"Defines header 1 to header 6" と説明されています。→参照
HTMLの h は heading をあらわしますが、普通、見出しのことを header と言うそうです。
つまり、ぶっちゃけ、<h1>見出しの中に<p>段落があれば、</p>おかしいですよね？</h1>
見出しはレベルに応じて順序良く
以下のサンプルをご覧ください。HTMLだけのプレーンな形の文書になります。
注目していただきたいのは、<h1>タグの後には<h2>が来ているということです。
決して<h1>の次に<h3>が来るように、レベルを飛ばすことは好ましくありません。
アウトラインであらわすと、以下の通りです。
- 正しいHTML文書を作ろう
- 1. 正しいHTML文書とは?
- 1. 本の構成を参考にしよう
- 2. 内容に即したマークアップをしよう
- 2. タグを正しく使おう
- 1. <h1>タグは文字を大きくするためのものではない
- 2. 見出しに適切なレベル設定を
- 1. 正しいHTML文書とは?
PowerPointのプレゼン資料を作成する際、アウトラインペインで作業をしたことがある方はおなじみかもしれませんが、HTML文書にも、このように適切なレベルを指定してあげることによって、文書内容がより明確になります。
レベル1が<h1>、レベル2が<h2>、レベル3が<h3>…といった形に文書を構成する必要があります。
タイトルを適切につけよう
Googleで検索してみると、「無題ドキュメント」とか「Welcome to Adobe GoLive」とかが結構ヒットするんですが、気のせいでしょうか？
これでは何のページなのかわかりませんよね。
Webページを保存したときに、必ずWebページのタイトルを付けてください。
そのまま保存してしまうと、「無題ドキュメント」がWebページのタイトルになったりしますので注意してください。
しかし、長すぎるタイトルではなく、スマートに付けてください。
ちなみに、このWebページは、「正しいHTML文書を作るための方法と考え方」と指定しています。
タイトルだけで、どのようなWeb文書であるのかひと目でわかるように工夫するのがポイントです。
- ホームページを作る前に・・・
- ホームページ作る前の予備知識
- これだけはおさえておきたい、HTMLの基本
- Web標準～HTMLとXHTMLの違い～
- 正しいHTML文書を作るための方法と考え方
- ホームページ作る前の予備知識
