htmlタグ
多くのＨＴＭＬリファレンスでは、普遍的な内容のものが多いため、実際のＷｅｂサイト制作現場で直ちに使うことができません。そこで、現場で直ちに使えるような、タグについて細かい説明をしてまいります。
lang属性
lang属性には、言語の指定をします。よく使われるのが、日本語と英語ですが、日本語には「ja」、英語には「en」を指定します。
htmlタグは、html文書すべてを包括しているので、文書すべてが、ここで指定する言語ですよと、宣言することになります。つまり、「ja」を指定すると、文書すべてが日本語ですよといった、宣言になります。
日本語のＷｅｂページ場合、「文書すべてが日本語ですよ」と宣言したことになる。
<html lang="ja">
英語のＷｅｂページ場合、「文書すべてが英語ですよ」と宣言したことになる。
<html lang="en">
ここで、仮に文書全体が日本語でも、局所的に英語を使っている場合などは、その局所的な英語の領域に使っているタグに、lang属性を指定すればＯＫです。例えば
<p lang="en">This is a pen.</p>
もし、lang属性を入れ忘れたとしても、致命的なエラーにはなりません。ただし、lang属性を入れておかないと、ブラウザがソースをダウンロードしている最中、最初の日本語が出てくるまで、「どこの国のＷｅｂページかな？」という状態ですが、htmlタグにlang属性が指定されていれば、それを回避できます。
XHTMLの場合
ＷｅｂページをXHTMLで記述する場合は、xml:lang属性を追加で入れます。
<html lang="ja" xml:lang="ja">
本来は、xml:lang属性のみでＯＫなのですが、この属性に互換性のないブラウザが存在しますので、念のためにlang属性も入れておくことが、通例となっています。
titleタグ
検索結果のタイトルになる
titleタグにタイトルを入れれば、ブラウザの左上の青い部分に、入力したタイトルが表示されると、「16.HTMLの記述方法（実用編）」でも述べました。ここで、「titleタグに何かを入れても、どのみち、ブラウザの上部に文字が出るだけだ。」と思わないで下さい。titleタグには、もっと大切な意味があるのです。
ここで、GoogleやYahooなどの検索エンジンにおいて、例えば「布団」というキーワードで検索をして下さい。そうしたときにリスト化されたＷｅｂページと、そのコメントが掲載れていることと思います。
実は、このリスト化されたタイトルが、titleタグの文書になるのです。この文書を見て、ユーザーはクリックするかどうか、決めるのです。
titleタグの中は文書のみ
最近では、ほとんど見かけなくなりましたが、titleタグ内に、何らかのタグを入れてはいけません。
● 間違った例
<title>ようこそ。<strong>綿布団</strong>の販売ページへ</title>
ここで、strongタグは、「強調する」という意味です。ここでは、「綿布団」というキーワードを強調したいという意味で、strongタグを使っています。ところが、titleタグの中には、いかなるタグも入れてはダメというルールですので、この例では、strongタグが入っているので、ダメってことになります。
もし、titleタグ内で、「綿布団」というキーワードを強調したい場合は、自然な文書でもって、「綿布団」を２個入れるようにして下さい。例えば
<title>ようこそ。綿布団の販売ページへ。綿布団のことなら、なんでもお任せ</title>
でも、単純に「たくさんのキーワードを含ませていったら良い」って訳ではございません。キーワードには重みがあって、検索エンジン最適化をするためには、その重みを最適に設定する必要があります。
キーワードの重み
検索エンジン最適化について、書きたいことは、たくさんあるのですが、これ以上話しをしたら、私の仕事がなくなってしまうので、この当たりで止めておきます＾＾；
でも、検索エンジン最適化には、titleタグが重要な要素の一つであることは、察して頂けたことと思います。
divタグ
領域確保
divタグで囲まれた領域は、ブラウザでの見た目は、何も変化がありませんが、マークアップという意味では、非常に重要なタグの一つです。私の一番好きなタグです。
例えば、何かの文書を書いたときに、それぞれの文書をカテゴリに分けることができます。例えば
<h3>布団について</h3>
<p>布団は、古来の日本より綿が、どうのこうの・・・</p>
このような文書があったとして、h3タグには、次に来る本文の「布団について」というタイトルが入っています。このh3タグと、pタグは、タイトルと本文ということで、同じカテゴリであると言えます。同じカテゴリなので、divタグで次のように領域確保することで、マークアップの意味が出てきます。
<div>
<h3>布団について</h3>
<p>布団は、古来の日本より綿が、どうのこうの・・・</p>
</div>
id属性やclass属性で意味付けをする
上ではdivタグで、領域確保しましたが、その領域に意味を持たせることも可能です。例えば
<div id="futon">
<h3>布団について</h3>
<p>布団は、古来の日本より綿が、どうのこうの・・・</p>
</div>
このように、divタグに、id属性で名称を設定することもできます。すると、このdivタグで囲まれた領域は、「futon」という意味を持たせることができます。これが、マークアップです。
divタグによるマークアップは、次の例のように、階層を作ることもできます。
<div id="futon">
<div id="men">
<h3>綿布団について</h3>
<p>綿布団とは、どうのこうの・・・</p>
</div>
<div id="umou">
<h3>羽毛布団について</h3>
<p>羽毛布団とは、どうのこうの・・・</p>
</div>
</div>
綿布団のコンテンツは、「men」でマークアップされており、羽毛布団のコンテンツは、「umou」でマークアップされています。更に大きな範囲として、綿布団と羽毛布団の両方のコンテンツが、「futon」でマークアップされています。このように、idを入れ子にしても、かまいません。
id属性を設定する場合、次のようなルールがあります。
- １個のタグに、id属性を１個のみ入れられる。
- id属性は、どのようなタグにも使用できる。
- id名は、半角アルファベットで始まり、半角英数ならびに「-（ハイフン）」のみを用いることができる。
- １つのＷｅｂページ内に、同じ名称のidが複数存在してはいけない。
このルールに従えば、勝手に好きなidを付けてかまいません。しかし、どうしても、同じidを、同一Ｗｅｂページ内で、何度も使用したい場合もございます。例えば、「ここは本文です」という意味で
<div id="honbun">
と書きたい所ですが、「ここは本文です」というidがＷｅｂページ内で、数カ所に出てくる場合は、ルール違反になります。そこで、このように同じ名称を何度も付けたい場合は、class属性を使います。
<div class="honbun">
<h3>綿布団について</h3>
<p>綿布団とは、どうのこうの・・・</p>
</div>
<div class="honbun">
<h3>羽毛布団について</h3>
<p>羽毛布団とは、どうのこうの・・・</p>
</div>
class属性を設定する場合にも、次のようなルールがあります。このルールに従って、class属性を設定して下さい。
- １文字目は必ずアルファベットで、半角英数のみ使用できる。
- class属性は、どのようなタグにも使用できる。
このようなdivタグを使っての、id属性やclass属性によるマークアップは、ブラウザでの見かけ上では、何も変化を及ぼしません。後に説明するスタイルシートの製作と設置で、デザインを行うときに、重要な意味を持ってきます。なるべく丁寧にマークアップしておいて下さい。
この領域確保について、もっと詳しく知りたい方は、「22.divタグで領域確保」をご覧ください。
まとめ
このような、divタグによる領域確保は、後の「22.divタグで領域確保」で詳しく述べられていますので、参考になればと思います。
- ← 前のページ 「17.HTMLタグ簡単リファレンス」
- 「19.h1～h6、p、br、metaの説明」 次のページ →