HTMLはタグを使用してサイト上に表示するテキスト、画像を表示させます。HTMLを学習し始めたときにそのタグの種類の豊富さに驚くことがあるかもしれませんが、全てを記憶しておかなければいけないわけではありません。今回はHTMLの中で頻出の9つのタグを紹介していきます。まずはここから始めていきましょう。
前提：タグは『<〇〇>～</〇〇>』の形で記述する
タグの書き方についてですが、基本的にはタグは『<〇〇>～</〇〇>』の形で記述されます。
タグの詳しい書き方については開始タグ？終了タグ？HTMLの『タグ』を完全解説で詳しく解説していますので、参考にしてみてください。
今回はタグの中でもbodyタグの中に含まれるタグを詳しく紹介していきます。bodyタグ内に書かれるタグは全て表示されるWebページと直接関係するものですので、そのタグを使用した時、どのようにWebページに反映されるのかも併せて紹介していきます。
headerタグ
headerタグはその名の通りヘッダーを表すタグになります。
ヘッダーとはこのPG集会所ではページ上部の『PG集会所』と書かれている部分を指します。分かりやすく、ページの上のタイトルの辺りという理解で問題ないでしょう。
その領域をまとめるタグとしてheaderタグは存在するため、開始タグと終了タグの間に何を書くのかはそのWebページの制作者次第で変わってきます。
<header>
</header>footerタグはheaderタグと同様にその名の通りのフッターを表すタグになります。
フッターとは このPG集会所ではページ下部のコピーライトなどが表示されている白の背景の部分を指します。こちらもheaderタグ同様に分かりやすく、ページの下の辺りという理解で問題ないでしょう。
そして、footerタグ内に記述する内容もheaderタグと同様に制作者次第で変わってきます。
<footer>
</footer>h1～h6タグ
h1～h6タグはWebページ内で見出しの役割を示すタグになります。
h1タグが一番大きな見出しであり、その次にh2タグ、その次にh3タグと見出しの重要性は数字が『1』に近づくほど重要になっていきます。
最初は気にかけることではありませんが、Webページを訪問するユーザーを増やすために重要な『SEO』の勉強を進めていると、このh1～h6タグの表示順も重大な要素の一つになっています。自分でサイト運営などをする場合は調べてみてください。
<h1>h1タグ</h1>
<h2>h2タグ</h2>
<h3>h3タグ</h3>
<h4>h4タグ</h4>
<h5>h5タグ</h5>
<h6>h6タグ</h6>
pタグ
pタグはWebページ内のテキストを表示させるためのタグになります。
pタグによって書かれるテキストとはサイト内の説明文など、見出しなどには含まれない文章を指し、この後、紹介するulタグ、liタグも一見、テキストに見えないわけではないと思いますが、これらはpタグによっては書かれません。初めはリンクになっていなかったり、リストではない、ただの文章に対して適応するタグという理解で問題ないでしょう。
<p>テキストテキストテキストテキストテキスト</p>
brタグ
brタグはテキストを改行するためのタグになります。
このタグを記述すると、使用した位置で改行し、次の文字からは一つ下の行から文字が表示されていきます。brタグを指定しない場合、デバイス毎に改行の位置が不規則に変わってしまいますが、brタグを指定することで改行位置を任意の位置に固定することが可能となります。レスポンシブデザインへの対応もしやすくなります。
このタグは今まで紹介してきたタグと少し違い、開始タグと終了タグの間に何か文章を記述するわけではなく、brタグを一つ書くことでそこから改行されます。
<p>
テキストテキストテキスト<br>
テキストテキスト<br>
テキスト
</p>
imgタグ
imgタグはWebページ内に画像を表示させるタグになります。
imgタグもbrタグと同様に開始タグと終了タグを使用する形式をを必要としないタグの一つで、画像の絶対パス、相対パスを記述することで、Webページ上に画像を表示させることができます。
<img src="#" alt="画像">brタグ、imgタグについては先ほど紹介した【初心者向け】開始タグ？終了タグ？HTMLの『タグ』を完全解説で詳しく解説していますので、参考にしてみてください。
aタグ
aタグはWebページ内にリンクを作るためのタグになります。
aタグの開始タグと終了タグの間に記述されたテキストはリンクとなり、以下のコードのように記述することで、任意のリンクにクリックによって飛ばすことが可能になります。
<a href="#">これはリンクです</a>
＃の部分にリンクを貼ることで、そのaタグの開始タグと終了タグの間に書かれたテキストをクリックすると、そのリンクにユーザーを誘導することが出来ます。
画像を見て分かる通り、aタグの開始タグと終了タグの間に書かれたテキストはデフォルトでは青文字で表示され、下線が引かれています。
これでもサイトのデザイン上、問題がない場合は良いですが、任意のデザインで変えたい時はCSSを使用することでこのテキスト色の変更や下線を消すことなどができます。
デフォルトで表示されている下線を消す方法はCSS『text-decoration: none;』でリンクの下線を消す方法で詳しく解説していますので、参考にしてみてください。
この記事で詳しく解説していますので、参考にしてみてください。
ulタグ、liタグ
ulタグ、liタグはWebページ内にリストを作る時に使用するタグになります。
ulタグ、liタグはリストを作る時に使用しますが、それぞれに役割があり、ulタグはリストの大枠を作るタグになります。そして、liタグはulタグによって作られた大枠の中のアイテム一つひとつを表示させるためのタグになります。
ulタグ、liタグを使用することによって、前述したpタグではない『・』がアイテムごとに表示されます。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
ulタグ、liタグについてはolタグとulタグの違いって？olタグ、ulタグを解説でolタグと比較して解説していますので、参考にしてみてください。
ulタグ、liタグを使用してメニューバーなどを作るなどの応用的な使い方についてはulタグ、liタグを使用したリストを『display: flex;』で横並びにする方法で詳しく解説していますので、参考にしてみてください。
こちらの記事で解説しているので参考にしてみてください。
今回はHTMLで頻出のタグ9選を紹介していきました。HTMLで使用するタグはここで紹介した以外にも数々存在します。しかし、その全てを記憶しようとするのではなく、HTMLでこんな機能を付けれるタグが存在したなと頭の隅で思い浮かべられれば、後は調べるだけです。無理に覚えようとするのではなく、調べながら、使いながら、自然に覚えていくのが理想です。
