HTML Learner
HTML を書きながら学んでいくページです。
左側のメニューから内容を選んでください。各項目について、右下にある「Run Pen」を選択すると実行結果を見ることができます。「Run Pen」を実行後、「HTML」タブ下の内容を実際に変更することができます。
段落
段落を作るためのタグが p タグ（段落：paragraph）です。<p> と </p> の間に文章を入れることで、段落を定義することができます。
試しに、p タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen p by Yu Sekiguchi (@vtmacs003b) on CodePen.
タグは英小文字で
HTML で使われるタグは（半角の）英小文字で入力することが一般的です。（半角の）英大文字でも正しく動作しますが、すべてのタグを小文字で書くことが、一貫性や信頼性などのために推奨されています。
見出し
見出しを作るためのタグが h タグ（見出し：header）です。h1 から h6 まで用意されています。
試しに、h タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen h by Yu Sekiguchi (@vtmacs003b) on CodePen.
見出しはどう使う？
h1 から h6 まで見出しがあるのは、文書構造を区分けするためです。
See the Pen h_sample by Yu Sekiguchi (@vtmacs003b) on CodePen.
グループ化
グループ化するためのタグが div タグ（分割：division）と span タグです。グループ化することで、文章構造がより見やすくなったり、CSS で制御をしやすくなります。
div タグの内外には他のタグを入れることができます。div タグの前後には改行が入りますが、span タグの前後には何も入りません。そのため、span タグは文章中に入れることが多いです。
試しに、div タグと span タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen div by Yu Sekiguchi (@vtmacs003b) on CodePen.
改行
HTML では普通に改行しても改行がされません。改行するためのタグが br タグ（改行：line break）です。
試しに、br タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen br by Yu Sekiguchi (@vtmacs003b) on CodePen.
リンク
他のサイト・ページへのリンクを作るためのタグが a タグ（アンカーリンク：anchor link）です。
試しに、a タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen anchor by Yu Sekiguchi (@vtmacs003b) on CodePen.
URL の種類
絶対 URL は「http」「https」から始まる URL のことです。このサイトのサンプルで使っている URL はすべて絶対 URL になっています。
相対 URL（相対パス）は、今いるページから相対的に見てどの位置にいるのかを示す URL（パス）になります。このサイトでは扱っていません。
強調
強調するためのタグが strong タグ（強調：strong）と em タグ（強調：emphasis）です。どちらも強調を表しますが、strong の方がより強い強調を表します。
また、多くのブラウザで strong はボールド体（太字）、em はイタリック体（斜体）で表示されますが、ボールド体やイタリック体を明示的に利用したい場合は、CSS を使いようにしましょう。
試しに、strong タグと em タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen strong by Yu Sekiguchi (@vtmacs003b) on CodePen.
画像
画像を入れるためのタグが img タグ（画像：image）です。
試しに、img タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen img by Yu Sekiguchi (@vtmacs003b) on CodePen.
alt は必要？
上のサンプルにおいて、alt の部分を削除しても表示に何も変化はありません。alt は alternative（代替）の意味で、視覚障害などを持っている方でも音声を通じて画像の意味を伝えるために使われます。そのため、img タグにおいて alt を省略することは推奨されていません。
また、ブラウザによっては画像の上にポインタを持っていくと alt に入れた内容が表示されるものもあります。
表
表を作るためのタグが table タグ、tr タグ、 th タグ、td タグです。
table タグは、表全体をまとめるために使います。
tr タグ（table row）は、表の行をまとめるために使います。
th タグ（table header）は、表の各列の見出しのために使います。
td タグ（table data）は、表の値のために使います。
試しに、これらの表のタグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen table by Yu Sekiguchi (@vtmacs003b) on CodePen.
リスト
HTML にはリストが 3 種類あります。「順序付きリスト」「順序なしリスト」「説明リスト」です。
「順序付きリスト」には、ol タグ（ordered list）を使います。リストの各要素には li タグを使います。
「順序なしリスト」には、ul タグ（ordered list）を使います。リストの各要素には li タグを使います。
「説明リスト」には、dl タグ（description list）を使います。説明する言葉には dt タグ（description term）、その定義・説明には dd タグ（difinition / description）を使います。
試しに、これらリストのタグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen list by Yu Sekiguchi (@vtmacs003b) on CodePen.
区切り線
横（水平方向）に区切り線を入れるするためのタグが hr タグ（水平方向の罫線：horizontal rule）です。
線の幅や太さを変えたい場合は、CSS を使うようにしましょう。
試しに、hr タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen hr by Yu Sekiguchi (@vtmacs003b) on CodePen.
コメント
HTML の編集時に前のものを残しておきたい、次に公開する予定のものを予め載せておきたい。あるいは、他の人や後で自分が HTML を読んだときに何をしているか示しておきたいということがあります。<!-- コメント --> のように記載することで、実際には表示がされないようになります。
試しに、hr タグを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。
See the Pen comment by Yu Sekiguchi (@vtmacs003b) on CodePen.