HTML Cheat Sheet
Aranabilir, yazdırılabilir bir HTML5 referansı — belge iskeleti, semantik etiketler, bağlantılar, medya, tablolar, formlar, öznitelikler ve entity'ler. Ücretsiz.
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” ile eşleşen bir girdi yok.
HTML Cheat Sheet Hakkında
Bu HTML cheat sheet, tüm etiket listesini tek bir aranabilir sayfaya koyar: belge iskeleti ve meta veriler, metin içeriği, semantik düzen, bağlantılar ve gezinme, görseller ve medya, listeler ve tablolar, form girdi türleri, form yapısı ve doğrulama, etkileşimli öğeler, gömülü içerik, genel öznitelikler ve entity'ler ve özel karakterler.
Etiketler kadar ayrıntılar için de kullanışlıdır — bir tarih veya renk için hangi input türünün kullanılacağı, required ve pattern doğrulama öznitelikleri, article, section ve aside arasındaki semantik fark veya bölünmez boşluk ve kıvrık tırnak için entity kodu.
Bu sayfa ücretsiz ve istemci tarafındadır: arama kutusuyla satırları canlı olarak filtreleyin, yapışkan içindekiler tablosundan bölümler arasında atlayın, herhangi bir kod parçasını tek tıklamayla kopyalayın ve sayfayı masanızda referans olarak yazdırın.
HTML Cheat Sheet Nasıl Kullanılır
- Belge iskeleti ve meta veriler ile Semantik düzenden Formlar ve Entity'lere kadar bölümleri gözden geçirin.
- picture, aria-label veya required gibi bir etiket veya öznitelik arayarak her satırı canlı olarak filtreleyin.
- Bir alan için doğru kontrole ihtiyacınız olduğunda Formlar — girdi türleri bölümüne atlayın.
- HTML'yi panonuza kopyalamak için bir kod parçasına veya kopyala simgesine tıklayın.
- Çevrimdışı HTML referansı için sayfayı yazdırın.
Sıkça sorulan sorular
On iki bölüm: belge iskeleti ve meta veriler, metin içeriği, semantik düzen, bağlantılar ve gezinme, görseller ve medya, listeler ve tablolar, form girdi türleri, form yapısı ve doğrulama, etkileşimli öğeler, gömülü içerik, genel öznitelikler ve entity'ler ve özel karakterler.
Evet. Modern HTML5 etrafında inşa edilmiştir — semantik bölümleme öğeleri, tam girdi türleri seti, yerel doğrulama öznitelikleri, picture ve video, details ve dialog.
İki bölüm kapsar: biri ne için olduğuyla birlikte her girdi türünü listeler, diğeri label'lar, fieldset'ler, required, pattern, min ve max ve yerel doğrulamanın geri kalanını kapsar.
Evet. Herhangi bir kod parçasına veya üzerine gelince görünen kopyala simgesine tıklayın, kısa bir onaylamayla panonuza kopyalanır.
Evet, tamamen ücretsiz — aranabilir, yazdırılabilir ve tarayıcınızda kayıt olmadan çalışır.
Popüler aramalar
html cheat sheet
html etiketleri listesi
html5 semantik etiketleri
html form input türleri
html tablo söz dizimi
html entity listesi
html öznitelik referansı
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.