HTML چیٹ شیٹ

مفت

قابل تلاش، قابل پرنٹ HTML5 حوالہ: دستاویز کا ڈھانچہ، سیمینٹک ٹیگز، لنکس، میڈیا، جدولیں، فارمز، خصوصیات اور اینٹیٹیز۔ مفت۔

Document skeleton & metadata

<!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

<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

<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

<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

<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

<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

<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

<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

<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

<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

id="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

&

&: must be escaped in HTML

< / >

< and >: escape to show tags as text

" / '

Double / single quote in attributes

 

Non-breaking space (no line wrap)

© / ® / ™

: / –

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 چیٹ شیٹ استعمال کرنے کا طریقہ

حصوں پر نظر ڈالیں، Document skeleton & metadata اور Semantic layout سے لے کر Forms سے ہوتے ہوئے Entities تک۔
picture، aria-label یا required جیسا کوئی ٹیگ یا خصوصیت تلاش کریں تاکہ ہر قطار لائیو فلٹر ہو جائے۔
جب آپ کو کسی فیلڈ کے لیے درست کنٹرول چاہیے ہو تو Forms: input types پر جائیں۔
HTML کو اپنی کلپ بورڈ پر کاپی کرنے کے لیے کسی اسنیپٹ یا اس کے کاپی آئیکن پر کلک کریں۔
آف لائن HTML حوالے کے لیے شیٹ پرنٹ کریں۔

اکثر پوچھے جانے والے سوالات

بارہ حصے: دستاویز کا ڈھانچہ اور میٹا ڈیٹا، متنی مواد، سیمینٹک لے آؤٹ، لنکس اور نیویگیشن، تصاویر اور میڈیا، فہرستیں اور جدولیں، فارم ان پٹ کی اقسام، فارم کا ڈھانچہ اور ویلیڈیشن، انٹرایکٹو عناصر، ایمبیڈڈ مواد، عمومی خصوصیات، اور اینٹیٹیز اور خاص حروف۔

جی ہاں۔ یہ جدید HTML5 کے گرد بنی ہے: سیمینٹک سیکشننگ عناصر، ان پٹ کی اقسام کا مکمل سیٹ، نیٹو ویلیڈیشن کی خصوصیات، picture اور video، details اور dialog۔

دو حصے کرتے ہیں: ایک ہر ان پٹ کی قسم اور اس کا مقصد درج کرتا ہے، دوسرا لیبلز، فیلڈ سیٹس، required، pattern، min اور max اور نیٹو ویلیڈیشن کے باقی حصوں کا احاطہ کرتا ہے۔

جی ہاں۔ کسی بھی اسنیپٹ یا ہوور پر ظاہر ہونے والے کاپی آئیکن پر کلک کریں اور وہ مختصر تصدیق کے ساتھ آپ کی کلپ بورڈ پر پہنچ جاتا ہے۔

جی ہاں، مکمل طور پر مفت: قابل تلاش، قابل پرنٹ اور بغیر سائن اپ کے آپ کے براؤزر میں رینڈر ہوتا ہے۔

HTML چیٹ شیٹ

Document skeleton & metadata

Text content

Semantic layout

Links & navigation

Images & media

Lists & tables

Forms: input types

Forms: structure & validation

Interactive elements

Embedded content

Global attributes

Entities & special characters

HTML چیٹ شیٹ کے بارے میں

HTML چیٹ شیٹ استعمال کرنے کا طریقہ

اکثر پوچھے جانے والے سوالات

HTML چیٹ شیٹ میں کیا شامل ہے؟

کیا یہ HTML5 ہے؟

کیا یہ فارمز کا گہرائی سے احاطہ کرتی ہے؟

کیا میں ایک کلک سے مارک اپ کاپی کر سکتا ہوں؟

کیا HTML حوالہ مفت ہے؟

متعلقہ ٹولز

مقبول تلاشیں

یہ ٹول ایمبیڈ کریں