HTMLは、タグというものを使ってテキスト情報にマークアップをすることで文章に意味付けを行います。ここではタグの書き方やルールについて解説していきます。

要素の開始と終了を示すタグ

HTMLにおいてマークアップするとは、テキストの「ここからここまでの範囲」というように、文章の内容に応じたタグで区切りの始まりと終わりに印を付けていくことになります。タグには挟む文章の意味や役割に応じた様々な種類が用意されています。

タグは「要素名（役割を表す名前）」を「 <（山括弧）」記号と「 > 」記号で囲ったもので、通常「開始タグ」と「終了タグ」の2種類があります。終了タグは開始タグの要素名の前に「 /（スラッシュ）」を追加したものです。

タグでマークアップされた要素

タグは開始タグと終了タグで中身（内容）のテキストをはさんだものが基本で、文章の範囲を指定しながら内容に応じたタグで区切っていきます。タグによって区切られた文章一つのかたまりを開始タグと終了タグを含めて全体を「要素」と呼びます。

例えば、要素名「p」のタグは「<p>タグ」と呼び「段落」をマークアップするためのタグです。<p>タグで囲まれた範囲（<p>タグを含めて）を「p要素」と呼びます。段落を表す<p>タグで文を囲うことでここからここまでが段落であると指定する（コンピュータに伝える）ことができます。

<p>「p要素」は「段落」を意味します。</p>

開始タグのみの要素

要素の多くは開始タグと終了タグをセットで使用しますが、内容を持たない要素もあります。その場合は終了タグは必要ありません。このような内容を持たない要素を「空要素」といい、開始タグのみの要素となります。例えば次のようなタグがあります。

• <img>・・・画像を挿入するタグ
• <br>　・・・改行を挿入するタグ
• <hr>　・・・区切り線を挿入するタグ

img要素は「画像」、hr要素は「区切り線」、br要素は「改行」の挿入位置を示すための要素で、内容がありません。そのため終了タグが必要のない空要素になります。

タグの属性と属性値とは

属性とは要素に対して補足的に情報を付け加えるものです。属性はその名前とそれに対する値をセットにして「属性="属性値"」という書式で使用します。
属性は必ずつけなければならないものではありませんが、無ければ意味のないタグなどもありますので必要に応じて追加していきます。また、使用できる属性はタグによってが決められています。

a要素はハイパーリンクを設定するためのタグです。<a>タグに挟まれている範囲にハイパーリンクを設定することができます。その参照先（リンク先）がどこなのかを指定するのが属性になります。<a>タグには参照先を指定するための「href」という属性があります。

<p href="https://example.com/">ハイパーリンク</p>

属性は複数指定する事ができます。その場合「属性="属性値"」のセットを半角スペースで区切って連続して記述します。

<p href="https://example.com/" target="_blank">ハイパーリンク</p>

HTMLの入れ子構造

タグの内側にタグを書くことを「入れ子」と呼びます（プログラミングの世界では入れ子のことを「ネスト」とともいいます）。タグを別のタグで囲うことで要素の中に要素を入れることができます。入れ子にすることで階層のような形で要素をひとまとまりのグループとして扱うことができます。このようにすることを「構造化」といいます。

入れ子は何重にも入れ子になっていいのですが、タグ同士が交差して入れ子がずれてしまってはいけません。

タグの入れ子がズレて交差してしまうと、CSSやJavaScriptでのエラーの原因にもなり、ブラウザでの表示が崩れたり正しく動作しない場合もあります。

また、このような入れ子の構造は親子孫・兄弟関係を使って表されます。入れ子になったタグ同士は親子関係を持ち、外側の要素を「親要素」、内側の要素を「子要素」と呼びます。そして、同じ階層にある 要素同士は「兄弟要素」といいます。