HTML チートシート
最終更新
文書構造
すべての HTML ページはこの骨組みから始まります。
| 要素 | 機能 |
|---|---|
<!DOCTYPE html> | 文書を HTML5 として宣言 (最初の行) |
<html lang="en"> | ルート要素。lang で言語を指定 |
<head> | メタデータ: タイトル、リンク、スクリプト。ページには表示されない |
<meta charset="UTF-8"> | 文字エンコーディング (必ず含める) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | モバイルでのレスポンシブな拡大縮小 |
<title> | ブラウザのタブと検索結果に表示されるページタイトル |
<body> | ページに表示されるものはすべてここに入る |
テキストと見出し
| 要素 | 機能 |
|---|---|
<h1> … <h6> | 見出し。<h1> が最も重要 (ページに 1 つ) |
<p> | テキストの段落 |
<br> | 改行 (終了タグなし) |
<hr> | テーマの区切り / 水平線 |
<strong> | 重要なテキスト (太字) |
<em> | 強調するテキスト (斜体) |
<span> | テキストの一部にスタイルを当てるインラインコンテナ |
<code> | インラインコード |
<pre> | 整形済みテキスト (空白を保つ) |
<blockquote> | 引用のブロック |
リンクと画像
| 要素 | 構文 |
|---|---|
| リンク | <a href="https://coddy.tech">Coddy</a> |
| 新しいタブで開く | <a href="..." target="_blank" rel="noopener"> |
| アンカー (id へジャンプ) | <a href="#section">Jump</a> |
| 画像 | <img src="cat.png" alt="A cat" width="200"> |
| レスポンシブ画像 | <img src="..." srcset="..." sizes="..."> |
| キャプション付きの図 | <figure><img ...><figcaption>…</figcaption></figure> |
リスト
| 要素 | 機能 |
|---|---|
<ul> | 順序なし (箇条書き) リスト |
<ol> | 順序あり (番号付き) リスト |
<li> | リスト項目 (<ul> または <ol> の中) |
<dl> | 説明リスト |
<dt> / <dd> | 説明の用語 / 説明の内容 |
テーブル
| 要素 | 機能 |
|---|---|
<table> | テーブルのコンテナ |
<thead> / <tbody> / <tfoot> | テーブルのヘッダー、本体、フッターのグループ |
<tr> | テーブルの行 |
<th> | ヘッダーセル (太字・中央寄せ) |
<td> | データセル |
colspan / rowspan | 列方向 / 行方向にセルを結合 |
フォームと入力
入力を集めるあらゆるフォームの構成要素。
| 要素 | 構文 / 目的 |
|---|---|
| フォーム | <form action="/submit" method="post"> |
| テキスト入力 | <input type="text" name="q" placeholder="Search"> |
| メール / パスワード | <input type="email">, <input type="password"> |
| チェックボックス / ラジオ | <input type="checkbox">, <input type="radio"> |
| 数値 / 日付 | <input type="number">, <input type="date"> |
| ラベル | <label for="q">Search</label> |
| 複数行 | <textarea rows="4"></textarea> |
| ドロップダウン | <select><option>One</option></select> |
| ボタン | <button type="submit">Send</button> |
| 必須フィールド | <input required> |
セマンティックタグとレイアウトタグ
ブラウザ、スクリーンリーダー、検索エンジンがページを理解できるよう、汎用的な <div> の代わりにこれらを使いましょう。
| 要素 | 何を表すか |
|---|---|
<header> | ページやセクションの上部 (ロゴ、ナビ) |
<nav> | ナビゲーションリンク |
<main> | 主要なコンテンツ (ページに 1 つ) |
<section> | テーマごとのコンテンツのまとまり |
<article> | 独立して成り立つコンテンツ (投稿、カード) |
<aside> | サイドバー / 補足的なコンテンツ |
<footer> | ページやセクションの下部 |
<div> | 汎用のブロックコンテナ (意味を持たない) |
よく使うグローバル属性
| 属性 | 機能 |
|---|---|
id | 要素の一意な識別子 |
class | 1 つ以上のクラス名 (CSS / JS 用) |
style | インライン CSS (控えめに使う) |
title | ホバー時のツールチップのテキスト |
data-* | カスタムデータ属性、例: data-id="42" |
hidden | 要素を隠す |
よく使う HTML タグと属性を、用途ごとにまとめました。この HTML チートシートは、ページの骨組み、テキストとリンク、画像とメディア、リスト、テーブル、フォーム、そしてマークアップに意味を与えるセマンティックタグを網羅しています。
すべて標準の HTML5 で、あらゆるモダンブラウザで動作します。タグをコピーするか、HTML プレイグラウンドを開いてライブプレビューつきで編集してください。セットアップは不要です。
HTML チートシート よくある質問
この HTML チートシートは無料ですか?
はい。この HTML チートシートは登録不要で無料で使えます。ブックマークしておけば、タグや属性を調べたいときにいつでも戻ってこられます。
<section> と <div> の違いは何ですか?
<section> はセマンティックタグで、その中身が意味のあるテーマごとのまとまりであることをブラウザやスクリーンリーダーに伝え、通常は見出しを持ちます。<div> は意味を持たず、スタイリングやスクリプト用の汎用コンテナにすぎません。合うものがあればセマンティックタグ (<section>、<article>、<nav>) を使い、どれも合わないときだけ <div> を使いましょう。すべての HTML タグに終了タグは必要ですか?
ほとんどは必要です (
<p>...</p>) が、中身を持てない「空 (void)」要素はいくつか不要です: <img>、<br>、<hr>、<input>、<meta>、<link>。HTML5 では末尾のスラッシュは付けても付けなくても構いません。HTML をオンラインで練習できますか?
はい。HTML プレイグラウンドを開けば、ライブプレビューつきでブラウザ上で HTML を書けます。インストールは不要です。体系的に学びたいときは、Coddy の無料インタラクティブ HTML コースが、タグ、フォーム、レイアウトを段階的に教えてくれます。
このチートシートは初心者に向いていますか?
はい。ページの骨組みと最初に使う日常的なタグから始め、フォームやセマンティックなマークアップへと進むので、初日から上のセクションを使えます。
関連リソース
他のチートシート
