HTMLのタグは100種類以上あります。とはいえ全てのタグを覚える必要はなく、よく使われるタグに絞って、用途や役割を少しずつ覚えていけば大丈夫です。
この記事では頻出のHTMLタグを表形式で紹介し、中でもよく使うタグについて解説していきます。この記事で扱うHTMLタグの使い方が身につけば、より効率的にサイト制作を進められるようになります。
- よく使われるHTMLタグの種類が理解できる
- HTMLタグの正しい使い方を理解できる
- HTMLタグを正しく使いこなす大切さも分かる
無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！
- Web制作に特化したカリキュラム
- 自分のペースで50本以上の動画教材で学べる
- あなた専属のメンターと作る、あなただけの学習ロードマップ
- 30日間、回数無制限でエンジニアに質問可
目次
- タグはHTMLの構造を検索エンジンに伝える目印
- テキストコンテンツに使用するタグ
- 画像・メディアに使用するタグ
- 構造化のためのタグ
- aタグ｜リンクを埋め込む際に使用するタグ
- divタグ｜複数の要素をグループ化する際に使用するタグ
- spanタグ｜インライン要素としてテキストの一部をグループ化する際に使用するタグ
- sectionタグ｜文書の章や節目、区間であることを表現する際に使用するタグ
- articleタグ｜サイト内で独立しており、意味が完結しているコンテンツに使用するタグ
- headerタグ｜サイトのヘッダー部分を示す際に使用するタグ
- footerタグ｜Webサイトのフッター部分を作成する際に使用するタグ
- mainタグ｜ページ内で一番伝えたいことや重要箇所を示す際に使用するタグ
- navタグ｜サイトのナビゲーション部分を示す際に使用するタグ
- asideタグ｜ページの補足的な情報を示す際に使用するタグ
- リストを作る際に使用するタグ
- 表を作成する際に使用するタグ
- フォームを作る際に使用するタグ
- ページの構造を作るタグ
- まとめ
タグはHTMLの構造を検索エンジンに伝える目印
Webページの見た目を構成するテキストや画像などの「要素」は、HTMLを使って書かれています。「タグ」の役割は、Webページがどのような構造をしているか、検索エンジンに伝える目印です。
たとえば一言にテキストといっても、見出しや本文など役割は異なる場合があります。
人間は見た目でテキストの役割の違いを判別できます。しかし、検索エンジンは視覚的に役割の違いを理解できません。そのため見出しを意味する「hタグ」や、段落を意味する「pタグ」などを使って、役割の違いを明確に示す必要があるわけです。
以下の事例をご覧ください。
<h2>HTMLタグとは？</h2>
<p>HTMLタグとは、HTMLの構造をブラウザや検索エンジンに伝える目印です</p>このようにHTMLタグを活用することで、どのテキストがどんな役割を持つのかを明らかにできます。
通常は「<>（開始タグ）」と「</>（終了タグ）」で、対象となる要素を挟んで記述します。しかし、中には画像の挿入に使う「imgタグ」のように、終了タグで挟まずに開始タグのみを書いて使用するタグもあるため、区別して覚えましょう。
HTMLタグを正しく使う技術はSEOに取り組むうえで欠かせない
Web制作の案件に取り組む中では、顧客からSEOに関する相談を受ける機会が多くなります。
HTMLタグを正しく使いこなす技術は、SEOに取り組むうえで欠かせません。
適切なタグを使ってページを構成すれば、検索エンジンはHTMLの構造を理解して内容を適正に評価できます。とはいえSEOの結果には多くの要因が関係しており、HTMLタグを正しく使えるだけで、成果が保証されるわけではありません。
HTMLタグを正しく活用する技術は「SEOで上位を取るための技術」ではなく、「SEOで評価される下地を作るための技術」と捉えておくとよいでしょう。
テキストコンテンツに使用するタグ
タグの種類 | 用途 |
h1〜h6 | 見出しを作成するためのタグ。h1が最も大きく、h6が最も小さい |
p | テキストの段落を作成するためのタグ |
br | テキスト内で改行したいときに使用するタグ |
strong | 重要な語句を強調するためのタグ（意味的な強調） |
em | 語句を強調するためのタグ（音声的な抑揚・意味の強調） |
b | 文字を太字にするタグ（視覚的な強調） |
i | 文字を斜体にするタグ（特定用語・外来語の表示に使用） |
u | 文字に下線を引くためのタグ（HTML5で再定義され、文法ミスや誤字の指摘用） |
small | 文字を一回り小さく表示するタグ（補足情報などに使用） |
mark | ハイライト表示に使われるタグ（検索語の強調など） |
abbr | 略語に説明を付けるためのタグ。title属性と組み合わせて使用 |
q | 短い引用文を挿入するためのタグ（自動で引用符がつく） |
blockquote | 長い引用文を挿入するためのタグ |
code | コードやプログラムを示すためのタグ（等幅フォントで表示） |
pre | 改行やスペースをそのまま表示する整形済みテキスト用のタグ |
sup | 上付き文字を表示するためのタグ（例：102） |
sub | 下付き文字を表示するためのタグ（例：H2O） |
del | 削除された内容を示すためのタグ（取り消し線付き） |
ins | 追加された内容を示すためのタグ（下線付き） |
h1〜h6タグ｜見出しを作成する際に使用するタグ
「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。
pタグ｜テキストの段落を作成する際に使用するタグ
「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中に改行する場合はbrタグを使用します。
brタグ｜テキスト内で改行したいときに使用するタグ
「br」は「break（ブレイク）」の略で、文章内で意図的に改行したいときに使用します。
pタグは段落単位で改行されますが、同じ段落内で改行したいときにbrタグを使います。
自己流のコーディングでは、泣きを見る。
"たった"の30日で正しいスキルを身につけよう。
現役エンジニアに質問し放題、疑問を残さず解決。
画像・メディアに使用するタグ
タグの種類 | 用途 |
img | 画像をWebページ上に表示するためのタグ。src属性で画像ファイルを指定 |
video | 動画ファイルをWebページ上で再生するためのタグ |
audio | 音声ファイルをWebページ上で再生するためのタグ |
picture | 条件に応じて表示する画像を切り替えるためのタグ。sourceとimgを内包 |
source | picture・audio・videoタグ内で使用し、メディアの切り替え条件を指定 |
figcaption | figure内で使用されるキャプション（説明文）を記述するタグ |
figure | 画像や図表・キャプションなどを1つのまとまりとして表現するタグ |
track | videoやaudioに字幕やキャプションなどのテキストトラックを追加するタグ |
embed | 外部メディア（動画・PDFなど）を埋め込む汎用的なタグ |
object | 外部ファイル（画像・PDF・Flashなど）を埋め込むためのタグ。汎用性が高い |
imgタグ｜画像を表示させる際に使用するタグ
「img」とは「image（イメージ）」の略で、画像を表示する際に使用します。
src属性は必須の属性でファイル名（jpgやpng形式など）を指定します。
alt属性は必須ではありませんが、代替テキストを設定することができアクセシビリティのために記述するようにしましょう。
代替テキストとは、ページ上で画像の表示がされなかった際に表示されるテキストです。
<img src="logo.jpg" alt="ZeroPlusのロゴ" />videoタグ｜動画を埋め込む際に使用するタグ
videoタグは、Webページ上に動画を埋め込み再生させる際に使用します。src属性で動画ファイルを指定し、controls属性を付けると再生ボタンなどの操作パネルが表示されます。
<video src="sample.mp4" controls></video>audioタグ｜音声を再生させる際に使用するタグ
audioタグは、Webページで音声ファイル（BGMやナレーションなど）を再生させたい場合に使用します。videoタグと同様に、controls属性で再生コントロールを表示させることができます。
<audio src="sound.mp3" controls></audio>
構造化のためのタグ
タグの種類 | 用途 |
a | リンクを作成するタグ。href属性でリンク先を指定。構造上の関連付けにも使用可能 |
div | 意味を持たず、複数の要素をグループ化する汎用的なブロック要素 |
span | インライン要素をグループ化する汎用的なタグ。テキストの一部を対象に |
section | 文書内の意味のある区間・節を定義するタグ。見出し（h1〜h6）とセットで使う |
article | 独立して意味が完結するコンテンツ（ブログ記事など）を囲むタグ |
header | ページやセクションの冒頭部分（ロゴや見出し、ナビなど）を示すタグ |
footer | ページやセクションの末尾部分（コピーライト、連絡先など）を示すタグ |
main | そのページで最も主要なコンテンツ部分を示すタグ。1ページに1つだけ使用 |
nav | ナビゲーション（リンクメニューなど）の領域を示すタグ |
aside | 補足情報やサイドバーの内容など、主要ではない関連情報を示すタグ |
hr | コンテンツの区切りを示す水平線を挿入するタグ（意味的にも区切り） |
address | 著者や運営者の連絡先・所在地などの情報を示すタグ |
aタグ｜リンクを埋め込む際に使用するタグ
「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用します。画像も含めて囲むことができます。
href属性の中にURLを書き、リンク先の指定をします。target属性に書かれている_blankは、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。
aタグで囲んだ部分すべてがリンクとして判定されるようになります。
<a href="https://zero-plus.io" target="_blank">ZeroPlus</a>divタグ｜複数の要素をグループ化する際に使用するタグ
「div」とは、「division（ディビジョン）」の略で、特別な意味はなく、要素をグループ化する際に使用します。
divタグはブロック要素としてグループ化を行うので、下に積まれていきます。
spanタグ｜インライン要素としてテキストの一部をグループ化する際に使用するタグ
spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。
ただし、spanタグはインライン要素としてグループ化されるため、下に積まれずに横に並びます。テキストの一部分をグルーピングする際に使えるのが大きな特徴です。
sectionタグ｜文書の章や節目、区間であることを表現する際に使用するタグ
「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。sectionタグ内には、見出し要素（h1〜h6）を含む必要があります。
<section>
<h2>ZeroPlusの特徴</h2>
<p>ZeroPlusで6ヶ月学習すれば確実にエンジニアへの1歩を踏み出せます。</p>
</section>articleタグ｜サイト内で独立しており、意味が完結しているコンテンツに使用するタグ
「article」には「記事」や「論説」という意味があり、サイト内で独立したコンテンツを囲む際に使用します。articleタグ内に、見出し要素（h1〜h6）を含む必要があります。
<article>
<h2>プログラミング学習のモチベーション維持に大事な8つのこと</h2>
<p>重要なのは、「自分がなぜプログラミングを学んでいるのか」という目的をはっきりさせることです。</p>
</article>headerタグ｜サイトのヘッダー部分を示す際に使用するタグ
headerタグは、サイトのヘッダー部分を構造化する際に使用します。
具体的には、サイトのタイトルやナビゲーションなどを囲います。
footerタグは、Webサイトの末尾・最後のフッター部分を示す際に使用します。サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。
mainタグ｜ページ内で一番伝えたいことや重要箇所を示す際に使用するタグ
mainタグは、ページ内で1番伝えたいこと・重要な部分を示す際に使用します。mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。
「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。navタグの中には、ul、liタグなどを用いてメニューを作ります。
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#feature">Feature</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>asideタグ｜ページの補足的な情報を示す際に使用するタグ
asideタグは、正確には余談要素といい、ページの補足的な情報を示す際に使用します。
リストを作る際に使用するタグ
タグの種類 | 用途 |
ul | 順序のないリスト（箇条書き）を作成するタグ。liタグと組み合わせて使用 |
ol | 順序のあるリスト（番号付きリスト）を作成するタグ。liタグと組み合わせて使用 |
li | ulやol内で各リスト項目を定義するタグ |
dl | 用語とその説明をセットで表示する「定義リスト」を作成するタグ |
dt | 定義リスト（dl）の中で、定義される用語を表すタグ |
dd | 定義リスト（dl）の中で、用語に対する説明を表すタグ |
ulタグ
「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用します。type属性を指定することで、先頭の「・」を変更することができます。
olタグ
「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用します。type属性を指定することで、先頭につく記号の種類を変更できます。
liタグ
「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用します。ulタグもしくはolタグの入れ子として使用します。
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Design</li>
<li>WordPress</li>
</ul>
<ol>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Design</li>
<li>WordPress</li>
</ol>
表を作成する際に使用するタグ
タグの種類 | 用途 |
table | 表全体を定義するタグ。tr、th、tdなどと組み合わせて使用 |
tr | テーブルの行（row）を定義するタグ |
th | テーブルの見出しセル（ヘッダー）を定義するタグ。デフォルトで太字・中央揃え |
td | テーブルのデータセルを定義するタグ |
caption | テーブルのタイトルや説明を表示するタグ。tableタグの直下に記述 |
thead | 表のヘッダー部分をグループ化するタグ。主にスタイル適用や並び替えに利用 |
tbody | 表の本体部分（データの行）をグループ化するタグ |
tfoot | 表のフッター部分をグループ化するタグ。合計などを記載するのに使用 |
colgroup | 列のグループに対してスタイルなどをまとめて指定するためのタグ |
col | colgroup内で使用され、個々の列のスタイルや幅を指定するタグ |
tableタグ
tableタグは表を作成する際に使用し、trタグ、thタグ、tdタグと併せて使用します。
trタグ
「tr」は「table row（テーブルロー）」の略で、表のなかの行を作成する際に使用します。trタグを使用した分だけ、行の数が追加されていきます。
thタグ
「table header（テーブルヘッダー）」の略で、表のなかの見出しのセルとして使用します。
tdタグ
「td」は「table data（テーブルデータ）」の略で、表のなかの見出し（th）に対するデータのセルとして使用します。
<table>
<tr>
<th>氏名</th>
<td>山田 太郎</td>
</tr>
<tr>
<th>年齢</th>
<td>25歳</td>
</tr>
</table>
フォームを作る際に使用するタグ
タグの種類 | 用途 |
form | フォーム全体を囲むタグ。actionやmethod属性で送信先と送信方法を指定 |
input | テキスト・チェックボックス・ラジオボタンなど、さまざまな入力を作成 |
label | 入力欄に説明をつけるタグ。for属性でinputと紐づけ |
textarea | 複数行のテキスト入力欄を作成するタグ |
button | 送信やその他の操作を実行するボタンを作成するタグ |
select | プルダウンメニューを作成するタグ。optionタグと組み合わせて使用 |
option | selectやdatalistの中で、選択肢を定義するタグ |
fieldset | フォーム内の関連する項目をグループ化するタグ |
legend | fieldsetのグループにタイトルを付けるためのタグ |
datalist | 入力候補をリストで提示するためのタグ。inputと連携 |
output | 計算結果などを表示するためのタグ。JavaScriptと組み合わせて使用 |
progress | 進行状況を視覚的に表示するためのタグ（読み込みバーなど） |
meter | 値の範囲やメーターを示すためのタグ（バッテリー残量など） |
formタグ｜フォーム全体を囲むためのタグ
formタグは、ユーザーからの入力をサーバーに送信するためのフォーム全体を囲むタグです。action属性に送信先、method属性に送信方法（POSTやGET）を指定します。
<form action="/submit" method="post">
<input type="text" name="username">
</form>inputタグ｜ユーザーからデータを入力してもらうためのタグ
inputタグは、テキスト入力やチェックボックスなど、さまざまな形式の入力欄を作るタグです。type属性を変更することで、入力内容の種類を指定できます（text、email、checkbox、submitなど）。
labelタグ｜フォームの入力欄に説明文を付けるためのタグ
labelタグは、inputタグなどの入力欄にラベル（説明）を付けるときに使用します。for属性にIDを指定すると、対応する入力欄と関連づけられます。
textareaタグ｜複数行の入力欄を作成するためのタグ
textareaタグは、長文や複数行のコメントなどを入力できるテキストボックスを作成するタグです。
buttonタグは、クリックして送信したり、JavaScriptの処理を実行するボタンを作るためのタグです。type属性に「submit」や「button」などを指定します。
<form>
<label for="comment">コメント：</label>
<textarea id="comment" name="comment"></textarea>
<br>
<button type="submit">送信</button>
</form>
ページの構造を作るタグ
タグの種類 | 用途 |
!DOCTYPE | この文書がHTMLであることを宣言するためのタグ。HTMLファイルの最初に記述 |
html | HTML文書全体を囲むルート要素 |
head | ページのメタ情報を記述する領域。meta、title、linkなどを内包 |
meta | 文字コードやページ説明、レスポンシブ対応などの情報を記述 |
title | ページのタイトルを指定。ブラウザのタブや検索結果に表示される |
link | 外部リソース（CSSやアイコンなど）との関係を定義 |
style | ページ内に直接CSSを記述するためのタグ。head内に配置 |
script | JavaScriptコードを記述または外部スクリプトを読み込むタグ。headまたはbody内 |
base | 相対URLの基準となるベースURLを指定するタグ（使用頻度は低め） |
body | Webページに表示される本文部分を記述する領域。見出し・画像・本文などを配置 |
!DOCTYPE宣言｜このファイルはHTMLファイルですと宣言するためのタグ
<!DOCTYPE（ドックタイプ）>宣言は、「このファイルはHTMLファイルです」と宣言するためのタグです。HTMLファイルでは最初に書きます。現在のところ最新バージョンであるHTML5では、以下のように記述する決まりです。
<!DOCTYPE html>この宣言をファイルの冒頭に書くことで、ブラウザにHTML5としてファイルを処理するように指示できます。
htmlタグ｜HTMLファイルの範囲を示すために使用するタグ
htmlタグは、「このHTMLファイルの内容はここからここまでです」と示すために使用するタグです。htmlタグの内部は「head」と「body」の2つのセクションに分かれます。
<html>
<head>
</head>
<body>
</body>
</html>headタグ｜Webサイトの内部情報を記述するためのタグ
headタグはWebサイトの内部情報を記述するためのタグです。headタグの中にはページの見た目に直接影響しないメタデータや、外部ファイルのリンクなどを記述します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>初心者向けHTMLガイド</title>
</head>headタグの中に書かれている内容は、基本的にWebサイトの見た目には直接反映されません。しかしWebサイトを設計するうえで重要な役割を果たしています。次から紹介するtitleタグ、metaタグ、titleタグはすべてheadタグに中に記述するタグです。
headerセクションを作る際に使用する、headerタグと混同しやすいため区別して覚えましょう。
titleタグ｜サイトのタイトルを指定するためのタグ
titleタグはサイトのタイトルを指定するためのタグです。このタグで指定されたタイトルは、ブラウザのタブや検索結果に表示されます。
titleタグに書かれた内容は、検索エンジンのランキングへの影響も大きく、SEOの観点からも重要なタグです。
linkタグ｜外部リソースとの関連を指定するためのタグ
linkタグは、外部リソースとの連携を指定するためのタグです。主に外部のCSSファイルやWebサイトのアイコン（ファビコンといいます）をHTMLファイルにリンクさせる際に使用されます。
<head>
<link rel="stylesheet" href="styles.css"> <!-- 外部CSSファイルをリンク -->
<link rel="icon" href="favicon.ico"> <!-- ファビコンを指定-->
</head>このタグを使ってCSSを適用させたり、ブラウザにファビコンを表示させたりできます。
metaタグ｜Webページに関する追加情報（メタデータ）を記述するためのタグ
metaタグは、Webページに関する追加情報（メタデータ）を記述するためのタグです。
文字エンコードの指定やページの説明文、モバイル端末向けの表示設定など、metaタグの内部にはサイトにとって重要な情報を記載します。
<head>
<meta charset="UTF-8"> <!-- 文字エンコードの指定（文字化けの予防）-->
<meta name="description" content="このページはHTML初心者向けのガイドです"> <!-- ページの説明文を検索結果へ反映させる -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホやタブレットでサイトを適切に表示させる -->
</head>このようにmetaタグを使って文字化けを防いだり、スマホやタブレットでのサイトの表示崩れを防いだりできます。
bodyタグ｜Webページの見た目の部分を記述するためタグ
bodyタグは、Webページの見た目の部分を記述するセクションを示すタグです。
画像やテキストなど、ページに表示される要素はbodyタグの中に記述します。
まとめ
この記事では、よく使われるhtmlタグを一覧にして紹介しました。
htmlタグは、Webページがどのような構造をしているか、検索エンジンに伝える目印の役割を果たします。正しく使いこなせば「SEOで評価されやすいサイト」を構築できるため、案件に取り組むうえではタグの知識が必要です。
それぞれのタグが明確に意味を持っていますが、一度に全てを暗記する必要はありません。サイトを何度も作る過程で自然と身についていくものです。使い方を忘れてしまったら、この記事に戻って確認しましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
