文中の説明画像をクリックすると拡大します。
HTMLタグって全部覚えなきゃいけないの？
Webサイトを作るのに必要な技術の第一歩はHTMLです。HTMLの文書は、タグと呼ばれる要素で構成されているからです。
HTMLとひとことで言っても、たくさん種類があるので、「全部覚えないとWebサイトは作れないの？」 と、一時は途方に暮れてしまうかもしれません。
しかし、大丈夫です。
タグを全部覚える必要はありません。
基本的なタグの使い方を押さえれば、あとは覚えていないタグは、辞書や専門書籍、インターネット上の情報を見て、必要なときに必要なタグを調べればよいのです。
そもそもHTMLって何？という方はこちらをご覧ください。
基本的なHTMLタグの種類
HTMLタグは、一般的には<開始タグ>～～</終了タグ>の形で用いられます。HTMLタグの種類によっては終了タグが存在しないものもあります。
そのようなルールもふまえて、ここではHTML5での書き方をベースにして、XHTML1.0での書き方と比較しながら、基本的なHTMLタグについて紹介します。
では、タグの例を見てみましょう。
<html>
htmlタグは、ファイルがHTML文書である事を示すタグです。
HTML文書では一行目にDOCTYPE（ドキュメントタイプ）宣言というものを記述し、その直下にhtmlタグを記述することがルールになっています。
DOCTYPE宣言とは、HTML文書で使われているHTMLのバージョンを表すための決められた記述です。
【HTML5でのDOCTYPE宣言】
<!DOCTYPE html>
【XHTML1.0でのDOCTYPE宣言】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ご覧の通りHTML5でのDOCTYPE宣言は非常にシンプルです。このようなDOCTYPE宣言の次の行から、htmlタグを開始する決まりです。
<head>
HTML文書の情報を記述するためのタグです。headタグの中にmetaタグやtitleタグ、そしてlinkタグなどを記述して、文書の情報を定義します。
<head></head>
<title>
Webサイトのタイトルを記述します。titleタグで書かれた文字列はページを開いた時のブラウザのタブに表示され、お気に入りに入れた時のページのタイトルとしても表示されます。
<title></title>
<meta>
Webサイトのメタ情報を設定するためのタグです。
HTML文書の文字コードを指定し、検索エンジンの検索結果画面で表示される「概要（description）」や「キーワード（keyword)」を指定するためにも使われます。
metaタグもHTML5とXHTML1.0とでは書き方が少し異なります。例えば文字コードを設定するための書き方ですと、
【HTML5でのmetaタグ】
<meta charset="UTF-8">
【XHTML1.0でのmetaタグ】
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
となります。
先ほど紹介したDOCTYPE宣言と同様にHTML5におけるmetaタグも、シンプルに記述することができます。また、HTML5でのmetaタグには終了タグが存在しません。終了タグをつけてしまうと文法的にエラーになってしまいます。
<link>
linkタグも、headタグの中に記述して指定した文書を参照するためのタグです。これはCSS（スタイルシート）を読み込むときによく使われます。
【HTML5でのlinkタグ】
<link rel="stylesheet" href="style.css" type="text/css">
linkタグもmetaタグと同様に、終了タグをつけてしまうとエラーになってしまいます。
<body>
Webサイトのコンテンツの中身を書くためのタグです。ブラウザで表示される要素はbodyタグの内部に書く事になっています。
<div>
divタグ自体にはHTML文書中に意味はありません。複数のHTMLタグを一つにまとめるために使われる事が多いタグです。HTML5が普及する前には、実際のWeb制作においても頻繁に使われるタグの一つでした。
<span>
spanタグもdivタグと同様にHTML文書中に意味はありません。タグとしての意味はないけど、要素をまとめたり、特定の箇所をCSSで装飾をする（色や大きさを変えるなど）ために使用されることが多いタグです。
<header>
HTML5で新しく追加されたタグです。Webサイトで一番上のタイトルや画像部分、または横並びのメニュー（グローバルナビゲーション）などの箇所で使われます。
※注意点
「headerタグ」は先ほど紹介した「headタグ」とは全く別物です。似ているので注意しましょう。
<footer>タグ
HTML5で新しく追加されたタグです。Webサイトのページ下部にはフッターメニューやコピーライト表記、連絡先などが記載されていることが多く、そのような箇所で使われるタグです。
<p>
文章の段落を構成するタグです。
<h1>～<h6>
Webサイトのコンテンツの見出しを作成するために使われるタグです。
h1見出しが一番大きく、ページのメインとなる見出しに使用されます。以下h2からh6まで数字が増えるほど見出しの大きさは小さくなっていきます。H1～h6までタグの種類を使い分けることで、階層化されたコンテンツを構成することができます。
【HTML】
<h1>h1見出し</h1> <h2>h2見出し</h2> <h3>h3見出し</h3> <h4>h4見出し</h4> <h5>h5見出し</h5> <h6>h6見出し</h6>
<a>
他のページへ移動するリンクを設定するためのタグです。また同一ページ内へのページ内リンクとして使う事もできます。
<img>
HTML文書中に画像ファイルを貼り付けるために使用されるタグです。
画像ファイルとしてよく使われるファイル形式には、「gif」「jpg」「png」などがあります。
【HTML5でのimgタグ】
<img src="image01.jpg">
【XHTML1.0でのimgタグ】
<img src="image01.jpg" />
「空要素」とは、平たく言えば「内容を持たない」要素のことです。
【内容を持つ要素の例】
<p>内容</p>
【内容を持たない要素の例】
<img>
HTML5とXHTMLでの空要素は以下の通りです。
[XHTMLでの空要素]
<area> <basefont> <br> <col> <frame> <hr> <img> <input> <isindex> <link> <meta> <param>
[HTML5における空要素]
<area> <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr>
<HTML>と属性
ここまで基本的なHTMLタグについて解説してきました。HTMLはタグの種類によって使い分けるだけでなく、タグに設定する「属性」を記述することで、タグの設定を変更させることができます。
実はここまでの解説の中で、すでに属性は登場しています。例えば、先ほど紹介したmetaタグによって文字コードを変化させる例を取り上げると、
【HTML5】
<meta charset="UTF-8">
となっていましたが、これを一般的な書き方に置き換えてみると、
<タグ名 属性="属性値">
ということになります。今回のmetaタグですと、「charset」が「属性」、「UTF-8」が「属性値」ということにあります。
また、aタグの例を取り上げると、
【HTML5】
<a href="http://example.com/a.html">ページA</a>
ここで「href="http://example.com/a.html"」の箇所は、「aタグの参照先（リンク先）が『http://example.com/a.html』」であることを表しています。
HTMLにはタグの種類がたくさんありますが、それぞれに設定することができる「属性」に関しても様々なものがあります。特にページ内リンクで使われる「id属性」やCSSで使われる「class属性」はHTMLタグの属性の代表格です。
まとめ
- HTMLタグは「開始タグ」と「終了タグ」から構成される。
- HTML5とXHTML1.0ではタグの使い方が異なる場合がある。
- HTMLタグは属性を付けることで、機能を変更させることができる。
