はじめに
よく使うタグだけをまとめました。
ほぼ自分の備忘録として後で見返せるように作成しています。
間違いなどあれば教えていただけると嬉しいです。
HTML基本構造
<!DOCTYPE html> <!-- HTML5宣言 -->
<html lang="ja"> <!-- HTML文書の開始、言語指定 -->
<head> <!-- ヘッダー情報（ブラウザには表示されない） -->
<meta charset="UTF-8"> <!-- 文字コードの指定 -->
<title>ページタイトル</title> <!-- ブラウザのタブに表示されるタイトル -->
<!-- その他スタイルのリンクなど必要なものを追加する -->
</head>
<body>
<!-- ここにコンテンツを記述 -->
</body>
</html>
コンテンツ構造
| タグ |
説明 |
例 |
<header> |
ヘッダーセクション |
<header>...</header> |
<nav> |
ナビゲーションリンク |
<nav>...</nav> |
<main> |
メインコンテンツ |
<main>...</main> |
<section> |
文書のセクション |
<section>...</section> |
<article> |
独立したコンテンツ |
<article>...</article> |
<aside> |
サイドコンテンツ |
<aside>...</aside> |
<footer> |
フッターセクション |
<footer>...</footer> |
<div> |
汎用ブロック要素 |
<div class="container">...</div> |
<span> |
インライン要素 |
<span class="highlight">テキスト</span> |
テキスト要素
| タグ |
説明 |
例 |
<h1> - <h6>
|
見出し（レベル1-6） |
<h1>メインタイトル</h1> |
<p> |
段落 |
<p>テキスト</p> |
<strong> |
重要なテキスト（太字） |
<strong>重要</strong> |
<em> |
強調テキスト（斜体） |
<em>強調</em> |
<br> |
改行 |
テキスト<br>改行後 |
<hr> |
水平線 |
<hr> |
<blockquote> |
引用ブロック |
<blockquote>引用文</blockquote> |
<code> |
コード |
<code>var x = 10;</code> |
<pre> |
整形済みテキスト |
<pre>コード ブロック</pre> |
リスト
| タグ |
説明 |
例 |
<ul> |
順序なしリスト |
<ul><li>項目1</li></ul> |
<ol> |
順序付きリスト |
<ol><li>手順1</li></ol> |
<li> |
リスト項目 |
<li>リスト項目</li> |
<dl> |
定義リスト |
<dl><dt>用語</dt><dd>説明</dd></dl> |
<dt> |
定義用語 |
<dt>HTML</dt> |
<dd> |
定義説明 |
<dd>ハイパーテキストマークアップ言語</dd> |
フォーム要素
| タグ |
説明 |
例 |
<form> |
フォーム |
<form action="/submit" method="post">...</form> |
<input> |
入力フィールド |
<input type="text" name="username"> |
<textarea> |
複数行テキスト入力 |
<textarea name="message"></textarea> |
<button> |
ボタン |
<button type="submit">送信</button> |
<select> |
ドロップダウンリスト |
<select name="options"><option>選択肢1</option></select> |
<option> |
ドロップダウンの選択肢 |
<option value="1">選択肢1</option> |
<optgroup> |
オプショングループ |
<optgroup label="グループ1"><option>...</option></optgroup> |
<label> |
フォーム要素のラベル |
<label for="name">名前:</label> |
<fieldset> |
フォーム要素のグループ |
<fieldset><legend>個人情報</legend>...</fieldset> |
<legend> |
フィールドセットの説明 |
<legend>連絡先</legend> |
<datalist> |
入力候補リスト |
<datalist id="browsers"><option value="Chrome"></datalist> |
<progress> |
進捗バー |
<progress value="70" max="100"></progress> |
入力タイプ
| type属性値 |
説明 |
例 |
text |
テキスト入力 |
<input type="text"> |
password |
パスワード入力 |
<input type="password"> |
email |
メールアドレス入力 |
<input type="email"> |
number |
数値入力 |
<input type="number" min="1" max="10"> |
checkbox |
チェックボックス |
<input type="checkbox"> |
radio |
ラジオボタン |
<input type="radio"> |
date |
日付選択 |
<input type="date"> |
time |
時間選択 |
<input type="time"> |
datetime-local |
日時選択 |
<input type="datetime-local"> |
file |
ファイル選択 |
<input type="file"> |
range |
範囲選択 |
<input type="range" min="0" max="100"> |
color |
色選択 |
<input type="color"> |
search |
検索フィールド |
<input type="search"> |
tel |
電話番号入力 |
<input type="tel"> |
url |
URL入力 |
<input type="url"> |
hidden |
非表示フィールド |
<input type="hidden" name="id" value="123"> |
submit |
送信ボタン |
<input type="submit" value="送信"> |
reset |
リセットボタン |
<input type="reset" value="リセット"> |
button |
汎用ボタン |
<input type="button" value="クリック"> |
メディア要素
| タグ |
説明 |
例 |
<img> |
画像 |
<img src="image.jpg" alt="説明"> |
<picture> |
画像（レスポンシブ） |
<picture><source srcset="large.jpg" media="(min-width: 800px)"><img src="small.jpg"></picture> |
<video> |
動画 |
<video src="video.mp4" controls></video> |
<audio> |
音声 |
<audio src="audio.mp3" controls></audio> |
<source> |
メディアリソース |
<source src="video.mp4" type="video/mp4"> |
<track> |
字幕・キャプション |
<track kind="subtitles" src="captions.vtt" srclang="ja"> |
<canvas> |
描画領域 |
<canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> |
SVGグラフィックス |
<svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg> |
<iframe> |
インラインフレーム |
<iframe src="page.html"></iframe> |
テーブル
| タグ |
説明 |
例 |
<table> |
テーブル |
<table>...</table> |
<thead> |
テーブルヘッダー部分 |
<thead>...</thead> |
<tbody> |
テーブル本体部分 |
<tbody>...</tbody> |
<tfoot> |
テーブルフッター部分 |
<tfoot>...</tfoot> |
<tr> |
テーブル行 |
<tr>...</tr> |
<th> |
テーブルヘッダーセル |
<th>見出し</th> |
<td> |
テーブルデータセル |
<td>データ</td> |
<caption> |
テーブルキャプション |
<caption>テーブルの説明</caption> |
<colgroup> |
列グループ |
<colgroup><col span="2" style="background-color:red"></colgroup> |
<col> |
列の属性指定 |
<col style="width:200px"> |
リンク
| タグ・属性 |
説明 |
例 |
<a> |
ハイパーリンク |
<a href="page.html">リンク</a> |
href |
リンク先URL |
href="https://example.com" |
target |
リンクの開き方 |
target="_blank" (新しいタブで開く) |
rel |
リンク関係 |
rel="noopener noreferrer" |
download |
ダウンロードリンク |
download="filename.pdf" |
モバイル・レスポンシブ対応
| タグ |
説明 |
例 |
<meta name="viewport"> |
レスポンシブデザイン設定 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta name="theme-color"> |
ブラウザテーマカラー |
<meta name="theme-color" content="#4285f4"> |
<link rel="manifest"> |
PWAマニフェスト |
<link rel="manifest" href="manifest.json"> |
<meta name="description"> |
サイトの説明 |
<meta name="description" content="サイトの説明文"> |
セマンティックWeb / HTML5
| タグ |
説明 |
例 |
<time> |
日時 |
<time datetime="2025-03-25">3月25日</time> |
<mark> |
ハイライト |
<mark>重要</mark> |
<figure> |
図表コンテナ |
<figure><img src="img.jpg"><figcaption>説明</figcaption></figure> |
<figcaption> |
図表の説明 |
<figcaption>図1: グラフの説明</figcaption> |
<details> |
折りたたみコンテンツ |
<details><summary>詳細</summary>内容...</details> |
<summary> |
折りたたみ見出し |
<summary>クリックして開く</summary> |
<dialog> |
ダイアログボックス |
<dialog open>ダイアログ内容</dialog> |
アクセシビリティ
| タグ/属性 |
説明 |
例 |
aria-* |
ARIA属性 |
<button aria-label="閉じる">✕</button> |
role |
要素の役割 |
<div role="alert">通知</div> |
tabindex |
タブ移動順序 |
<div tabindex="0">選択可能</div> |
aria-hidden |
スクリーンリーダーから隠す |
<div aria-hidden="true">装飾用</div> |
aria-live |
ライブリージョン |
<div aria-live="polite">更新される情報</div> |
aria-expanded |
展開状態 |
<button aria-expanded="false">メニュー</button> |
aria-describedby |
要素の説明 |
<input aria-describedby="hint"> |
aria-labelledby |
要素のラベル |
<div aria-labelledby="heading"> |
aria-required |
必須項目 |
<input aria-required="true"> |
メタデータ・ドキュメント情報
| タグ |
説明 |
例 |
<meta charset> |
文字エンコーディング |
<meta charset="UTF-8"> |
<meta http-equiv> |
HTTPヘッダー設定 |
<meta http-equiv="refresh" content="30"> |
<base> |
ベースURL |
<base href="https://example.com/"> |
<style> |
スタイル定義 |
<style>body { color: blue; }</style> |
<noscript> |
JavaScriptなし時の代替 |
<noscript>JavaScriptが必要です</noscript> |
<template> |
テンプレート |
<template id="tpl"><p>テンプレート内容</p></template> |
<link rel="preconnect"> |
事前接続ヒント |
<link rel="preconnect" href="https://fonts.gstatic.com"> |
<link rel="preload"> |
事前読み込み |
<link rel="preload" href="font.woff2" as="font"> |
グローバル属性
| 属性 |
説明 |
例 |
hidden |
要素を非表示にする |
<div hidden>非表示コンテンツ</div> |
id |
要素の一意の識別子 |
<div id="main">メインコンテンツ</div> |
class |
要素のクラス名 |
<div class="container">コンテンツ</div> |
style |
インラインスタイル |
<div style="color: red;">赤いテキスト</div> |
title |
追加情報（ツールチップ） |
<a title="詳細ページへ">詳細</a> |
lang |
言語の指定 |
<p lang="ja">日本語テキスト</p> |
dir |
テキストの方向 |
<p dir="rtl">右から左に表示</p> |
データ属性
| 属性 |
説明 |
例 |
data-* |
フルーツの例 |
<li data-fruit-type="citrus" data-season="winter" data-ripe="true">みかん</li> |
data-* |
CSSでの活用 |
CSS: li[data-fruit-type="citrus"] { color: orange; }
li[data-season="winter"][data-ripe="true"] { font-weight: bold; }
|
data-* |
JavaScriptでの活用 |
JS: // 値の取得
const isCitrus = element.dataset.fruitType === "citrus";
// 値の設定
element.dataset.price = "100";
// 条件分岐
if (element.dataset.ripe === "true") { /* 熟した果物の処理 */ }
|
さいごに
間違いや足りないものがあれば適宜更新していきます。
