CURRICULUM  /  APPENDIX A

付録A ─ タグ一覧(HTML)

HTMLの主要なタグを、用途別にまとめたリファレンスです。

本編で使ったタグには、該当する章へのリンクを添えています。

全てを暗記する必要はありません。「こういうタグがある」と知っておけば、必要なときに調べられます。

文書構造

タグ役割本編での登場
<!DOCTYPE html> HTML5文書であることを宣言する。全てのHTMLファイルの先頭に書く 01-02
<html> HTML文書全体を囲む最も外側の要素。lang 属性で言語を指定する 01-02
<head> メタ情報(タイトル、CSSリンク、文字コード等)を置く領域。画面には表示されない 01-02
<body> 画面に表示される全てのコンテンツを置く領域 01-02
<meta> 文書のメタ情報を指定する。charset="UTF-8" で文字コード、viewport でモバイル表示を制御 01-02
<title> ブラウザのタブに表示される文書タイトル 01-02
<link> 外部リソース(CSS、フォント、ファビコン等)を読み込む 01-03
<style> HTML内に直接CSSを書くためのタグ
<script> JavaScript を記述または外部JSファイルを読み込む 01-04

セクション・構造

タグ役割本編での登場
<header> ページやセクションのヘッダー(ロゴ、ナビゲーション等) 01-02
<nav> ナビゲーションリンクのまとまり 01-02
<main> ページの主要コンテンツ領域。1ページに1つだけ 01-02
<article> 自己完結したコンテンツ(ブログ記事、ニュース記事等)
<section> テーマを持つコンテンツのまとまり
<aside> 本文の補足情報(サイドバー等)
<footer> ページやセクションのフッター(著作権表示、リンク等) 01-02
<div> 汎用的なブロック要素。意味を持たないグループ化に使う 01-02
<span> 汎用的なインライン要素。テキストの一部にスタイルを当てるときなどに使う 01-03

見出し・テキスト

タグ役割本編での登場
<h1> 〜 <h6> 見出し。<h1> が最上位、<h6> が最下位。文書の階層構造を示す 01-02
<p> 段落(パラグラフ) 01-02
<br> 改行。閉じタグ不要 01-02
<strong> 重要なテキスト(太字で表示されることが多い) 01-02
<em> 強調したいテキスト(斜体で表示されることが多い)
<small> 注釈や補足など、小さく表示するテキスト
<blockquote> 他の情報源からの引用ブロック
<code> コード(プログラムの一部)をインライン表示する 01-04
<pre> 整形済みテキスト。空白・改行がそのまま表示される。コードブロックに使う 01-04
<hr> 水平線(区切り線)。閉じタグ不要

リンク・画像・メディア

タグ役割本編での登場
<a> ハイパーリンク。href 属性でリンク先を指定する。target="_blank" で新しいタブで開く 01-02
<img> 画像を表示する。src 属性で画像パス、alt 属性で代替テキストを指定。閉じタグ不要 01-02
<video> 動画を埋め込む。src または <source> タグで動画ファイルを指定
<audio> 音声を埋め込む
<iframe> 別のHTMLページを埋め込む(YouTube動画、地図等)

リスト

タグ役割本編での登場
<ul> 順序なしリスト(箇条書き) 01-02
<ol> 順序ありリスト(番号付き) 01-02
<li> リストの項目。<ul> または <ol> の中で使う 01-02
<dl> 説明リスト(定義リスト)。用語と説明のペアを並べるときに使う
<dt> 説明リストの用語(term)
<dd> 説明リストの説明(description)

テーブル(表)

タグ役割本編での登場
<table> 表全体を囲む 04-01
<thead> 表のヘッダー行のグループ
<tbody> 表の本体行のグループ
<tfoot> 表のフッター行のグループ
<tr> 表の行(table row) 04-01
<th> 表の見出しセル(太字・中央揃えで表示されることが多い) 04-01
<td> 表のデータセル 04-01

フォーム

タグ役割本編での登場
<form> フォーム全体を囲む。method で GET/POST を指定、action で送信先を指定 01-05
<input> 入力欄。type 属性で種類(text, email, password, hidden, date, number, checkbox, radio, file, submit 等)を指定 01-05
<textarea> 複数行テキスト入力欄 03-03
<select> ドロップダウン選択リスト
<option> <select> の選択肢
<button> ボタン。type="submit" でフォーム送信、type="button" でJavaScript用ボタン 03-03
<label> 入力欄のラベル。for 属性で <input> の id と紐づける 04-01
<fieldset> フォーム内の入力グループを囲む
<legend> <fieldset> のキャプション

よく使う属性(タグ共通)

属性役割本編での登場
id 要素の一意な識別子。ページ内に同じidは1つだけ。CSSやJSから参照する 01-03
class 要素の分類名。同じclassを複数要素に付けられる。CSSのスタイル適用に使う 01-03
style 要素に直接CSSを書く(インラインスタイル)。できるだけCSSファイルに書くほうが望ましい
src 外部リソースのパス(画像、スクリプト、動画等) 01-02
href リンク先のURL 01-02
alt 画像の代替テキスト。画像が表示できないとき、またはスクリーンリーダーが読み上げるときに使われる 01-02
required フォーム入力欄の必須属性。未入力で送信しようとするとブラウザが警告する 04-01
disabled 入力欄やボタンを無効化する。操作できなくなり、フォーム送信にも含まれない
placeholder 入力欄に薄く表示される案内テキスト。入力し始めると消える
value 入力欄の初期値、または hidden フィールドの値 04-01
name フォーム送信時のパラメータ名。PHPの $_POST['name'] と対応する 01-05
method フォームの送信方法。GET(URLに付く)か POST(本文に含まれる) 01-05
action フォームの送信先URL。省略するとフォームがあるページ自身に送信される 03-03
target リンクの開き方。_blank で新しいタブ、_self で同じタブ(デフォルト)
rel リンク先との関係を示す。noopener noreferrer は外部リンクのセキュリティ対策

使い方のヒント

この一覧を暗記する必要はありません。

「テーブルを作りたい」と思ったとき、この付録を開いて <table> の行を見る。

「フォームで日付入力を受け付けたい」と思ったとき、<input> の type="date" を確認する。

そうやって「引く」ための一覧です。

本編の該当章へのリンクを辿れば、そのタグが実際にどう使われているかをコードの文脈で読み返すことができます。