HTMLチートシート
検索・印刷可能なHTML5リファレンス。文書の骨組み、セマンティックタグ、リンク、メディア、テーブル、フォーム、属性、エンティティを網羅。無料。
Document skeleton & metadata
13<!DOCTYPE html>
HTML5 doctype, first line of the page
<html lang="en">
Root element; lang aids a11y and SEO
<meta charset="utf-8">
Character encoding, first in <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Required for responsive layouts
<title>Page title</title>
Tab label and search result title
<meta name="description" content="...">
Search snippet text (~150 chars)
<link rel="stylesheet" href="app.css">
Attach an external stylesheet
<script src="app.js" defer></script>
Load JS without blocking parsing
<link rel="icon" href="favicon.svg">
Favicon for the browser tab
<link rel="canonical" href="https://ex.com/page">
Preferred URL for duplicate pages
<meta property="og:title" content="...">
Open Graph: social share title
<meta property="og:image" content="...">
Social share preview image
<meta name="robots" content="noindex">
Keep the page out of search engines
Text content
14<h1>...</h1> to <h6>
Headings; one h1 per page is typical
<p>...</p>
Paragraph of text
<br> / <hr>
Line break / thematic divider
<strong> vs <b>
Importance vs purely visual bold
<em> vs <i>
Emphasis vs alternate-voice italics
<mark>highlight</mark>
Highlighted / relevant text
<small> / <s>
Fine print / no-longer-accurate text
<blockquote cite="url">
Long quotation from another source
<q>inline quote</q>
Short quote; browser adds quotes
<pre><code>...</code></pre>
Preformatted block of code
<abbr title="HyperText...">HTML</abbr>
Abbreviation with expansion tooltip
<time datetime="2026-07-27">
Machine-readable date or time
<sub> / <sup>
Subscript / superscript
<kbd>Ctrl+C</kbd>
Keyboard input
Semantic layout
12<header>
Intro content: logo, title, nav
<nav>
Major navigation link blocks
<main>
Primary content; exactly ONE per page
<article>
Self-contained piece (post, card)
<section>
Thematic group, ideally with a heading
<aside>
Tangential content: sidebar, callout
<footer>
Footer of the page or a section
<figure><figcaption>
Media with its caption
<address>
Contact info for its nearest article
<article><h2>...</h2></article>
Sections get their own heading level
<div>
No meaning; last resort for styling
<span>
Inline, meaningless hook for CSS/JS
Links & navigation
11<a href="https://example.com">
Basic hyperlink
<a href="#pricing">
Jump to the element with that id
<a href="mailto:hi@example.com">
Open the default mail client
<a href="tel:+1234567890">
Click-to-call phone link
target="_blank"
Open in a new tab
rel="noopener noreferrer"
Pair with _blank for safety/privacy
rel="nofollow"
Tell crawlers not to endorse the link
<a href="file.pdf" download>
Download instead of navigating
download="report-2026.pdf"
Suggest a filename for the download
<nav><ul><li><a>...</a></li></ul></nav>
Conventional site menu markup
<a href="#main" class="skip-link">
Skip-to-content link for keyboards
Images & media
12<img src="cat.jpg" alt="A sleeping cat">
alt is required; empty for decorative
<img ... width="800" height="600">
Reserve space, avoid layout shift
loading="lazy"
Defer offscreen images/iframes
decoding="async"
Decode off the main thread
srcset="s.jpg 480w, l.jpg 1024w" sizes="100vw"
Responsive image candidates
<picture><source type="image/webp" ...><img ...></picture>
Format/art-direction fallback
<video src="clip.mp4" controls poster="cover.jpg">
Video player with preview image
<video autoplay muted loop playsinline>
Background video that autoplays
<audio src="talk.mp3" controls>
Audio player
<source src="v.webm" type="video/webm">
Multiple formats inside video/audio
<track kind="captions" src="en.vtt" srclang="en">
Captions/subtitles for video
<figure><img ...><figcaption>...</figcaption></figure>
Captioned image
Lists & tables
11<ul><li>...</li></ul>
Unordered (bulleted) list
<ol><li>...</li></ol>
Ordered (numbered) list
<ol start="5" reversed>
Custom start / count down
<ol type="a">
Numbering style: 1, a, A, i, I
<dl><dt>Term</dt><dd>Definition</dd></dl>
Description (key-value) list
<table><thead><tbody><tfoot>
Table with semantic row groups
<caption>Sales 2026</caption>
Accessible table title
<th scope="col"> / scope="row"
Header cells tied to col or row
<td colspan="2"> / rowspan="2">
Cell spanning columns / rows
<colgroup><col span="2" class="wide">
Style whole columns at once
Nested list: <li>...<ul>...</ul></li>
Sub-list goes INSIDE the li
Forms: input types
14<input type="text">
Single-line text (the default)
<input type="email">
Validates format; email keyboard
<input type="password">
Masked input
<input type="number" min="0" step="1">
Numeric with spinner
<input type="tel"> / type="url">
Phone / URL with fitting keyboards
<input type="search">
Search field with clear button
<input type="date"> / "time" / "datetime-local"
Native date and time pickers
<input type="color">
Native color picker
<input type="range" min="0" max="100">
Slider control
<input type="file" accept="image/*" multiple>
File upload with type filter
<input type="checkbox" checked>
On/off toggle
<input type="radio" name="plan">
Same name = one choice per group
<input type="hidden" name="token">
Submitted but not displayed
<input type="submit"> / <button>
Submit the surrounding form
Forms: structure & validation
15<form action="/save" method="post">
Where and how the data is sent
<label for="email">
Ties the label to input id="email"
<label>Email <input ...></label>
Wrapping works without for/id
name="email"
The key used in the submitted data
required
Blocks submit while empty
pattern="[0-9]{4}"
Regex the value must fully match
minlength / maxlength
Text length constraints
min / max / step
Constraints for numbers and dates
placeholder="you@example.com"
Hint text; NOT a label substitute
autocomplete="email"
Help browsers autofill correctly
<select><optgroup><option>
Dropdown with grouped options
<textarea rows="4" name="msg">
Multi-line text input
<fieldset><legend>Shipping</legend>
Group related fields with a title
<input list="fruits"><datalist id="fruits">
Text input with suggestions
<form novalidate>
Skip built-in validation on submit
Interactive elements
13<details><summary>More</summary>...</details>
Native disclosure, no JS needed
<details open>
Expanded by default
<details name="faq">
Same name = exclusive accordion
<dialog id="dlg">...</dialog>
Native modal/dialog element
dlg.showModal() / dlg.close()
Open as modal with backdrop / close
<form method="dialog">
Submit closes the parent dialog
::backdrop
Style the dimmed area behind a modal
<div popover id="tip">...</div>
Top-layer popover, light-dismiss
<button popovertarget="tip">
Toggle a popover without JS
<progress value="70" max="100">
Task progress bar
<meter value="0.6" low="0.3" high="0.8">
Gauge within a known range
<output for="a b">
Result of a calculation in a form
<button type="button">
Button that does NOT submit forms
Embedded content
11<iframe src="https://ex.com" title="Map">
Embed a page; title is required a11y
<iframe sandbox="allow-scripts">
Restrict what the frame may do
<iframe allow="fullscreen; autoplay">
Grant specific feature permissions
<iframe loading="lazy">
Defer offscreen embeds (maps, videos)
<canvas id="chart" width="600" height="300">
Scriptable bitmap drawing surface
canvas.getContext('2d')
Get the 2D drawing API
<svg viewBox="0 0 100 100">...</svg>
Inline vector graphics, CSS-stylable
<svg><use href="#icon-x"/></svg>
Reuse a defined SVG symbol
<object data="doc.pdf" type="application/pdf">
Embed a PDF or other resource
<embed src="file.svg">
Legacy embed for plugin content
<noscript>...</noscript>
Fallback when JS is disabled
Global attributes
14id="unique-name"
Unique hook for CSS, JS, anchors
class="card featured"
Space-separated style hooks
data-user-id="42"
Custom data; el.dataset.userId in JS
title="Tooltip text"
Hover tooltip (not touch-friendly)
hidden
Remove from display and a11y tree
tabindex="0" / "-1"
Make focusable / focus via JS only
contenteditable="true"
Let users edit the element inline
spellcheck="false"
Disable spell checking
lang="fr" / dir="rtl"
Per-element language and direction
draggable="true"
Enable native drag and drop
inert
Block focus and clicks on a subtree
aria-label="Close"
Accessible name for icon buttons
aria-hidden="true"
Hide decorative bits from readers
role="alert"
ARIA role when no semantic tag fits
Entities & special characters
12&
&: must be escaped in HTML
< / >
< and >: escape to show tags as text
" / '
Double / single quote in attributes
Non-breaking space (no line wrap)
© / ® / ™
Copyright, registered, trademark
: / –
Em dash: and en dash –
…
Ellipsis …
→ / ←
Right / left arrows
× / ÷
Multiplication and division signs
€ / £ / ¥
Currency symbols
👍
Any Unicode char by decimal code
<meta charset="utf-8"> first
With UTF-8, most chars need no entity
「:q」に一致する項目はありません。
HTMLチートシートについて
このHTMLチートシートは、タグの語彙全体を1つの検索可能なページにまとめています。文書の骨組みとメタデータ、テキストコンテンツ、セマンティックレイアウト、リンクとナビゲーション、画像とメディア、リストとテーブル、フォームのinput種類、フォーム構造と検証、インタラクティブ要素、埋め込みコンテンツ、グローバル属性、エンティティと特殊文字です。
It is as useful for the details as for the tags: which input type to use for a date or a colour, the required and pattern validation attributes, the semantic difference between article, section and aside, or the entity code for a non-breaking space and a curly quote.
このシートは無料でクライアント側で動作します。検索ボックスで行をリアルタイムに絞り込み、追従する目次でセクション間を移動し、任意のスニペットをワンクリックでコピーし、デスクでの参照用にページを印刷できます。
HTMLチートシートの使い方
- 文書の骨組み・メタデータやセマンティックレイアウトからフォーム、エンティティまで、各セクションにざっと目を通します。
- picture、aria-label、requiredなどのタグや属性を検索して、すべての行をリアルタイムに絞り込みます。
- フィールドに合ったコントロールが必要な場合は、フォーム: input種類のセクションに移動します。
- スニペットまたはそのコピーアイコンをクリックして、HTMLをクリップボードにコピーします。
- シートを印刷して、オフラインのHTMLリファレンスとして使います。
よくある質問
文書の骨組みとメタデータ、テキストコンテンツ、セマンティックレイアウト、リンクとナビゲーション、画像とメディア、リストとテーブル、フォームのinput種類、フォーム構造と検証、インタラクティブ要素、埋め込みコンテンツ、グローバル属性、エンティティと特殊文字の12セクションです。
はい。セマンティックなセクショニング要素、input種類の全セット、ネイティブの検証属性、pictureとvideo、detailsとdialogなど、モダンなHTML5を中心に構成されています。
2つのセクションで扱っています。1つはすべてのinput種類とその用途を一覧にし、もう1つはlabel、fieldset、required、pattern、min、maxなど、ネイティブ検証全般を扱っています。
はい。どのスニペットでも、ホバー時に表示されるコピーアイコンをクリックすれば、簡単な確認表示とともにクリップボードにコピーされます。
はい、完全無料です。検索・印刷が可能で、登録不要でブラウザ内に表示されます。
人気の検索
html チートシート
html タグ一覧
html5 セマンティックタグ
html フォーム input 種類
html テーブル 構文
html エンティティ一覧
html 属性 リファレンス
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。