HTMLではタグと呼ばれるマークアップ言語を使用します。
そしてタグには様々な種類があるため、一度に全てを把握しようとするのはあまり現実的ではありません。混乱してしまいます。（説明する僕が）
そこで今回は、「タグってなに？どんな感じ？」をテーマに、HTMLのタグについてざっくりと解説していきます。
HTMLを一言で言い表すならば、Webページが適切に表示されるように、テキストにタグをつけてマークアップするものです。
では、タグってそもそも何なのでしょうか？
一般的には、洋服などに値札と一緒についている、サイズやロゴが入った小さなカードのことをタグと言います。
そして、商品の補足説明をしたり商品に印をつけるという意味では、HTMLにおけるタグも、まさに同じ意味です。
人間であれば、見た目で目立たせれば、その部分は重要であるということが分かりますが、Webページ（HTMLファイル）を解析するWebブラウザは、見た目では判断できないので、コンピュータにも分かるようにマーク（印）をつけてあげる必要があるんですね。
＃用語解説：Webブラウザ（browser）
本記事では、HTMLに出てくるタグを全て解説するのではなく、タグの役割や、タグをHTMLに挿入する時の基本的なルールなど、Web制作初心者がまず最初に押さえておきたい知識をお伝えしていきます。
HTMLファイルはブラウザに解析されて、最終的にはWebページとして表示されるわけですが、Webページは様々なパーツから成り立っています。
ヘッダー（header）と呼ばれる、Webサイトの上部にホームページタイトルなどを配置するスペース。
ナビゲーションメニューの部分。
記事のタイトル部分。
記事の文章（段落）の部分。
などなど。他にもたくさんあります。
そして、上記の赤字で示した部分は、全て対応するHTMLのタグが存在します。
どれが何のパーツであるのか、HTMLを解析するブラウザに正しく理解してもらうために、マークアップする（印をつける）必要があり、その印こそが「タグ」というわけです。
HTMLのタグの種類は2021年現在、全部で108ありますが、文章だけでなく画像や動画といったメディアファイルも含めて様々なパーツを配置できるようになっています。
HTMLはそもそもテキストのみで構成されるファイルですから、本来は画像などテキストではないものを、そのまま貼り付けて掲載することはできません。
そこで、外部ファイルをロードさせる（読み込ませる）ことで、テキスト以外のファイルもWebページに表示させることができるようになっています。
ぶっちゃけテキストであれば、それがタイトルであろうと、段落であろうと、補足的な説明であろうと、全て同じタグを使用してもWebページの表示自体には支障ありません。
CSSでそれぞれフォントサイズやカラーを変えれば、見た目的にはそれっぽくできるからです。
ですが、画像などテキスト以外の要素に関しては、対応するHTMLのタグを使用しなければ、基本的にファイルの埋め込みができません。
HTMLのタグには、パーツに印をつけて明確にするというだけでなく、外部のファイルを参照する（読み込ませる）という役割もあります。
特に画像の読み込みのタグは、ほとんど全てのWebサイトで使用されています。
＃用語解説：CSS（シーエスエス）
また、Webページには表示されない裏設定（表示言語の設定など）も、HTMLのタグを用いて設定されています。
基本的には、タグはWebページのパーツに印をつけるものという認識で良いのですが、その認識だけだと説明が付けづらいものもあるので、ざっくりとしたイメージを持つぐらいがちょうど良いと思います。
HTMLのタグは、特定のキーワード（英数字）を山カッコ< >で挟むことで成立します。
大きなタイトルを表すタグに「h1」というものがあるのですが、これをタグとしてHTMLファイルに挿入するには、次のように記載するということになります。
< h1 >
※文字が見やすいように半角スペースを開けています。
しかし、実はこれだけではありません。タグには開始タグと終了タグの２種類があり、上の例は終了タグが足りていない状態です。
終了タグは、山カッコ < > でキーワードを挟むという点は開始タグと同じなのですが、キーワードの前に／（スラッシュ）を入れます。
終了タグを付け加えると、h1のタイトルタグは次のようになります。
< h1 > < /h1 >
そして、開始タグと終了タグの間に、コンテンツ（ここではタイトルテキスト）を入れ込むことで、１つの要素が成り立ちます。
< h1 > タイトルを記入 < /h1 >
これで、h1タグを使用したタイトルの完成です。これまでの解説を図で表すと以下のようになります。
また、タグの中にタグを入れ込むことを、入れ子と言います。
たとえばヘッダーというパーツの中に、タイトルというパーツを入れる場合、以下のような構造になります。
<header>
<h1>タイトルを記入</h1>
</header>
これがHTMLのタグの基本的な構造です。
ですが、中には終了タグがないタグも存在します。
終了タグがない代表的なタグとしては、画像を挿入するためのimgタグや、改行を入れるためのbrタグがありますが、種類としてはそんなに多くはありません。
基本的には、開始タグと終了タグの２つが存在すると思っておいて大丈夫です。
HTMLのタグには、属性と属性値と呼ばれるものを設定することができます。
属性を設定しなくても問題ない場合もあれば、属性と属性値を設定しなければタグとしての役割を果たせないものもあり、属性の種類も様々です。
本記事では属性にどんなものがあるのか詳しく解説するのではなく、HTMLのタグの構造として、タグのどの部分が属性と呼ばれるものに該当するかという、基本的なところを解説します。
まずは以下のサンプルをご覧ください。
<header>
<h1 class="title">タイトルを記入</h1>
</header>
大きなタイトルを表すh1の開始タグの中に、class=”title”という文言が追加されています。
この部分が、属性と属性値と呼ばれるものになります。
ちなみに、class=”title”というのは、h1のタイトルタグに「title」というクラス名をつけるという指定になりますが、クラス名とは何なのかといった解説は今は置いておきます。
ここで重要なのは、classが属性で、titleが属性値ということです。
この属性と属性値という言葉は、Web制作の現場で割と頻繁に使用されます。
たとえば、クライエントさんからimgタグのalt属性は必ず設定をお願いします。という指示がある場合があります。
また、HTML/CSSの次の段階としてJavaScriptを学び始めると、HTMLの○×要素の△属性を取得して、属性値を書き換える…といったプログラム処理がよく出てきます。
なのでHTMLを学んだ後、実際の案件を受けたり、プログラミングを学んだりするためにも、まずは属性と属性値があって、それはHTMLのタグの開始タグの中に書き込むものということを理解しておくことが大切です。
属性と属性値については、一度に全てを把握・学ぼうとするのではなく、必要に応じて、「タグ名 ＋ 属性名」で検索して調べるというスタイルが良いと思います。
CSSなどにも言えることですが、あまり使用頻度の高くない属性について一生懸命調べても、効率面ではあまりよくないですからね。
HTMLのタグには属性と属性値を設定できることを説明しましたが、タグに属性を設定する場合は以下のルールに従う必要があります。
＊属性・値の設定ルール＊
１開始タグ名の後、半角スペースを空ける ○ <h1 class="title">タイトルを記入</h1> × <h1class="title">タイトルを記入</h1> ２属性値の前にイコール＝をつける ○ <h1 class="title">タイトルを記入</h1> × <h1 class"title">タイトルを記入</h1> ３属性値はダブルクォーテーション" "で囲む（フォントに注意が必要！） ○ <h1 class="title">タイトルを記入</h1> × <h1 class=title>タイトルを記入</h1>
上記のルールの中で一番注意が必要なのが属性値をダブルクォーテーションで囲むという点です。
ダブルクォーテーションで囲むのを忘れてしまうことはあまりないと思いますが、フォントがHTMLを記述するためのものと異なるために、属性値として認識されないということはよくあります。
というのも、HTMLやCSS、プログラミングはブログ等で公開されているコードをそのままコピペすることが多いです。しかし、中には、
" "
ではなく、
” ”
で表記している記事も多く、これをそのままコピーして貼り付けると、「見た目のコードは完璧に正しいのに、なぜかエラーになる」ということになります。
テキストエディタを利用して、自分で全て一からHTMLを作成する場合は特に問題になりませんが、一部分でも外部のサイト等からコピペする場合は気をつけましょう！
＃用語解説：テキストエディタ（text editor）
その他、半角ではなく全角スペースを空けてしまうというのも、最初の頃はやりがちなミスです。
日本語のWebサイトを作る場合、どうしても全角と半角入力を頻繁に切り替えることになるので、スペースを空ける必要がある時も要注意です。
HTMLのタグは、タグとして認識されるワードを山かっこ< >で挟むと説明しましたが、逆に言えばワードを山かっこで挟んでしまうと、文章として表示させたくてもタグとして認識されてしまうということになります。
たとえば、今回のブログで例として紹介したように、
<h1>
と表示させたいからといって、そのまま半角の山かっこを使うと、タグとして認識されるので表示されません。
普通はあまり困ることはないのですが、HTML/CSSやプログラミング関係のブログ記事を書きたい場合に少し困ります。
この問題を解決する方法は、大きく分けて２つです。
１つは、全角の山かっこを使う方法。
タグに限らず、HTMLは日本語の文章部分以外は全て半角英数字を使用します。
全角であれば記号でも「文字（文章）」として扱われるので、タグとして認識されることはありません。実際にやってみましょう。
＜h１＞
問題なく表示できましたね。
ですが、どうしても半角で表示させたいという場合もあると思います。それが２つめの解決方法です。
２つめの方法は、HTMLの特殊文字を仕様する方法です。
HTMLには特殊な記号をテキストとして表示できるよう、特殊文字という機能が備わっています。
今回のように、半角の山かっこを表示させたい場合は、以下のように記載することで、それに対応した記号を表示させることができます。
< → <
> → >
つまり、<h1>と表示させたい場合は、<h1>と書けば良いということですね。
これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。
サブでWebデザイン・フロントエンドエンジニアとしても活動しています。
📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI
🎓資格：基本情報技術者/ウェブデザイン技能検定３級
