html / の使い分けについて

Question

<meta charset="utf-8"/> <input type="text" value="" /> <input type="hidden" value="" /> <input type="button" value="" onclick="add();"/> <input type="submit"/>

metaやinputの最後に/をつける理由は何でしょうか？どういう意味がありますでしょうか？

同じmetaやinputタグでも/をつけないコードもあるのは何ででしょうか？

Answer 1

HTMLの種類は最近はHTML5が主流ですが、XHTMLという「HTMLをXMLの文法に従って書く」という規格もありました。
XMLでは、タグは、<タグ名 ～～> ～～～～～ </タグ名>という閉じタグのあるものはHTMLと同じですが、単独のタグは<タグ名 ～～ />というという書き方をします。
なので、それはXHTMLで書かれたものでしょう。
HTML5は、/を付けないのが標準だが、付けてもエラーではないということだったと思います。

Answer 2

HTMLとして書く場合は、他の回答にあるように、XHTMLにする場合を除けば/>とする必要はありません。

一方、React.jsでJSXを書く場合は、<input ... />や<meta ... />の形式にする必要があります（React公式）。

Answer 3

8.1.2.1 開始タグ

次に、要素が空要素のいずれかである、または要素が外来要素である場合、単一の"/"（U+002F）文字があってもよい。

これは HTML5 の仕様ですが、空要素の場合はスラッシュが有っても無くてもよいということになります。

これは HTML4 以前には無かった記述です。ではなぜそのような仕様になったかと言うと、XML として扱うこともできる XHTML という規格があり、それとの互換性を保つことができるようにと言われています。

Answer 4

基本的に
閉じタグが無いもの、例えばinput、brなどの終端は　/>　であれということになっています。
基本的にと言いましたがこれはHTMLを拡張、整理したXHTMLの仕様で、詳しく書くとSGMLからXML等々の長い話になってしまうので、そこは後々検索して調べていただければと思いますが

ざっくりいうとXHTMLはHTMLをXMLの形式に則って再定義しているもので、XMLのルールである開始タグと閉じタグはセットで書く、中身が空のタグなら末尾を「/>」にするのも可、というきまりに従っています
なので<br></br>としても動くのですが、互換性の問題などから 「/>」記法にするのがいいとなっているようです

ただXHTML自体は既に開発が止まっていて、HTML5では必ずしもこの形式に従う必要はないのですが、ブラウザはまだXHTMLをサポートしていますよ、という状況です。