記事の監修者
Webサイトを構成するために必須のHTML。
直感的に書きやすいため、何となくコーディングしていませんか？
本記事ではHTML5以降の頻出タグを8つ紹介します。
それぞれ正しく書けているか確認しながら読んでいきましょう。
適切なタグを使う理由
前提としてHTMLは「文書構造を作成する言語」です。
文書構造とは、「ここに見出しがあって、説明文はここに書く」のように文書のコンテンツそれぞれに意味がある構造のことです。
HTMLタグは見出しや説明文などを意味づけするために使います。
それでは、なぜ意味づけしなければならないのでしょうか？
大きな理由は、検索エンジンのロボットに対して文書構造を正確に伝えるためです。
適切なタグが使われていればロボットが文書構造を理解しやすくなり、Webサイトの表示において様々な場面で有利に働きます。
頻出タグ一覧
HTMLの頻出タグを8個紹介します。
・h1〜h6タグ
・pタグ
・articleタグ
・divタグ
・spanタグ
・ul、liタグ
・imgタグ
・figureタグ
正しいHTMLを書くには、基本となるタグの使い方を抑えることが大事です。
以下、それぞれ解説します。
h1〜h6タグ
スクロールできます
| 意味 | 見出し |
| 要素の種類 | ブロックレベル |
| 使い方 | h1から順番に階層構造を記述する |
| ポイント | 基本的にはh1は文章内に1つ |
h1〜h6タグは文書の見出しを構成するタグです。
新聞で例えると、h1が大見出し、h2が中見出し、h3が小見出し・・・となります。
h1〜h6タグを適切に使うことは、文書構造を正しく伝えるためにとても重要です。
特にh1、h2、h3タグは文書内でよく使用します。
それぞれは階層構造で記述しなければいけません。
h2タグ(中見出し)の中にh1タグ(大見出し)が来るようなコーディングはNGです。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
pタグ
スクロールできます
| 意味 | 段落 |
| 要素の種類 | ブロックレベル |
| 使い方 | ひとまとまりの文章に使う |
| ポイント | 改行する際は<br>タグを使う |
pタグは文書の段落を構成するタグです。
文書内でひとまとまりの文章の箇所はpタグで囲みます。
よくbrタグと一緒に使用されますが、brタグは文章内の改行を意味します。
段落の間隔を空ける際はbrタグではなく、改めてpタグで文章を囲み直しましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
articleタグ
スクロールできます
| 意味 | 記事など独立したコンテンツ |
| 要素の種類 | ブロックレベル |
| 使い方 | 文章内で自己完結するコンテンツに使う |
| ポイント | sectionタグよりも独立性の高いセクションを構成する |
articleタグはブログの記事や新聞記事など文書内で自己完結するセクションを構成するタグです。
articleタグで囲んだ箇所は、文書内で自己完結する階層構造となります。
文書全体の階層構造には影響を及ぼしません。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
divタグ
スクロールできます
| 意味 | なし |
| 要素の種類 | ブロックレベル |
| 使い方 | 要素をグルーピングする |
| ポイント | レイアウトを構成する際に使う |
divタグは要素をグルーピングするためのタグです。
タグ自体に意味はありません。
主にCSSで文書のレイアウトを整えるときに使用します。
便利なタグですが、使いすぎないようにしましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
spanタグ
スクロールできます
| 意味 | なし |
| 要素の種類 | インライン |
| 使い方 | 文章内の特定文字の太さや色を変える |
| ポイント | spanタグの中にブロックレベル要素は入れられない |
spanタグは文章中の文字にCSSを適用するためのタグで、divタグ同様タグ自体に意味はありません。
インライン要素に分類されるため、基本的に横幅や高さは変更できません。
また、spanタグの中にpタグなどブロックレベル要素を入れることはNGです。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
ul 、liタグ
スクロールできます
| 意味 | 箇条書きリストを作成する |
| 要素の種類 | ブロックレベル |
| 使い方 | ulタグ内で箇条書きの項目をliタグで列挙する |
| ポイント | 順番に意味がある場合はol、liタグを使用する |
ul、liタグは一緒に使用することで箇条書きリストを作成します。
箇条書き以外にも同じHTMLのブロックを複数並べる際に使用します。
ulタグの直下にはliタグが来るルールとなっています。
箇条書きの順番に意味がある場合はol、liタグを使いましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
imgタグ
スクロールできます
| 意味 | 画像を埋め込む |
| 要素の種類 | インライン |
| 使い方 | 画像を表示する際に使う |
| ポイント | alt属性を正しく設定する |
imgタグは文書内に画像を埋め込むためのタグです。
インライン要素ですが、「置換要素」と呼ばれる特殊な要素でもあり、CSSのwidthやheightでサイズを調整できます。
imgタグを使う際は、画像のパスをsrc属性で、画像の説明文をalt属性で指定します。
alt属性は画像が読み込まれなかったときや文書を読み上げる際に使われるので、忘れずに設定しておきましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
figureタグ
スクロールできます
| 意味 | 写真や図表を表す |
| 要素の種類 | ブロックレベル |
| 使い方 | 文章内で自己完結する写真や図表に使うfigcaptionタグと組み合わせて画像にキャプションをつけられる |
| ポイント | 文章をより分かりやすくするために使う |
figureタグは写真や図表などを示すタグで、articleタグ同様文書内で自己完結するタグです。
写真や図表に説明文を付けるときは、figcaptionタグをいっしょに使用します。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
HTMLタグを使いこなそう
本記事では以下8つのHTMLタグをご紹介しました。
・h1〜h6タグ
・pタグ
・articleタグ
・divタグ
・spanタグ
・ul、liタグ
・imgタグ
・figureタグ
今回紹介した内容は最低限覚えておくべき知識です。
スキルアップしたい人はさらに深く学習してみましょう。
全国どこにいても学べる！超優良のプログラミングスクールまとめました【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール
自分の住んでるエリアでプログラミングスクールを探したい⭐️
エリア別で、おすすめのプログラミングスクールをまとめました。
ぜひ参考にしてみてくださいね。
北海道 / 東北
関東
群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川
中部
福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟
近畿
兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山
