正しくコーディングしよう!HTML5以降の頻出タグ一覧

正しくコーディングしよう!HTML5以降の頻出タグ一覧

記事の監修者

アバター

ena

ohsakoena

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タグ

今回紹介した内容は最低限覚えておくべき知識です。

スキルアップしたい人はさらに深く学習してみましょう。

全国どこにいても学べる!超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する