今回の学習内容
HTMLの基本的なタグ
HTML には 多くのタグがあります。
ここでは基本的なタグについて、どんな役割があるかについて学習します。
下の表は、今回学習するタグの簡単な説明です。
要素 | 簡単な説明 |
---|---|
<h1>, <h2>, |
見出しタグ(見出し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やメールアドレスを設定します。
以下は、このサイトのトップページに遷移するリンクです。
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
- アイテム2
- アイテム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
コードを書いていても一度も触ったことがないタグもありますので、いつか必要になったときに「そういえばこんな役割するタグがあったな〜」程度に思い出せたら上等です。
また、リンク先ページの下の方にある「廃止または非推奨の要素」については覚える必要がありません。