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 치트시트는 태그 전체를 검색 가능한 한 페이지에 담았습니다: 문서 골격과 메타데이터, 텍스트 콘텐츠, 시맨틱 레이아웃, 링크와 내비게이션, 이미지와 미디어, 목록과 표, 폼 입력 타입, 폼 구조와 유효성 검사, 인터랙티브 요소, 임베디드 콘텐츠, 전역 속성, 엔티티와 특수 문자까지 다룹니다.
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 같은 태그나 속성을 검색해 모든 행을 실시간으로 필터링하세요.
- 필드에 맞는 컨트롤이 필요할 때는 폼: 입력 타입 섹션으로 이동하세요.
- 스니펫이나 복사 아이콘을 클릭해 HTML을 클립보드에 복사하세요.
- 오프라인 HTML 참고자료로 시트를 인쇄하세요.
자주 묻는 질문
12개 섹션입니다: 문서 골격과 메타데이터, 텍스트 콘텐츠, 시맨틱 레이아웃, 링크와 내비게이션, 이미지와 미디어, 목록과 표, 폼 입력 타입, 폼 구조와 유효성 검사, 인터랙티브 요소, 임베디드 콘텐츠, 전역 속성, 엔티티와 특수 문자입니다.
네. 시맨틱 섹션 요소, 전체 입력 타입, 네이티브 유효성 검사 속성, picture와 video, details와 dialog 등 최신 HTML5를 중심으로 구성되어 있습니다.
두 섹션에서 다룹니다: 하나는 모든 입력 타입과 그 용도를 나열하고, 다른 하나는 label, fieldset, required, pattern, min, max 등 네이티브 유효성 검사를 다룹니다.
네. 어떤 스니펫이든 클릭하거나 마우스오버 시 나타나는 복사 아이콘을 클릭하면 짧은 확인 메시지와 함께 클립보드에 저장됩니다.
네, 완전히 무료입니다: 검색과 인쇄가 가능하며 가입 없이 브라우저에서 렌더링됩니다.
인기 검색어
html 치트시트
html 태그 목록
html5 시맨틱 태그
html 폼 입력 타입
html 표 문법
html 엔티티 목록
html 속성 참고자료
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.