今回の学習内容
HTMLの基本的なタグ
HTML には 多くのタグがあります。
ここでは基本的なタグについて、どんな役割があるかについて学習します。
下の表は、今回学習するタグの簡単な説明です。
| 要素 | 簡単な説明 |
|---|---|
<h1>, <h2>, |
見出しタグ（見出し１〜見出し６） |
<p> |
段落タグ |
<hr> |
横線タグ（テーマの区切り線） |
<a> |
ハイパーリンクタグ（ページの遷移など） |
<ul>, <li> |
順序なしリストタグ |
<ol>, <li> |
順序付きリストタグ |
<img> |
イメージタグ（画像の表示） |
<div> |
汎用タグ（特に意味はないが汎用的に使用できる） |
<span> |
テキストタグ（特に意味はないがテキストを囲む際に使用する） |
その他の HTMLタグ については以下のページで確認できます。
HTML 要素リファレンス – HTML: HyperText Markup Language | MDN
見出しタグ
見出しタグには h1 から h6 まで 6段階 あります。h1 はページの見出しを設定します。このページの見出し１は「【HTML】頻繁に使用するタグ」になります。
h2 からは 各セクションごとの見出しを設定します。
見出しタグの使い方
<h1>このページの見出しです</h1>
-
h1タグはSEO（検索エンジン最適化）にとって重要な役割があります。必ず設定しましょう。
段落タグ
pタグは、テキストの段落を示します。
以下の、「おはよう」と「こんにちは」はそれぞれ pタグを使用しています。
おはよう
こんにちは
段落タグの使い方
<p>段落するブロックです。</p>
横線タグ
hrタグは、セクションごとの区切りを表します。
使用すると以下のように横線が引かれます。
*環境によって色や太さが異なります
横線タグの使い方
<hr>
ハイパーリンクタグ
他のWebページ、ファイル、メールアドレス、同じページ内の場所などのハイパーリンクは aタグ を使用すれば表現できます。
「a（エー）タグ」 や 「アンカー（anchor）タグ 」と呼ばれます。
aタグの href属性に リンク先のURLやメールアドレスを設定します。
以下は、このサイトのトップページに遷移するリンクです。
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に設定すれば新しいタブでページを開くリンクを作成できます。
リストタグ
リストには 順序なしリスト と 順序付きリスト の２つがあります。
順序なしリスト ul タグの例
- アイテム１
- アイテム２
- アイテム３
順序付きリスト ol タグの例
- アイテム１
- アイテム２
- アイテム３
どちらを使用する場合にも、リストのアイテムには li タグを使用します。
リストタグの使い方
<h3>順序なしリスト</h3>
<ul>
<li>順序なしリストのアイテム１</li>
<li>順序なしリストのアイテム２</li>
<li>順序なしリストのアイテム３</li>
</ul>
<h3>順序付きリスト</h3>
<ol>
<li>順序付きリストのアイテム１</li>
<li>順序付きリストのアイテム２</li>
<li>順序付きリストのアイテム３</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
コードを書いていても一度も触ったことがないタグもありますので、いつか必要になったときに「そういえばこんな役割するタグがあったな〜」程度に思い出せたら上等です。
また、リンク先ページの下の方にある「廃止または非推奨の要素」については覚える必要がありません。
