HTMLでは『タグ』を使うことにより、見出しや文章、画像などをサイトに表示させることができるようになります。今回は初心者にも分かりやすいように『タグ』の使い方を解説していきます。
・基本的には『<〇〇>～</〇〇>』この形でタグを使う
HTMLでは基本的には『<〇〇>～</〇〇>』この形で表記されます。最初の『<〇〇>』の部分を『開始タグ』、『</〇〇>』 の部分を終了タグといい、開始タグと終了タグの間に表示させたい見出しや文章を打っていくことで、サイトにも反映されます。
<p>本文です</p>
今回はpタグの開始タグと終了タグの間に『本文です』という文章を打ちこみました。上記の画像を確認いただいて分かるようにサイトには『本文です』という表示が反映されていることが分かります。このように『開始タグ』と『終了タグ』の間に表示させたい文字を打ち込むことでサイトに反映されます。
開始タグと終了タグの違いとして、終了タグのタグ名の前にある『/』が挙げられます。終了タグに『/』を付け忘れると、エラーが起こり、サイトにコードが正常に反映されないので、注意が必要です。エディターの設定によっては開始タグが打ち込まれるタイミングで終了タグも打ち込まれることも多いです。この設定はエディター毎にやり方が変わっていきますが、必ずしておく設定の一つといえるでしょう。
終了タグを省略できるタグが存在する
先ほど、開始タグと終了タグの間に表示させたい見出しや文章を打ち込むと紹介しましたが、終了タグを省略して使えることのできるタグが存在します。その例として代表的な『imgタグ』と『brタグ』の使い方を解説していきます。
imgタグ
『imgタグ』は画像を表示するためのタグになります。まずは下記のコードを見てください。
<img src="#" alt="画像">『開始タグ』、『終了タグ』がないと説明しましたが、コードを見て分かるように『<〇〇>』の形で記述していきます。
『img src』は『画像(img)のソース(src)』ということを表しています。今回はそのあとに『=”#”』を付けましたが、これはclass属性などを指定するときと同じことなので、『#』の部分に画像のソースを書くことで、画像を表示させることができます。ここでいう画像のソースとは画像の『絶対パス』、もしくは『相対パス』のことです。これを書くことにより、画像を表示させることができます。
『img src=”#”』の後の『alt』ですが、これもclass属性などと同じ、属性の一つです。この場合の『alt属性』では画像の表示が何らかの理由で出来なくなった場合、その画像の代わりになる文章を表示させます。書き方としては先ほど紹介した書き方やclass属性などと同じで『=”〇〇”』この形で書いていきます。今回の『画像』の部分に文章を書くことで、画像が表示されなかった場合、その部分の文章が表示されます。
このようにして画像を表示されるときには『終了タグ』は書く必要がなく、『<〇〇>』のような形で書くことで画像を表示させることが可能となります。
brタグ
『brタグ』はテキスト中に段落を変えることができるタグになります。下記のコードを見てください
<p>
テキストテキストテキスト<br>
テキストテキスト<br>
テキスト
</p>
画像を見て分かるように、『brタグ』はそれを書くだけで改行することができます。指定がないと、文章が横幅いっぱいになった時に改行されますが、意図的に改行したい時には『brタグ』を使うことで段落を変えることができます。
今回はHTMLでのタグの使い方について解説してきました。簡単なことですが、その分ケアレスミスも多い部分でもあります。先ほども紹介しましたが、エディターの設定でそのミスも減らせることができるのであなたの使っているエディターでも設定してみてはどうでしょうか。
