HTML टैग्स हर वेब पेज के निर्माण खंड हैं। यह चीट शीट सबसे सामान्य HTML एलिमेंट्स को उद्देश्य के अनुसार समूहित करती है — दस्तावेज़ संरचना, सिमेंटिक लेआउट, टेक्स्ट कंटेंट, फ़ॉर्म, मीडिया और टेबल — ताकि आप सही टैग ढूंढकर उसे सही ढंग से उपयोग कर सकें।
प्रत्येक पंक्ति एलिमेंट और वह क्या करता है इसका संक्षिप्त नोट दिखाती है। सामान्य div के बजाय सिमेंटिक टैग (जैसे header, nav, main और article) उपयोग करना पहुंच और SEO सुधारता है। मार्कअप साफ़ करना है? <a href="/tools/html-formatter">HTML Formatter</a> आज़माएं।
Document Structure
| Tag | What it does |
|---|
<!DOCTYPE html> | Declares the document as HTML5. |
<html> | Root element that wraps the whole page. |
<head> | Holds metadata, title, and links to CSS/scripts. |
<body> | Holds all visible page content. |
<meta> | Metadata such as charset, viewport, and description. |
<title> | The page title shown in the browser tab and search results. |
<link> | Links external resources, most often a stylesheet. |
<script> | Embeds or links JavaScript. |
Semantic Layout
| Tag | What it does |
|---|
<header> | Introductory content or navigation for a section. |
<nav> | A block of navigation links. |
<main> | The main, unique content of the page. |
<section> | A thematic grouping of content. |
<article> | Self-contained content that could stand alone. |
<aside> | Content tangential to the main content, like a sidebar. |
<footer> | Footer for a section or the page. |
Text Content
| Tag | What it does |
|---|
<h1>–<h6> | Section headings, h1 being the most important. |
<p> | A paragraph of text. |
<a href> | A hyperlink to another page or resource. |
<strong> / <em> | Strong importance (bold) / emphasis (italic). |
<ul> / <ol> / <li> | Unordered list, ordered list, and list items. |
<blockquote> | A quoted section from another source. |
<code> / <pre> | Inline code / preformatted block that preserves whitespace. |
<br> / <hr> | Line break / thematic horizontal divider. |
Forms
| Tag | What it does |
|---|
<form> | A container for interactive form controls. |
<input> | A single-line field; type sets its behavior (text, email, checkbox…). |
<label> | A caption tied to a form control for accessibility. |
<textarea> | A multi-line text field. |
<select> / <option> | A dropdown menu and its choices. |
<button> | A clickable button. |
Media
| Tag | What it does |
|---|
<img src alt> | An image; alt provides accessible text. |
<picture> | Serves different image sources for different conditions. |
<video> / <audio> | Embeds video / audio with playback controls. |
<source> | A media source inside picture, video, or audio. |
<iframe> | Embeds another HTML page inside the current one. |
Tables
| Tag | What it does |
|---|
<table> | A table container. |
<thead> / <tbody> / <tfoot> | Groups the header, body, and footer rows. |
<tr> | A table row. |
<th> / <td> | A header cell / a data cell. |
HTML टैग्स चीट शीट से जुड़े सामान्य प्रश्न
सिमेंटिक HTML क्या है और यह क्यों मायने रखता है?
सिमेंटिक HTML ऐसे टैग उपयोग करता है जो अपना अर्थ बताते हैं — <header>, <nav>, <main>, <article>, <footer> — सामान्य <div> के बजाय। यह स्क्रीन रीडर की मदद करता है, SEO सुधारता है, और आपके मार्कअप को पढ़ने व बनाए रखने में आसान बनाता है।
section और div में क्या अंतर है?
<section> कंटेंट के थीमैटिक समूह के लिए एक सिमेंटिक एलिमेंट है, आमतौर पर अपने शीर्षक के साथ। <div> का कोई अर्थ नहीं होता और इसका उपयोग केवल स्टाइलिंग या समूहीकरण के लिए होता है। जब कोई सिमेंटिक एलिमेंट कंटेंट पर फिट बैठे तो उसे प्राथमिकता दें।
strong और b (या em और i) में क्या अंतर है?
<strong> और <em> महत्व और ज़ोर व्यक्त करते हैं, जिसे सहायक तकनीक घोषित करती है। <b> और <i> केवल दिखावट बदलते हैं, बिना अतिरिक्त अर्थ के। जब ज़ोर सार्थक हो तो strong/em उपयोग करें।
इमेज पर alt एट्रिब्यूट क्यों महत्वपूर्ण है?
alt एट्रिब्यूट स्क्रीन-रीडर उपयोगकर्ताओं के लिए इमेज का वर्णन करता है और इमेज लोड न होने पर दिखता है। यह सर्च इंजन को इमेज समझने में भी मदद करता है। हर सार्थक <img> में वर्णनात्मक alt होना चाहिए।
मैं लेबल को फ़ॉर्म इनपुट से कैसे जोड़ूं?
इनपुट को एक id दें और लेबल के for एट्रिब्यूट को उस पर इंगित करें, जैसे <label for="email"> के साथ <input id="email">। इससे उपयोगकर्ता लेबल क्लिक करके फ़ील्ड पर फ़ोकस कर सकते हैं और पहुंच सुधरती है।
ऑर्डर्ड और अनऑर्डर्ड लिस्ट में क्या अंतर है?
<ol> एक ऑर्डर्ड (क्रमांकित) लिस्ट बनाता है जहां क्रम मायने रखता है, जबकि <ul> एक अनऑर्डर्ड (बुलेटेड) लिस्ट बनाता है। दोनों <li> लिस्ट आइटम रखते हैं।
head एलिमेंट में क्या होता है?
<head> में वह मेटाडेटा होता है जो पेज पर प्रदर्शित नहीं होता: <title>, <meta> टैग (charset, viewport, description), और स्टाइलशीट व स्क्रिप्ट के लिंक। दृश्यमान कंटेंट <body> में जाता है।
