HTML5のタグの数は煩悩と同じ108個。全部覚えるのは大変です。もちろんHTMLタグを全部覚える必要はなく、主要なタグを抑えておけばまずはOK！
そこでここでは主要なタグをご紹介します。

body内に使えるタグ

見出しを書くときはh1〜h6タグ

見出しに使うタグ。こんな感じで使います。

ここに見出しを書く
ここに見出しを書く
ここに見出しを書く

h1から6まであり、数字が小さい方が重要度が高くなります。大体そのページで一番伝えたい見出しをh1に使うことが多く、その下にh2, h3…と続きます。
ページ内で複数使ったりと、見出しはひとつとは限りません。
ちなみにこのページだとタイトルにh1を使い、各見出しがそれぞれh2,h3,h4…と設定されています。

本文を書くには<p>

本文（パラグラフ：paragraph）を書くときに使うタグ。かなり使用頻度は高いです。
例えば、先ほどの見出しタグと併用して使うことが多くなります。

一例：

パソコンの種類

日本語でウィンドウズといい、マイクロソフト社が提供する市場シェアは90％にものぼるOSです。
発売開始時期
windowsが発売を開始したのは…
バージョン
今までのバージョンは…
Mac
マッキントッシュの略でアップル者が販売しているコンピュータの名称です。
発売開始時期
macが発売を開始したのは…
バージョン
今までのバージョンは…

見出しの中に本文をpタグを使って構成されているのがわかるかと思います。

改行するときは<br>

改行するタグです。brakeの先頭2文字と考えると覚えやすいです。
よく<p>の中で使用するケースが多いです。間違われやすいのですが、<br>で要素と要素の間の余白を作ると閲覧する環境により余白の高さが違うので、意図せぬ崩れや見た目の違いを生むため、お勧めしません。

例：

明日は明日の風が吹く。明日は明日の
風が吹く。

実際の表示例：

画像を表示させる<img>

画像を表示させたいときにつかうタグです。これはタグ単体では使わず、必ずセットでsrcというのがついてきます。
今までは<h1>とか<p>とかタグ単体で動いていたHTMLタグでしたが、<img>タグは単体では意味を成しません。ここで新たに出てくるのは「属性」です。

この図で説明すると、

タグというのはimg
そこに属性であるsrc（ソースと読みます）があり、属性srcの値はapple.jpgという画像ファイル
属性はタグによって有効にならないケースもあります。例えばh1タグにsrc属性は使えません。
値のapple.jpgのスペルが違っていても、ダブルクオーテーションがなかったりしてもダメ。
よく「終わりのダブルクオーテーションを付け忘れた」とか「srcのスペルを間違えた」とかいうケースがあるので、意図した表示になっていないときはもう一度きちんと打てているか確認しましょう。

リストを表示する<ul>, <li>

次はリストを表示させるためのタグ、<ul>と<li>です。このタグは2つでセットです。
リスト、というと想像しずらいですが要は箇条書きにする一覧を表示したいときに使うという感覚です。
サイトのヘッダーにあるメニュー（グローバルメニュー）にもよく使われます。

例：

いちご
スイカ
メロン
梨

ul(ユーエル)ってなによと思う方、正しいです。英語でUnordered Listの略で、日本語で言うと「未定義リスト」と言います。定義されてないリスト、定まってないリストです。
<ul>に非常によく似た、<ol>というのがあるのですが、これは英語で「Orderd List」、つまり「定義されたリスト」です。

以下のように使います。

2012年　検索数ランキング

YouTube
Facebook
Amazon
楽天

ulとolの違い、わかりますか？

ulは定義されていなくて、olは定義されている。この「定義」の意味ですが、順番になっているかどうかというのがキーになっています。
ulの方はただ果物が羅列されているだけですが、olの方はランキング数が上から順番になっています。

試しにこれをHTMLで書いてみると、こんな風になります。

ulは中丸、olの方は連番になっていますね。これは「olが定義されたリストなので、連番として表示する」という仕様です。
連番のリストはol、そうじゃない他のリストはliとおぼえておきましょう。

要素を囲うのに使う、<div>

次はdivタグです。英語のdivisionの略で、読み方はディブっていうことが多いですね。
こいつはタグや文章や画像など、まとまったものを囲うときに使います。

画像例：

ピンク色がメインエリアのdivで、各タイトルや文章などを囲っている大きなdiv。青い方がサイドバー全体を囲っているdiv
もちろんそれぞれのdivの中はいろんなタグが入っているので、かなり省略して書きますが以下の様なHTML構成になります。

ここでなんか変だな、とおもった方は鋭い。今まででてきたタグと、このdivタグ、大きな違いがあるんですが気づきましたか？

ちょっと考えてみてください。

・

・

・

わかりましたか？
答えは、「今までのタグにはちゃんと意味があったのに、divタグには特定の意味が与えられていない」ということなんです。
例えばh1は見出し、pは文章、imgは画像、ul&liはリスト…などなど、明確な意味がありました。imgタグで見出しは作れません。pタグで画像は出ません。

これらに対し、divは意味を持っていないタグなんです。なので、divの中にh1やimgがはいっても、文章がはいってもOK。
レイアウトやブロック要素として仕切りたい場合に使うことが多いです。ブロック要素に関してはまた別の機会に。

divの代わりに行内で使う場合の<span>

今度はspanタグです。スパンと呼びます。これはdivと同じように要素を囲うときに使うケースが多いです。例えば以下。

こういったように、文章内で特定の部分だけ変化させたいときなどに使います。変化させるのはCSSなことが多いので、今は使うケースがイメージできないかもですが、そのうち多様するようになります。
上記の画像はHTMLにするとこんなかんじ。

「我々に明日は来るのだろうか？」ルシウスが尋ねた。彼がこんな畏まって聞くことは決まって答えを求めていないことを私は知っている。

このspanになった部分に後々CSSを適用させていくわけです。
行内ならspan、いろいろな要素をいれるならdivと今は大雑把に覚えておきましょう。

タグではないけど、良くHTMLで使うコメントアウト

タグではありませんが、良く使うもので覚えておいて損はないのでご紹介。
コメントアウトと言って、忘れないようにメモを残したり、後々見返した時に「これは書いておいた方がいいんじゃないの」「他の人が見るときにこれは知っておいた方がいい情報だ」というテキスト情報をメモ的に残しておけます。実際には表示されません。

例：

ここはコメントアウトにならない
<-- これもビックリマーク（！）が抜けてるのでコメントアウトになりません-->

上記は1行目だけしかコメントアウトにならず、2-4行は表示されるので注意。
はじめのうちは後で見返した時に自分でちゃんとわかるように、コメントアウトを多用してhtmlファイルのなかにどんどんメモしていきましょう。
っていってもパスワードとか第三者に見られて困るものは残してはいけませんよ。