HTMLのタグには多くの種類があります。

ここでは頻繁に使用するタグについて学習しましょう。

HTML には 多くのタグがあります。
ここでは基本的なタグについて、どんな役割があるかについて学習します。

下の表は、今回学習するタグの簡単な説明です。

要素 簡単な説明
<h1>, <h2>,
<h3>, <h4>,
<h5>, <h6>
見出しタグ(見出し1〜見出し6)
<p> 段落タグ
<hr> 横線タグ(テーマの区切り線)
<a> ハイパーリンクタグ(ページの遷移など)
<ul>, <li> 順序なしリストタグ
<ol>, <li> 順序付きリストタグ
<img> イメージタグ(画像の表示)
<div> 汎用タグ(特に意味はないが汎用的に使用できる)
<span> テキストタグ(特に意味はないがテキストを囲む際に使用する)

その他の HTMLタグ については以下のページで確認できます。
HTML 要素リファレンス – HTML: HyperText Markup Language | MDN 

見出しタグ

見出しタグには h1 から h6 まで 6段階 あります。
h1 はページの見出しを設定します。このページの見出し1は「【HTML】頻繁に使用するタグ」になります。

h2 からは 各セクションごとの見出しを設定します。

見出しタグの使い方


<h1>このページの見出しです</h1>
                
  • h1タグはSEO(検索エンジン最適化)にとって重要な役割があります。必ず設定しましょう。​

段落タグ

pタグは、テキストの段落を示します。
以下の、「おはよう」と「こんにちは」はそれぞれ pタグを使用しています。

おはよう

こんにちは

段落タグの使い方


<p>段落するブロックです。</p>
                

横線タグ

hrタグは、セクションごとの区切りを表します。

使用すると以下のように横線が引かれます。
*環境によって色や太さが異なります


横線タグの使い方


<hr>
                

ハイパーリンクタグ

他のWebページ、ファイル、メールアドレス、同じページ内の場所などのハイパーリンクは aタグ を使用すれば表現できます。

a(エー)タグ」 や 「アンカー(anchor)タグ 」と呼ばれます。

aタグの href属性に リンク先のURLやメールアドレスを設定します。
以下は、このサイトのトップページに遷移するリンクです。

Rabico – RAKUMA

aタグの使い方


<a href="https://rabico.dev">Rabico - Rakuma</a>
<a href="https://prograbi.com" target="_blank">PROGRABI - ITオンラインスクール</a>
<a href="mailto: demo@example.com">メールを作成する</a>
                
  • target属性を_blankに設定すれば新しいタブでページを開くリンクを作成できます。

リストタグ

リストには 順序なしリスト と 順序付きリスト の2つがあります。

順序なしリスト ul タグの例

  • アイテム1
  • アイテム2
  • アイテム3

順序付きリスト ol タグの例

  1. アイテム1
  2. アイテム2
  3. アイテム3

どちらを使用する場合にも、リストのアイテムには li タグを使用します。

リストタグの使い方


<h3>順序なしリスト</h3>
<ul>
    <li>順序なしリストのアイテム1</li>
    <li>順序なしリストのアイテム2</li>
    <li>順序なしリストのアイテム3</li>
</ul>
<h3>順序付きリスト</h3>
<ol>
    <li>順序付きリストのアイテム1</li>
    <li>順序付きリストのアイテム2</li>
    <li>順序付きリストのアイテム3</li>
</ol>
                

イメージタグ

imgタグ の src属性 に 画像のパス を設定するれば、文章内に画像を埋め込むことができます。

デモの画像を表示します

また、 alt属性 には画像が表示されなかった場合の「画像の説明」をテキストで設定します。

イメージタグの使い方


<img src="https://picsum.photos/200/300" alt="デモの画像を表示します">
                
  • alt属性はSEOにとっても重要な役割があるので必ず設定するようにしましょう。

汎用タグ、テキストタグ

div(汎用)タグ、span(テキスト)タグには特に意味はありません。

要素を囲む必要がある場合に使用します。

意味がないので使い所がないのではないかと思うかもしれませんが、実は非常によく使います。特に divタグの 使用頻度は最も高いです。

どんなときに使用するかについては、次回の学習 で行います。

汎用タグ、テキストタグの使い方


<div>
    <p>朝のあいさつは<span>おはよう</span>です。</p>
</div>
                

その他のHTMLタグ

HTMLタグには多くの種類があります。
他のHTMLタグについては以下のページで確認することができますが、暗記する必要はありません。

HTML 要素リファレンス – HTML: HyperText Markup Language | MDN

コードを書いていても一度も触ったことがないタグもありますので、いつか必要になったときに「そういえばこんな役割するタグがあったな〜」程度に思い出せたら上等です。

また、リンク先ページの下の方にある「廃止または非推奨の要素」については覚える必要がありません。

課題

見出しタグ(h1, h2)と段落タグ(p)を使用してブラウザで表示してください。

ハイパーリンクタグ(a)を使用して、Google(https://google.com)のトップページを開くリンクを作成してください。

順序なしリスト(ul, li)で好きな食べ物を3つ表示してください。

また、順序付きリスト(ol, li)で好きな食べ物順に表示してください。

画像パス(https://picsum.photos/200/300)の画像を表示してください。

画像の説明には「ランダムな画像」と設定してください。