17.HTMLタグ簡単リファレンス

では、タグの入れ方がわかった所で、基本的な要素の勉強をしていきましょう。要素は、すべて覚える必要はございません。なぜなら、忘れたら、ここを見たらＯＫだからです。

お勧めのHTMLリファレンス

HTMLリファレンスとは、HTMLタグの用途を、要素別に説明してある辞書のことを言います。私がHTMLリファレンスを作るよりも、世の中には、すばらしいHTMLリファレンスがたくさんございますので、そちらに、お任せしたいと思います。私がお勧めするHTMLリファレンスは

• HTMLリファレンス（とほほのＷＷＷ入門）
• ばけらのHTMLリファレンス（HTML鳩丸倶楽部）

私が、初心者のときに勉強させて頂いたのが、「とほほのＷＷＷ入門」で、初心者さんにはお勧めです。今現在は、主に「HTML鳩丸倶楽部」を参考にさせて頂いております。「HTML鳩丸倶楽部」は、しっかりとした内容ですが、かなり高度だと思いますので、ある程度HTMLに慣れた方に、お勧めです。（両Ｗｅｂサイトに感謝！）

よく使うタグを、次に示します。ここで説明しない要素は、ほとんど使わないものか、使うことが推奨されない要素です。

• a 
• area 
• body 
• br 
• caption 
• div 
• em 
• h1, h2, h3, h4, h5, h6 
• head 
• hr 
• html 
• img 
• li 
• link 
• map 
• meta 
• nobr 
• object 
• ol 
• p 
• param 
• pre 
• script 
• span 
• strong 
• style 
• table 
• td 
• th 
• title 
• tr 
• ul 

ここで、少しHTMLをお勉強なさった方は、「あれ？　b要素や、font要素が無いぞ！」と気づかれるかもしれません。b要素やfont要素は、重要ではないと思いましたので、省きました。この他にも、覚えておいても良いものは、「sub」と「sup」かなと思います。

そして、framesetやframeを入れない理由は、フレームはコンテンツが分散されるために、ＳＥＯにとってかなり不利ですので、使わない方が良いためです。

spanタグは、実は何もしないタグなのですが、私は便利なタグだと思っています。例えば、次の例をご覧ください。表示結果は、何も変化しません。

● spanタグの記述例

spanタグを使っても<span>何も変化</span>しません。

● 表示結果

spanタグを使っても何も変化しません。

では、何のために存在するかと申しますと、「25.Ｗｅｂサイトの構造とデザインを考える」からお勉強していくスタイルシートと組み合わせることによって、意味がでてくるタグなのです。

spanタグは、文書の一部の色を変えることが多いと思いますが、この使用例は33.colorコマンド（CSS）で説明しています。

scriptタグは、JavaScritpなどのプログラムを挿入するためのタグです。ほとんどの場合がJavaScritpですので、JavaScriptのプログラムを挿入するためのタグと言っても、過言ではありません。JavaScript自体については、後ほど詳しく説明すると思います。

type属性

scriptタグにJavaScriptを設定する場合は、次の例に示すようなtype属性を設定し、プログラム自体をコメントアウトします。

● HTMLでの設定例

<script type="text/javascript">

  <!--

  （JavaScriptのプログラム）

  -->

</script>

ただし、XHTMLの場合は、コメントアウトすると、本当にコメントと見なされるので、コメントアウトせずに設定します。

● XHTMLでの設定例

<script type="text/javascript">

  （JavaScriptのプログラム）

</script>

外部のJavaScriptファイルを読み込む

JavaScriptのデータは、scriptタグ内に入れる以外にも、外部に別ファイルとして保存してあるJavaScriptファイルを読み込むことができます。この場合、src属性に外部ファイルのＵＲＬを指定します。

● src属性の設定例

<script type="text/javascript" src="test.js"></script>

この例では、「test.js」という名前のJavaScriptファイルを読み込みます。ここで、外部のJavaScriptファイルの拡張子は、「.js」とします。

基本的にＷｅｂページ共通のスタイルは、スタイルシートCSSを使って設定する流れになっています。styleタグは、Ｗｅｂページ固有のスタイルを設定します。

スタイルの優先順位

スタイルシートとstyleタグの設定で、ある設定が重複する場合もあります。そういったときは、styleタグの内容が優先されます。また、各タグに設定するstyle属性が、最終的に優先されます。

「スタイルシート」 ＜ 「styleタグ」 ＜ 「style属性」

記述方法

styleタグは、次の例に示すように、type属性を設定し、コメントアウトして使用します。ところが、XHTMLでは、コメントアウトは本当にコメントとして見なされますので、コメントアウトせずに設定します。

● HTMLでの設定例

<style type="text/css">

  <!--

  p {font: 100%/130% sans-serif;}

  -->

</style>

● XHTMLでの設定例

<style type="text/css">

  p {font: 100%/130% sans-serif;}

</style>

ここで覚えることは、「このタグは、どういった意味かな？」程度で、かまいません。応用的な使い方までは、覚える必要はございません。なぜなら、わからなければ、その都度、例を見れば良いからです。

では、タグの意味を覚えた所で、次にまいりましょう。タグの使い方として、重要なのですが、「HTMLリファレンス（とほほのＷＷＷ入門） 」の内容では、足りない部分を、述べていきたいと思います。