「あれ？このタグ、終了タグ必要だっけ？」
HTMLのコーディング作業を行なっていて、上記のような状況になった事は無いでしょうか？実際、殆どのタグには、「開始タグ」と「終了タグ」があります。
今回は、終了タグが必要ないタグを纏めてみましたので、ご確認ください。
今回の記事は、次のような方にお勧め！
・終了タグが必要ないタグを把握したい
・終了タグが必要か曖昧になっている
目次
開始タグと終了タグとは？
そもそも、開始タグと終了タグって何の事？
そんな方の為に、解説をしておきます。
開始タグ・・タグの始まりを表す部分の事を指します。
終了タグ・・タグの終了を表す部分の事を指します。タグ名の前に/（スラッシュ）を付けます。
読んで字の如くですね。殆どのタグは、この開始タグと終了タグで囲んでコンテンツを囲みます。しかし、いくつかのタグには終了タグが無く、コンテンツを囲まないものがあります。これを「空要素（コンテンツが無いから）」と呼びます。
・タグには、終了タグがないものが存在する！
・終了タグがないものを、空要素と呼ぶ
終了タグが必要ない、空要素のご紹介
では、終了タグが必要ないタグのご紹介です。サンプルコードも一緒に掲載したので、参考にしてください。
<img>タグ
<img src="画像のパス" alt="画像の代わりになるテキストを入力">こちらは、画像を挿入する時に使用するタグです。src属性に画像のパス、alt属性に画像が表示されなかった場合に代わりに表示させるテキストを指定します。
※alt属性について詳しく知りたい方は、こちらの記事をご覧ください。
<input>タグ
<form action="example.php" method="post">
<p>名前：<input type="text" name="name"></p>
<p>メールアドレス：<input type="text" name="email"></p>
<p><input type="submit" value="送信"></p>
</form>こちらは、フォームの部品を表示する為のタグです。type属性の値を変更する事で、様々な部品に変化します。この値を指定しておく事で、ブラウザが正しい書式かをチェックしてくれます。
| 属性値 | 用途 |
| text | 1行のテキストを入力する欄を作成 |
| メールアドレス入力欄を作成 | |
| tel | 電話番号 |
| url | WEBサイトのURL |
<br>タグ
<p>今日は、いい天気ですね。<br>ただ、明日は雨だそうです。</p>こちらは、改行する為に使用するタグです。上記サンプルのように、改行を入れたい箇所に、<br>と入力すると、改行が入ります。
<hr>タグ
<p>今日は、いい天気ですね。<br>ただ、明日は雨だそうです。</p>
<hr>
<p>来週の天気予報は、<a href="#">こちら</a>から！</p>こちらは、区切り線を引く為に使用するタグです。本文にメリハリを付けたくて、区切り線を作る方法は、CSSのボーダーで調整するなど、色々と方法がありますが、この<hr>を使う方法が最も楽です。
<meta>タグ
<meta charset="utf-8">
<meta name="description" content="WEB業界でちょっと知っているだけでも違うアレコレをご紹介">様々なメタデータを追加する為に使用するタグです。
<link>タグ
<head>
<meta charset="utf-8">
<title>練習用ページ</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>CSSファイル等、様々なファイルにリンクする為に使用するタグです。
終了タグが必要かどうかは、普段使用していても、意外と曖昧になります。
覚えるのが面倒くさい！そんな時は
終了タグが必要ないタグは、それほどないものの、やはり覚えるのが面倒くさいという方もいらっしゃると思います。そんな方は、コードを予測できる機能が付いている、「テキストエディタ」を使用しましょう。殆どの、テキストエディタには、付いている機能ですが、付いていないものもあります。
テキストエディタについて、詳しく知りたいという方は、コチラの記事に詳しく纏めていますので、ご確認ください。
・覚えるのが面倒という方は、テキストエディタを使う事！
まとめ
上記は、普段からコーディング作業を行なっていれば、自然と覚える事が出来るのですが、最初は、中々頭に定着せず、確認する工数が増えてしまう場合もあります。覚えられればそれが一番ですが、難しいという方は、コードを予測できる機能の付いているテキストエディタを使う等で対応していただければと思います。
コメント