HTMLで使用する要素一覧
HTMLで使用する要素を一覧形式で載せていきます。
使用用途やコードの記述例などを説明します。
①文書の基本構造
<!DOCTYPE html>
使用用途は、ブラウザ側に「これはHTML5仕様です！」と宣言を行い、正しくレンダリングモード（表示解釈）してもらう為です。
これを記述しない場合、意図しない表示になったり、組み合わせるCSSが崩れてしまう可能性があります。
HTML構文の初めには、必ず「<!DOCTYPE html>」と1行入力しましょう。
記述方法は、大文字・小文字どちらでも問題ありません。
<!DOCTYPE HTML>
html
使用用途は、HTML文章全体を包むルート要素となります。
文章の最上位に必ず1つ存在が必要となる要素です。
通常「lang」属性とセットで使用します。
lang属性とは、ページの言語をブラウザ・検索エンジン・音声読み上げに伝える役割があります。
例えば、日本であれば「lang=”ja”」と記述します。
<html lang=”ja”>
…
</html>
head
使用用途は、ページ内の設定情報・裏側の情報を記述する場所。
その為、画面表示には直接表示されません。
- <meta>：文字コード・レスポンシブ設定
- <title>：ブラウザタブ名・SEO
- <link>：CSS読み込み
- <script>：Javascript読み込み
↑上記ような情報を記述します。
SEOや表示崩れ防止、スマホ対応の要となります。
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″
<title>ここがタイトル</title>
<link rel=”stylesheet” href=”style.css”
</head>
body
使用用途は、実際にユーザーが目にするすべての内容を書く場所。
テキストや画像、ボタンやフォームなどの様々な情報が記述される。
- 見出し：<h1>～<h6>
- 文章：<p>
- 画像：<img>
- リンク：<a>
- セクション：<header>,<main>,<section>,<footer>など
↑上記ような情報を記述します。
<body>
…
</body>
ポイント
- 実際にユーザーが見る領域
②メタ情報
title
使用用途は、検索結果のタイトルやブラウザ、SNSシェア時に表示されるページの正式名称となります。
SEOに非常に重要であり、ページの内容と一致させることが必須です。
<title>検索結果のタイトル</title>
ポイント
- 1ページに1つだけ
- 文字数の目安は30～35文字
- キーワードを詰め込みすぎない
- 全ページ同じtitleはNG
meta
使用用途は、ページの設定・補足情報をブラウザや検索エンジンに伝える。
画面上には表示されません。
metaの組合せ記述例
文字コード指定：<meta charset=”UTF-8″>
レスポンシブ対応：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″
検索結果のページ説明：<meta name=”description” content=”ここがページ説明文”
ポイント
- head内にしか記述出来ない
- 基本的にはすべてセットで記述
link
使用用途は、外部ファイルとの関連付けです。主にCSSファイルの読み込み時です。
複数記述する際は、上から順番に読み込まれる特徴があります。
<link rel=”stylesheet” href=”style.css”>
ポイント
- 基本的に外部ファイルを指定
- 複数指定可能
script
使用用途は、Javascriptファイルを読み込む際です。動きや処理、イベントの制御を担当。読み込み時にエラーが発生する可能性がある為、基本的には「defer」をセットで記述。
<script src=”main.js” defer></script>
ポイント
- 基本的にはdeferをセットで記述する
- jQueryやライブラリは先に読み込む
- 要素
- 使用用途は、
- ポイント
style
使用用途は、外部ではなくHTML構文内に直接CSSを記述する際です。
小規模・テスト用向けの用途なので、基本的にはあまり使いません。
<style>
body{
font-family:sans-serif;
}
</style>
ポイント
- 運用管理が難しい
- HTML構文内の記述が多くなる
③セクショニング
header
使用用途は、コンテンツの導入部分を囲む際です。
ページ全体・各セクション・各記事の上部に記述する為、サイト名やロゴ、ナビゲーションメニューなどを含めることが多いです。
<header>
<h1>見出し</h1>
<p>説明</p>
</header>
ポイント
- ページ内に複数記述して問題ない
- ページ全体を囲むのはNG
footer
使用用途は、締め・補足情報を囲む際です。
フッターメニューや関連リンク、著作権などを記述する場合が例です。
<footer>
<p>2026 sample Company</p>
</footer>
ポイント
- 複数記述OK
- ページ全体 / article / sectionの末尾に揃える
main
使用用途は、ページ内で重要なメインコンテンツを囲む。
検索エンジン・ブラウザに「ここが本体です！」と伝えています。
<main>
<h1>見出し</h1>
<p>ここがメインコンテンツ</p>
</main>
ポイント
- 1ページに１つだけ
- header / footer / nav / asideの中に記述NG
section
使用用途は、意味のある「章」や「まとまり」を囲む。
見出しとセットで記述するのが基本。
<section>
<h2>見出し</2>
<p>意味のあるまとまり</p>
</section>
ポイント
- 意味の無い囲みはNG
- 見出し無しはNG
- 文章内の一部
article
使用用途は、単体で成立するコンテンツを囲む。
RSS・シェア・再利用される想定の内容。
<article>
<h2>見出し</h2>
<p>単体で成立するコンテンツ</p>
<footer>
<p>投稿日：2026年1月</p>
</footer>
</article>
ポイント
- ニュースや商品カードにも使用出来る
- 単体で成立する
aside
使用用途は、メインとは直接関係しない補足情報を囲む。
サイドバーや広告、関連記事が例。
<aside>
<h3>見出し</h3>
<ul>
<li><a href=”#”>関係情報①</a></li>
<li><a href=”#”>関連記事②</a></li>
</ul>
</aside>
ポイント
- mainの外、内どちらでも記述可能
- なくても成立する情報
nav
使用用途は、主要なナビゲーションリンクの集合体を囲む。
メニュー・目次・フッターナビなどが例。
<nav>
<ul>
<li><a href=”#”>目次①</a></li>
<li><a href=”#”>目次②</a></li>
<li><a href=”#”>目次③</a></li>
</ul>
</nav>
ポイント
- すべてのリンクをnavに入れない
- 主要なリンクが判断基準
address
使用用途は、著者・運営者・連絡先情報を囲む。
人や組織に関する情報専用。
<address>
<p>運営者：ひょーちゃん</p>
<p>住所：日本</p>
</address>
ポイント
- 単なる住所の表示はＮＧ
- 住所以外にもメールやSNSも可能
④コンテンツ要素
<h1>～<h6>
使用用途は、文章構造を示す見出し。
数字が小さいほど、重要度が高いです。
イメージで表すと、
- <h1> ：ぺージの主題
- <h2>：章
- <h3>：節…という階層構造
<h1>ページの主題</h1>
<h2>章</h2>
<h3>節</3>
ポイント
- <h1>は1ページに基本1回
- <h1>の次に<h3>など、順番を飛ばしてはいけない
<p>
使用用途は、ひとかたまりの段落ある文章。
テキスト本文に使用する基本的なタグ。
<p>これはひとかたまりの段落ある文章</p>
ポイント
- 改行目的に使用はNG
- 文章が変わるタイミングで分けて使用する
hr
使用用途は、話題・トピックの切り替わり。
見た目上ではなく、意味的なく区切りが必要です。
<p>ここまでが概要</p>
<hr>
<p>ここから詳細内容です</p>
ポイント
- 意味の無い装飾として使用するのはNG
- デザイン線はCSSで代用することが多い
br
使用用途は、文章内での改行。
<p>
1行目<br>
2行目
</p>
ポイント
- レイアウト目的での使用はNG
blockquote
使用用途は、外聞からの引用文。
原則、引用元を明示してあげる必要があります。
<blokquote cite=”https://example.com”>
<p>ひょーちゃんのWEBデザイン</p>
</blockquote>
ポイント
- 自分自身の文章に使用するのはNG
- 出典無しはNG
⑤テキストレベルの意味付け（インライン要素）
strong
使用用途は、内容として重要・強く伝えたい語句。
検索エンジンやスクリーンリーダーにも重要と伝わる。
<p><strong>ここが重要です！</strong>なぜなら…</p>
ポイント
- 意味なく太字にする為の使用はNG
- 重要語句、注意点、結論部分に使用
em
使用用途は、文章の中で強く読ませたい部分。
読み上げ時にアクセントがつく。
<p>この設定は<em>必ず！</em>見てください。</p>
ポイント
- 連続使用可能
- 注意喚起、比較、否定強調などに有効
b
使用用途は、意味を持たない視覚的強調。
strongとは異なり、デザイン目的に使用。
<p><b>デザイン目的の太文字</b></p>
ポイント
- 使用頻度は低め
- キーワード装飾やラベル用途
i
使用用途は、外来語、専門語、心の声など。
意味的な強調ではありません。
<p><i>HTML</i>はマークアップ言語です。</p>
ポイント
- 技術用語、作品名などに使われる
u
使用用途は、下線の表示。
<p><u>ここに下線を引く</u></p>
ポイント
- 本文では非推奨な場合が多い
small
使用用途は、免責、補足、著作権表記など。
<p><small>※表示価格は税込です。</samll></p>
ポイント
- footerや注意分に最適
- 単なる縮小ではなく”補足情報”
mark
使用用途は、文脈上の注目語句。
検索結果のハイライトなどに有効。
<p>HTMLでは<mark>意味を持ったタグ</mark>が重要です。</p>
ポイント
- 強調させすぎると読みにくい
- Javascriptと組み合わせ検索ワード強調にも使用される
span
使用用途は、意味を持たない範囲指定。
<p>価格は<span class=”price”>9,800円</span>です。</p>
ポイント
- class属性とセットで使用
abbr
使用用途は、略語の正式名称を示す。
アクセシビリティが向上します。
<p><abbr class=”world wide web”>www</abbr>はwebの基盤です。</p>
ポイント
- title属性とセットで使用
time
使用用途は、日時情報を機械可読にする。
検索・SNS・構造化データに有効です。
<time datetime=”2026-01-01″>2026年1月１日</time>
ポイント
- datetime属性とセットで使用
- 表示文字列は自由
code
使用用途は、プログラム・コマンド名。
<p>cssでは<code>display:flex;</code>をよく使います。</p>
ポイント
- インラインコード用
- 複数行の場合は、<pre><code>を使用
kbd
使用用途は、ユーザー操作のキー表示。
<p>保存は<kbd>Ctrl</kbd>+<kbd>S</kbd>です。</p>
ポイント
- 操作説明、チュートリアル向き
sup / sub
使用用途は、数式・化学式・注釈番号。
<sup>は上付き、<sub>は下付きとなります。
<p>E=mc<sup>2</sup></p>
<p>H<sub>2</sub>Oは水です。</p>
リスト要素（一覧表示）
ul
使用用途は、箇条書き・特徴一覧・メニューなど。
順番に意味がない項目の集合である特徴があります。
<ul>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
</ul>
ポイント
- ナビゲーション、カード一覧にも多様
- CSSで見た目を自由に変えられる
ol
使用用途は、手順・ランキング・ステップ。
順番に意味があるリストである特徴があります。
<ol>
<li>手順①</li>
<li>手順②</li>
<li>手順③</li>
</ol>
ポイント
- 数字は自動付与される
- type属性で表記変更可能（a,iなど）
li
使用用途は、リストの1項目。
ul / olの直下にのみ記述出来る。
<ul>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
</ul>
ポイント
- li内には、p,a,img,div,sectionなど、ほぼ何でも含めることが出来る
- li単体に記述はNG
dl
使用用途は、用語と説明のセット。
名前と内容、項目名と値の関係となる。
<dl>
<dt>HTML</dt>
<dd>説明文</dd>
</dl>
ポイント
- FAQ、仕様表、プロフィールに最適
- 表（table)より意味的に正しい場合が多い
dt
使用用途は、説明される側（タイトル・用語）。
<dt>説明されるタイトル</dt>
ポイント
- 複数dtに１つddでもOK
- 用語名、項目名に使用
dd
使用用途は、dtの説明・内容。
<dd>dtを説明する内容</dd>
ポイント
- 複数ddもOK
- 文章、リスト、画像も入れられる
⑥リンク・画像・メディア
a
使用用途は、ページやリソースへのリンク。
webの根幹となる要素。
<a href=”#”>会社概要</a>
<a href=”#” target=”_blank” rel=”noopener noreferrer”>公式サイト<a>
ポイント
- リンクテキスト必須
- 外部リンクは「target=”_blank” + rel」推奨
- a要素には、テキスト、画像、ブロック要素も入れられる
img
使用用途は、画像を表示させるから要素。
コンテンツ性のある画像に使われる。
<img src=”photo.jpg” alt=”風景画像”>
ポイント
- alt属性は基本的に使用
figure
使用用途は、画像・図・コードなどの自己完結コンテンツ。
本文から切り離しても成立する特徴があります。
<figure>
<img src=”photo.jpg” alt=”風景画像”>
</figure>
ポイント
- 画像+説明文のセットで使用
- img単体よりも意味が明確になる
figcaption
使用用途は、figureに説明文。
画像の補足・出典・タイトルなどに使用。
<figure>
<img src=”photo.jpg” alt=”風景画像”>
<figcaption>風景画像です。綺麗です。</figcaption>
</figure>
ポイント
- figureの最初or最後に配置
- １つfigureに１つまで使用可能
audio
使用用途は、音声ファイルの埋め込み。
BGM・ナレーション・音声教材などに使用。
<audio controls>
<sourse src=”audio.mp3″ type=”audio/mpeg”>
<sourse src=”audio.mp3″ type=”audio/ogg”>
</audio>
ポイント
- controlsはほぼ必須
- 自動再生はユーザー体験的に非推奨
video
使用用途は、動画ファイルの埋め込み。
商品紹介・解説動画などに使用。
<video controls poster=”thumb.jpg” width=”640″
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.webm” type=”video/webm”>
お使いのブラウザは動画再生に対応していません。
</video>
ポイント
- controlsはほぼ必須
source
使用用途は、audio /video / picture用の素材指定。
ブラウザ対応を広げる。
<video controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.webm” type=”video/webm”>
</video>
ポイント
- 上から順に評価される
- type属性を書くのがベター
iframe
使用用途は、外部ページをそのまま埋め込む。
YouTube / Google Mapなどを使用。
<iframe>
width=”560″
height=”315″
srch=”https://www.youtube.com/xxx_id”
title=”YouTube Player”
frameborder=”0″
allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture”
allowfullscreen>
</iframe>
ポイント
- セキュリティ、表示速度に注意する
- YouTubeは公式埋め込みコードを使う
⑧テーブル（表）
table
使用用途は、行×列で構成されるデータ表。
数値・仕様・比較など「表形式」データ専用。
<table>
<!–表の中身–>
</table>
ポイント
- レイアウト目的で使うのはNG
- 見た目はCSSで調整
tr
使用用途は、横1行。
table / thead / tbody / tfootの中に記述する
<tr>
<td>項目</td>
<td>内容</td>
</tr>
ポイント
- 列ではなく行
th
使用用途は、行または列の見出し。
データの意味を説明するセル。
<th scope=”col”>プラン</th>
ポイント
- 見た目を太字にする為の使用はNG
- scope属性が重要（”col” = 列見出し、”row” = 行見出し）
td
使用用途は、実データを入れるセル。
<td>10,000円</td>
ポイント
- 数字、文字、リンク、ボタンも入力ＯＫ
caption
使用用途は、表の内容を一言で説明。
スクリーンリーダーやSEOにも有効。
<caption>料金プラン一覧</caption>
ポイント
- tableの真下に記述する
- 見た目はCSSで調整可能
thead
使用用途は、表の見出し行（列名）をまとめる領域。
「この表は何のデータか」を示す役割があります。
<thead>
<tr>
<th scope=”col”>プラン</th>
<th scope=”col”>価格</th>
</tr>
</thead>
ポイント
- 見た目が同じだという理由で<tbody>にまとめるのはNG
- 見出しの為、<td>を使用するのはNG
tbody
使用用途は、表のメインとあるデータ部分。
実際の一覧・数値・情報が入る。
<tbody>
<tr>
<th scope=”row”>Aプラン</th>
<td>3,000円</td>
<td>基本料金</td>
</tr>
</tbody>
ポイント
- thead / tfootを使用しているのにtbodyだけ省略するのはNG
- 列の見出しをtbody内に記述するのはNG。行の見出しはOK
tfoot
使用用途は、合計・注意書き・補足情報。
表全体に関わる締めの情報。
<tfoot>
<tr>
<th scope=”row”>備考</th>
<td colspan=”2″>※価格は税込みです</td>
</tr>
</tfoot>
ポイント
- 最後の行だからtbodyに記述はNG
- 単なるデザイン目的に使用はNG
⑨フォーム（入力系）
form
使用用途は、入力フォーム全体を包む要素。
入力されたデータをどこへ・どう送るのかを定義する。
action:送信先URL
method：送信方法
・get：URLに表示（検索など）
・post：非表示（ログイン・問い合わせ）
<form action=”confirm.php” method=”post”>
<!– 入力項目 –>
</form>
ポイント
- フォーム部品は必ずformの中に記述する
input
使用用途は、1行入力欄（テキスト・メール・チェックなど）
合わせるtype属性により役割が異なります。
・text
・email
・password
・checkbox
・radio
・submit
<input type=”text” name=”username” placeholder=”名前を入力”>
<input type=”email” name=”email” required>
ポイント
- nameが送信データのキーになる（超重要）
textarea
使用用途は、複数行の文章入力（問い合わせ内容など）
<textarea name=”message” rows=”5″ cols=”30″>
お問合せ内容を入力してください
</textarea>
ポイント
- 改行可能
- rows / colsで大きさ指定（CSSでの調整が一般的）
button
使用用途は、ボタン表示（送信・リセット・通常ボタン）
<button type=”submit”>送信する</button>
<button type=”button”>確認</button>
ポイント
- type属性を明示する（submit:送信 、 button:Javascript用）
- 指定しないとsubmit扱いになる
select
使用用途は、プルダウン（選択方式）
<select> name=”pref”>
<option value=””>選択してください</option>
<option value=”tokyo”>東京</option>
<option value=”osaka”>大阪</optin>
</select>
ポイント
- 中に<option>を記述する
- name属性は必須
option
使用用途は、プルダウンの選択肢。
<option value=”male”>男性</option>
<option value=”female”>女性</option>
ポイント
- valueが送信される値
- 表示文字とvalueは別
label
使用用途は、入力項目の説明文。
アクセシビリティ最重要要素。
<label for=”email”>メールアドレス</label>
<input type=”email” id=”email” name=”email”>
ポイント
- forとinputのidを一致させる
- ラベルクリックで入力欄が選択される
fieldest
使用用途は、入力項目を意味的にグループ化。
<fieldset>
<!– グループ内容 –>
</fieldset>
ポイント
- 視覚的にも枠線が付く（デフォルト）
- ラジオボタンのグループ化でよく使う
legend
使用用途は、fieldsetの見出し（グループ名）
<fieldset>
<legend>性別</legend>
<label>
<input type=”radio” name=”gender” value=”male”>男性
</label>
<label>
<input type=”radio” name=”gender” value=”female”>女性
</label>
</fieldset>
ポイント
- fielsetの最初に記述する
- スクリーンリーダーに非常に有効
⑩その他の構造・スクリプト系
noscript
使用用途は、Javascriptが無効な環境で表示させる代替コンテンツ。
Javascript必須のサイトでの注意表示などに使う。
<noscript>
<p>このサイトはJavascriptを有効にすると正しく表示されます</p>
</noscript>
ポイント
- Javascriptが有効な場合は表示されない
- <head>、<body>どちらにも記述可能
tamplate
使用用途は、初期表示されないHTMLのひな型。
Javascriptで複製・挿入する前提。
<template id=”user-card”>
<div class=”card”>
<h3>名前</h3>
<p>プロフィール</p>
</div>
<template>
<script>
const tamplate = document.getElementByiId(‘user-card’);
const clone = tamplate.content.cloneNode(true);
document.body.appendChild(clone);
</script)
ポイント
- 中身はDOMに存在するが表示されない
- Javascriptで、content.cloneNode(true)して使用
canvas
使用用途は、Javascriptで描画する描画領域。
グラフ・ゲーム・アニメーションなど。
<canvas id=”myCanvas” width=”300″ height=”150″>
お使いのブラウザはcanvasに対応していません。
</canvas>
<script>
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
ctx.fillstyle = ‘blue’;
ctx.fillRect(20,20,100,50);
</script>
ポイント
- HTMLだけでは何も表示されない
- 描画内容はDOMとして扱えない
svg
使用用途は、ベクター形式の画像描画。
ロゴ・アイコン・図形など。
<svg width=”120″ height=”120″ viewBox=”0 0 120 120″
xmls=”http://www.xxx.svg”>
<circle cx=”60″ cy=”60″ r=”50″ fill=”green” />
</svg>
ポイント
- 拡大しても劣化しない
- DOMとして操作出来る（CSS / Javascript対応）
⑪セクショニングルート
body
使用用途は、ページ全体の最上位コンテンツルート。
すべての見出し構造（アウトライン）の起点。
<body>
<h1>サイトタイトル</h1>
<section>
<h2>サービス紹介</h2>
</section>
</body>
ポイント
- bodyは最大のセクショニングルート
- <h1>~<h6>の階層はbodyを基準に構築される
blockquote
使用用途は、他所からの引用（長文）。
引用全体を1つの独立ブロックとして扱う。
<blockquote cite=”https:/xxx.com”>
<h2>引用文の見出し</h2>
<p>これは引用された文章です。</p>
</blockquote>
ポイント
- 内部に見出しは外の見出し階層に影響しない
- セクショニングコンテンツではないが、アウトラインを分断する性質を持つ
figure
使用用途は、自己完結したコンテンツのまとまり。
画像・図・コード例・動画など。
<figure>
<img src=”sample.jpg” alt=”サンプル画像”>
<figcaption>サンプル画像の説明</figcaption>
</figure>
ポイント
- 本文から切り離しても意味が通る内容に使用する
- 内部の見出しは外の構造に影響しない
コメント