【HTML】サイトを作るのに最低限必要なHTMLタグ
2年以上前に「私がWordPressを使わない理由」というページを書きましたが、今でもちょこちょこアクセスがあるので、HTMLについて書いてみました。
HTMLについては独学で決して詳しいわけではないので、間違っている部分もあるかもしれませんが、ご了承ください。
HTMLとは
HTMLを知らない人のために言っておくと、HTMLとは「HyperText Markup Language」の頭文字なので、マークアップ言語であってプログラム言語ではありません（プログラム言語だと思っている人がいるようなので…）。ハイパーリンクを埋め込んだり目印を付けたりするだけなので、プログラム言語より簡単です（間違った使い方をしてもエラーがでないので、HTMLの方がある意味厄介ですが…）。
HTMLはアルファベットの文字列を「<」と「>」で囲んだ「タグ」と呼ばれる記号を使用します。「<p>文章</p>」のように始まりと終わりの部分をタグで囲むように記述します。終わりのタグは文字列の最初に「/」を入れて、終わりのタグであることを明確にします。中に記述するものがないタグは終わりの部分を書かないものもありますが、基本的には囲みます。
サイトを作るにはHTMLの他にスタイルシートについても知る必要があります。スタイルシートとは、文字の大きさや色などを細かく指定できるものです。HTMLのタグとセットで覚える必要がありますが、このページではスタイルシートについては省き、最低限必要だと思われるタグだけを取り上げました。
HTMLページの全体の構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
コンテンツ
</body>
</html>
<!DOCTYPE html>
このページを作るまで「HTMLの宣言」だと思っていましたが、正確には「HTML5の宣言」みたいです。HTML5の場合は宣言をしてもあまり意味がないと言われているらしいですが、記述しておくのが無難です。
「HTML 4.01」の場合は、長ったらしい記述が必要になるようですが、私は「<!DOCTYPE html>」と記述しています。
<html>〜</html>
HTML文書であることを示すタグです。上の例では「<html lang="ja">」と言語が日本語であることを示す「lang="ja"」を記述しています。
上のHTMLの宣言である「<!DOCTYPE html>」以外は、基本的にこの<html>タグの中に記述します。
<head>〜</head>
検索エンジン向けの説明など、このページのメタ情報（ページ自身の情報）を記述します。タイトル以外はあまりブラウザ上に表示されません。外部ファイルのリンクなどもここに記述する場合が多いです。
今の検索エンジンがどれだけ<head>タグのメタ情報を使っているのかわかりませんが、ページのタイトルを記述する<title>タグと、外部のスタイルシートを読み込む場合はスタイルシートのリンクを記述する<link>タグは必須です。
それと文字エンコーディングを記述する<meta charset="utf-8">もあったほうが良いです。これがないと文字化けして文章がまともに読めないことがあります。日本語の場合は"shift_jis"もよく使われますが、"utf-8"で記述するのが無難です。
ちなみに<meta charset="utf-8">はHTML5の記述方法らしいです。
<body>〜</body>
この中にブラウザに表示させる部分を記述します。
<body>タグ内のタグ
見出し｜<h1>〜</h1>
見出しを表すのに使用します。h1〜h6まであります。<h1>はページのタイトルと同じになる場合が多いです。基本的には<h1>の中に<h2>があり、<h2>の中に<h3>がある、という入れ子構造になるように使用します。書籍などの目次でよく見る「章」「節」を思い浮かべるとわかりやすいと思います。
<h1>〜</h1> <h2>〜</h2> <h3>〜</h3> <h3>〜</h3> <h2>〜</h2> <h3>〜</h3> <h3>〜</h3>
段落｜<p>〜</p>
文のかたまりである段落を表すのに使用します。タグの終わりで改行されます。他に適切なタグがある場合にはそちらを使うほうが良いと思いますが、多くの文章は<p>タグで良い気がします。
リスト｜<ul>〜</ul>
リストを表すのに使用します。箇条書きで表示するのに便利です。使い方は<ul>タグの中に<li>タグで項目を記述します。
<ul>
<li>〜</li>
<li>〜</li>
<li>〜</li>
</ul>
ハイパーリンク｜<a>〜</a>
リンク（ハイパーリンク）を作るのに使用します。テキストや画像を<a>タグで囲み、href属性でURLを指定します。URLの記述の仕方には絶対パスと相対パスがあり、ここでは詳しく言及しませんが、相対パスは同じドメイン（サイト）内でのみ有効です。
ひとかたまりの範囲｜<div>〜</div>
ひとつのかたまりを表すのに使用します。見た目上のかたまりであって、特に意味を持ちません。サイトのレイアウトによく使われます。
HTML5では、意味を持つかたまりを表すタグが追加されているので、適切な場合はそちらを使うほうが良いと思いますが、私はすべて<div>タグで済ませていますｗ。