HTMLのタグについて

こんにちは。いつもブログを見ていただきありがとうございます。
前回、「HTMLについて」というテーマでご紹介しました。その中でHTMLのタグについても解説しましたが、今回はHTMLのタグについてもっと詳しく解説していこうと思います。

HTMLのタグとは

HTMLは<>で囲まれた『タグ』を組み合わせて記述していきます。

一部例外はありますが、<xxx>~</xxx>という感じで記述します。

※最後のタグ(終了タグといいます)には『/』が入ることに注意してください。
書き忘れなどがあると、表示が崩れる原因になります。

HTMLのタグの種類

HTMLのタグは100以上あります。その中でも主要なものを紹介していきたいと思います。

●hタグ(見出し) <h1>~</h1>

見出しを設定したいときには<h1>、<h2>~<h6>などのhタグを使います。

見出しにしたいテキストを<h1>と</h1>で挟むようにして記述します。※用途に合わせて数字を変えていきます。

<h1>タグはコンテンツのテーマを表します。
<h2>タグ大きな見出し(大見出し)になり、数字が小さくなるにしたがって、<h3>タグは中位の見出し(中見出し)、<h4>~<h6>タグは下位の見出し(小見出し)という意味になります。
※hタグの記述は順序を守る事が大切と言われているので、階層を意識して必ず<h1>から記述するようにしましょう。

hダグを適切に設定すると、検索エンジン・ユーザどちらに対してもメリットがあります。主な3つのメリットを解説します。

SEO評価が上がる

hタグに対策キーワードを含めることで、ページ内容とキーワードの関連性を検索エンジンに正しく伝えることができるため、SEO評価の向上が期待できます。

例えば、「SEOツール」というキーワードでコンテンツ作りをするなら、「SEOツールの選び方」「SEOツール導入のメリット」など関連キーワードを含めたhタグを設定しましょう。

文章が読みやすくなる

トピックごとに見出しを作ることで、コンテンツの読みやすさが格段に上がります。hタグで囲まれたテキストは本文よりも大きく表示され、視覚的に情報が得やすくなります。

ユーザが読みやすいコンテンツになり、ユーザビリティの向上につながります。hタグを簡潔に記載すると、見出しを見ただけでコンテンツの概要を掴みやすくなります。

目次を作りやすくなる

hタグで見出しの設定をしておくと、目次が作りやすくなります。例えば、WordPressにはhタグをもとに目次を自動生成できるプラグイン機能があり、導入部分に簡単に目次を表示させることができます。

目次が最初にあれば、ユーザはコンテンツの概要を大まかに把握し、自分の知りたい情報が記載されているか判断することができます。また、コンテンツのボリュームが大きい場合でも、ユーザが読みたい部分に絞って読むことができるため、ユーザビリティが向上します。

●pタグ(段落) <p>~</p>

一つの段落を表したいときには<p>タグを使います。

テキストや画像を<p>と<p>で挟むようにして記述します。
<p>~</p>のひとかたまりが、ひとつの段落を表します。

●aタグ(リンク)　<a href=””>~</a>

リンクさせたいテキストや画像を<a href=””>と</a>で挟むようにして記述します。
href属性には、リンク先の値(URLやファイル名)を入れます。

href属性の値は絶対パスか相対パスで記述します。

絶対パスとは、URL(例：https://~~)で指定します。
相対パスとは、現在いるファイルを起点とした、目的のファイルまでの経路のことです。
ドメイン部分を省略するため、次の例のような現時点のファイルの位置だけを示します。(例：abc.jpeg)

●imgタグ(画像)　<img src=”” alt=””>

画像はimgタグを使って表示します。imgタグには終了タグ(</img>)は必要ありません。

src属性に、画像ファイル(GIF,JPEG,PNG,PDFなどのファイルのURLやパス)の場所を示す値を入れます。src属性の値は絶対パスまたは相対パスで記述します。

alt属性は、画像のテキストによる説明で必須ではありませんがアクセシビリティのために、書いておくことをおすすめします。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストとして表示されます。

●brタグ(改行) <br>

brタグとは、テキスト文章の行を変える(改行する)時に使うタグです。

●tableタグ(表) <table>~</table>

●strongタグ(強調) <strong>~</strong>

強調したいテキストを<strong>と</strong>で挟むようにして記述します。

●divタグ(グループ化) <div>~</div>

divタグは、特にタグの意味を持たずに「要素を一括りにする」という役割があります。

さいごに

今回はHTMLのタグについて紹介しました。興味を持たれた方は、無料での勉強サイトなどもありますので一度トライしてみてはいかがでしょうか。