【HTML】HTMLタグを書く上での押さえておくべきポイント3選

このページについて

このページではHTMLを書く上で押さえておきたいポイントを解説しています。正しく書いたつもりなのに思った通りにならないとか、そもそも反映されないとかの場合に確認してみましょう。

HTMLは開始タグと終了タグで囲む必要があります。どちらか片方が抜けていたり、そもそも正しくタグが書けていない場合に、反映されなかったりします。

<h1>見出し</h1> //正しい書き方
<h1>見出し<h1> //開始タグと開始タグになっている
<h1>見出し</h2> //開始タグと終了タグが一致していない
<h1>見出し <p> //終了タグが無い

あとはシンプルに打ち間違いによるミスとかもありあえますが、タグの入力ミス関係はこんな感じでしょうか。

HTMLタグはその性質上、入れ子構造になりがちです。入れ子とは「あるタグの中にまた別のタグがある」ような構造の事をいいます。よくあるテンプレートだけ見ても、入れ子構造になっています。わかりやすく書くとこうなります。

まず一番大きなHTMLタグの開始タグ、その次にブラウザに対して情報を渡すheadタグ、そしてメインコンテンツを扱うbodyタグの順に並んでいます。

headとbodyはそれぞれの役割範囲があるのでその役割が終わるタイミングで閉じタグを使用しますが、HTMLの終了タグは全て終わったところに記述します。タグは基本的には役割が終わるタイミングで閉じますが、中にはこんな感じのものもあります。

<ul>
 <li>リスト1</li>
 <li>リスト2</li>
</ul>

これ何かというと、実際にブラウザで表示すると分かりやすいと思います。これです。

これもタグの入れ子構造の1つです。特に最初のうちはややこしいかなと思いますが、これも基本的には役割が終わるたびに閉じタグを書いているだけです。ulがまず全体の大きなタグで、その次にあるliが項目ごとに使うタグになります。

項目が終わるごとに閉じタグを使い、次の項目になったらまた開始タグという感じで構成されていて、最終的に全ての項目を書き終えたらulの閉じタグを書きます。

このようにタグの構造によってはミスが起きやすいので、ちゃんと閉じているかどうかを確認してあげましょう。

HTMLタグは似た意味のタグが複数存在することもあります。それらはものすごい細かい点で異なるから存在するわけなんですが、その一番大きな点が「ブロック」と「インライン」です。

これはどういうことかというと、ブロックはその属性を持つタグを使うと必ず改行っぽくなるという性質を持ちます。逆にインライン属性を持つタグを使った場合、文章の中で使うこともできます。

ブロックの例はpタグ、tableタグ、divタグです。ブロック属性を持つタグを使うとこんな感じになります。

そしてインラインの例はspanタグ、strongタグなどです。これらは文章の途中で使うこともできるので、改行などは発生せずに使えます。

これらの違いはHTMLの時点ではそこまで影響は大きく無いものの、PHPやJavascriptなどで自動的に要素を作って表示するっていう事をするときには非常に大事になってきます。

HTMLタグが正しく認識されないケースのほとんどは入力ミスによるものです。一番分かりやすいものだとtableをtanleとか、ほんの少しのタイプミスが原因だったりもします。

他にはタグの閉じる場所が正しく無かったり、そもそも閉じられていないケースもあり得ます。最初のうちは混乱するかもしれませんが、少しずつ慣れていけば何も考えずにタグを付与する事ができるようになります。