HTML Cheat Sheet: HTML Tags और Elements की Complete Guide

HTML क्या है?#

HTML (HyperText Markup Language) एक markup language है जिसका इस्तेमाल web pages की structure बनाने के लिए किया जाता है।

आसान भाषा में, HTML browser को बताता है कि webpage पर कौन-सा content है — जैसे heading, paragraph, image, link, list, table या form।

Example के लिए, किसी webpage पर:

• Heading दिखाई देती है।
• उसके नीचे paragraph होता है।
• किसी जगह image लगी होती है।
• किसी text पर click करने से दूसरा page खुलता है।
• Form के जरिए user अपनी details submit करता है।

इन सभी elements की structure HTML से बनाई जा सकती है।

HTML, CSS और JavaScript में अंतर

इसे एक घर की तरह समझिए:

• HTML = घर की structure और कमरे
• CSS = paint, decoration और interior design
• JavaScript = switches, automatic doors और interactive features

याद रखें: HTML programming language नहीं, बल्कि markup language है।

HTML Document का Basic Structure#

हर सामान्य HTML page की शुरुआत एक standard document structure से होती है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

इस structure को समझते हैं:

Important: head और body का काम अलग-अलग है। Page का title और metadata head में आते हैं, जबकि headings, paragraphs, images और forms जैसे content सामान्यतः body में आते हैं।

HTML Tags, Elements और Attributes#

HTML सीखते समय इन तीन terms को समझना जरूरी है।

1. HTML Tag

Tag angle brackets के अंदर लिखा जाता है।

<p>

यह paragraph element की शुरुआत करने वाला opening tag है।

2. HTML Element

Opening tag, content और closing tag मिलकर एक सामान्य HTML element बनाते हैं।

<p>HTML सीखना आसान है।</p>

यहाँ:

• <p> = Opening tag
• HTML सीखना आसान है। = Content
• </p> = Closing tag

कुछ HTML elements में closing tag नहीं होता। इन्हें void elements कहा जाता है, जैसे <img>, <br> और <input>।

3. HTML Attributes

Attributes element के बारे में additional information देते हैं।

<a href="https://example.com" target="_blank">
  Visit Website
</a>

इस example में:

• href link का destination बताता है।
• target="_blank" link को नए browsing context में खोलने के लिए कहता है।

External links के लिए, जब नया tab खोलना जरूरी हो, तो यह भी इस्तेमाल कर सकते हैं:

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Visit Website
</a>

HTML Headings Cheat Sheet#

Headings का इस्तेमाल content को logical sections में divide करने के लिए किया जाता है।

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Lower-Level Heading</h5>
<h6>Lowest-Level Heading</h6>

HTML में छह heading levels होते हैं: <h1> से <h6> तक।

Best practices:

• Main page title के लिए सामान्यतः <h1> इस्तेमाल करें।
• Major sections के लिए <h2> रखें।
• Subsections के लिए जरूरत के अनुसार <h3> इस्तेमाल करें।
• Heading levels को केवल font size बदलने के लिए इस्तेमाल न करें; styling CSS से करें।

HTML Text Formatting Tags#

Text को structure या emphasis देने के लिए कई HTML elements उपलब्ध हैं।

Example:

<p>
  HTML एक <strong>important</strong> web technology है।
  इसे <em>step by step</em> सीखें।
</p>

<p>Water का formula H<sub>2</sub>O है।</p>

<p>Mathematics: x<sup>2</sup></p>

<br> का इस्तेमाल हर paragraph को नई line में रखने के लिए न करें। अलग paragraphs के लिए <p> बेहतर है।

HTML Links Cheat Sheet#

HTML में links बनाने के लिए <a> (anchor) element इस्तेमाल होता है।

<a href="https://example.com">Visit Website</a>

Link के Common Examples

<!-- External link -->
<a href="https://example.com">Open Website</a>

<!-- Internal page link -->
<a href="/about/">About Us</a>

<!-- Same-page section link -->
<a href="#contact">Go to Contact</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+911234567890">Call Us</a>

Same-page section link के लिए target element पर matching id होना चाहिए।

<a href="#contact">Go to Contact</a>

<h2 id="contact">Contact Us</h2>

HTML Link Attributes

SEO tip: Link text descriptive रखें। Click Here की जगह HTML Cheat Sheet पढ़ें जैसा text user और search engines दोनों को बेहतर context देता है।

HTML Images Cheat Sheet#

Image दिखाने के लिए <img> element इस्तेमाल किया जाता है।

<img
  src="html-basics.png"
  alt="HTML document structure"
  width="600"
  height="300"
>

Example:

<img
  src="/images/html-cheat-sheet.webp"
  alt="HTML Cheat Sheet with common HTML tags"
  width="800"
  height="450"
  loading="lazy"
>

Image के लिए Best Practices

• Meaningful images के लिए accurate alt text लिखें।
• Decorative images के लिए alt="" इस्तेमाल किया जा सकता है।
• Image का actual size और displayed dimensions ध्यान में रखें।
• Lazy loading उन images के लिए उपयोगी है जो शुरुआती viewport के बाहर हैं।
• Above-the-fold या Largest Contentful Paint image को बिना सोचे lazy-load न करें।

HTML Lists Cheat Sheet#

Lists का इस्तेमाल related items को organized तरीके से दिखाने के लिए किया जाता है।

1. Unordered List

जब items का कोई specific order जरूरी न हो, तब <ul> इस्तेमाल करें।

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2. Ordered List

जब items किसी sequence या order में हों, तब <ol> इस्तेमाल करें।

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

3. Description List

Terms और उनकी descriptions के लिए <dl>, <dt> और <dd> इस्तेमाल किए जाते हैं।

<dl>
  <dt>HTML</dt>
  <dd>Webpage की structure बनाने के लिए markup language.</dd>

  <dt>CSS</dt>
  <dd>Webpage की styling के लिए stylesheet language.</dd>
</dl>

HTML Tables Cheat Sheet#

Tabular data दिखाने के लिए HTML tables इस्तेमाल होती हैं।

<table>
  <caption>Course Details</caption>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>7 Days</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>10 Days</td>
    </tr>
  </tbody>
</table>

याद रखें: Tables का इस्तेमाल tabular data के लिए करें, पूरे webpage का layout बनाने के लिए नहीं।

HTML Forms Cheat Sheet#

Forms users से information collect करने के लिए इस्तेमाल होते हैं — जैसे login, registration, search और contact forms।

<form action="/register" method="post">
  <label for="name">Full Name</label>
  <input
    type="text"
    id="name"
    name="name"
    required
  >

  <label for="email">Email</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  >

  <button type="submit">Register</button>
</form>

इस example में:

• <form> form को define करता है।
• action बताता है कि form data कहाँ submit होगा।
• method="post" data भेजने के लिए HTTP POST method इस्तेमाल करता है।
• <label> input का purpose बताता है।
• name submitted data में field की key बनता है।
• required browser-side validation लागू करता है।

ध्यान दें कि form submit होने के लिए /register पर working server-side endpoint भी होना चाहिए।

Common Input Types

Example:

<label for="password">Password</label>
<input
  type="password"
  id="password"
  name="password"
  minlength="8"
  required
>

<label for="country">Country</label>
<select id="country" name="country">
  <option value="in">India</option>
  <option value="us">United States</option>
</select>

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="4"
></textarea>

Radio Buttons और Checkboxes

<p>Select your learning level:</p>

<label>
  <input type="radio" name="level" value="beginner">
  Beginner
</label>

<label>
  <input type="radio" name="level" value="intermediate">
  Intermediate
</label>

<p>Select your interests:</p>

<label>
  <input type="checkbox" name="interests" value="html">
  HTML
</label>

<label>
  <input type="checkbox" name="interests" value="css">
  CSS
</label>

Radio buttons में same group के लिए same name इस्तेमाल करें। Checkboxes multiple independent selections के लिए उपयोगी हैं।

Security tip: HTML validation user experience बेहतर बनाती है, लेकिन यह security boundary नहीं है। Server पर भी input validation और authorization जरूरी हैं।

HTML Semantic Tags#

Semantic HTML elements अपने content का meaning स्पष्ट करते हैं।

Example:

<header>
  <h1>My Learning Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/courses/">Courses</a>
  </nav>
</header>

<main>
  <article>
    <h2>HTML Basics</h2>
    <p>HTML webpage की structure बनाता है।</p>
  </article>

  <section>
    <h2>Related Topics</h2>
    <p>अब CSS सीखें।</p>
  </section>
</main>

<footer>
  <p>Copyright © 2026</p>
</footer>

Semantic HTML के फायदे:

• Code पढ़ना और maintain करना आसान होता है।
• Assistive technologies content structure बेहतर समझ सकती हैं।
• Search engines को page का meaning समझने में मदद मिलती है।

Semantic elements अपने आप design नहीं बनाते। Styling के लिए CSS की जरूरत होती है।

HTML Block और Inline Elements#

HTML elements के default display behavior को समझना useful है, लेकिन याद रखें कि CSS इसे बदल सकती है।

• Block elements सामान्यतः नई line से शुरू होते हैं और available width लेते हैं।
• Inline elements सामान्य text flow के अंदर रहते हैं।

Example:

<div>
  This is a block container.
</div>

<p>
  Learn <strong>HTML</strong> with
  <a href="/courses/">our courses</a>.
</p>

<div> एक generic container है और <span> inline phrasing content के लिए generic container है। जहाँ meaningful semantic element मौजूद हो, वहाँ उसे प्राथमिकता दें।

HTML Global Attributes#

Global attributes कई HTML elements पर इस्तेमाल किए जा सकते हैं।

Example:

<p id="intro" class="highlight" lang="hi">
  HTML सीखना शुरू करें।
</p>

<button data-course-id="html-101">
  Start Learning
</button>

id किसी document में unique होना चाहिए। class कई elements पर reuse हो सकती है।

HTML Entities Cheat Sheet#

कुछ reserved characters को सीधे HTML markup में लिखने पर browser उन्हें markup का हिस्सा समझ सकता है। ऐसे cases में character references इस्तेमाल करें।

Example:

<p>HTML में &lt;p&gt; paragraph tag है।</p>
<p>Copyright &copy; 2026</p>
<p>Price: &#8377; 499</p>

Output में पहले example का text <p> दिखाई देगा, HTML paragraph tag के रूप में interpret नहीं होगा।

HTML Audio और Video#

HTML में audio और video embed करने के लिए built-in elements हैं।

Audio

<audio controls>
  <source src="/media/audio.mp3" type="audio/mpeg">
  Your browser does not support audio playback.
</audio>

Video

<video controls width="640" poster="/images/video-cover.jpg">
  <source src="/media/tutorial.mp4" type="video/mp4">
  Your browser does not support video playback.
</video>

Useful attributes:

• controls — browser playback controls दिखाता है।
• autoplay — automatic playback का request करता है; browser restrictions लागू हो सकती हैं।
• muted — audio को muted रखता है।
• loop — playback को repeat करता है।
• poster — video के लिए preview image देता है।

Autoplay को user experience और browser policies को ध्यान में रखकर इस्तेमाल करें।

HTML में CSS और JavaScript जोड़ना#

HTML document CSS और JavaScript files को connect कर सकता है।

External CSS

<link rel="stylesheet" href="styles.css">

इसे सामान्यतः <head> के अंदर रखा जाता है।

External JavaScript

<script src="app.js" defer></script>

defer external classic script को HTML parsing पूरी होने के बाद execute करने के लिए schedule करता है।

Complete Mini Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Practice</title>
  <link rel="stylesheet" href="styles.css">
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>Welcome to HTML</h1>
    <p>Practice HTML with simple examples.</p>
    <button id="learnButton" type="button">Start Learning</button>
  </main>
</body>
</html>

CSS file:

body {
  font-family: Arial, sans-serif;
  margin: 2rem;
}

h1 {
  color: #16325b;
}

JavaScript file:

const button = document.querySelector("#learnButton");

button.addEventListener("click", () => {
  alert("Let's learn HTML!");
});

इन files को एक ही folder में रखें, जब तक paths अलग से configure न किए गए हों।

HTML Comments#

Comments code के अंदर notes लिखने के लिए उपयोग होते हैं। Browser उन्हें सामान्य page content की तरह display नहीं करता।

<!-- This is an HTML comment -->

<h2>HTML Basics</h2>
<p>Learn tags and elements.</p>

Comments में passwords, API keys या confidential information न रखें। HTML source users को दिखाई दे सकता है।

HTML Accessibility Basics#

Accessible HTML से ज्यादा users webpage को समझ और इस्तेमाल कर पाते हैं।

कुछ जरूरी practices:

• Meaningful images के लिए useful alt text लिखें।
• हर form input के लिए उचित label दें।
• Links का purpose उनके text से स्पष्ट करें।
• सही heading hierarchy बनाए रखें।
• Native buttons और links इस्तेमाल करें, जब उनका वही काम हो।
• Keyboard से navigation और focus behavior test करें।
• केवल color के जरिए information communicate न करें।

Example:

<label for="userEmail">Email Address</label>
<input
  type="email"
  id="userEmail"
  name="email"
  autocomplete="email"
  required
>

Accessible HTML एक मजबूत शुरुआत है, लेकिन complete accessibility के लिए CSS, JavaScript behavior और actual testing भी जरूरी हैं।

HTML Common Mistakes#

HTML को Browser DevTools से कैसे Check करें?#

HTML लिखने के बाद उसे browser में inspect करके structure और errors समझ सकते हैं।

1. HTML file browser में खोलें या development server चलाएँ।
2. Right-click करके Inspect चुनें।
3. Elements panel में DOM structure देखें।
4. किसी element को select करके उसकी attributes और CSS check करें।
5. Console में JavaScript errors देखें।
6. Network panel में check करें कि HTML, images और CSS files सही load हो रही हैं या नहीं।

ध्यान दें कि browser DOM को parse करके tree बनाता है। इसलिए Elements panel में दिखाई देने वाला DOM, source file की raw text representation से कुछ मामलों में अलग हो सकता है।

HTML Quick Reference Cheat Sheet#

HTML Knowledge Check#

इन questions के answers खुद देने की कोशिश करें।

1. HTML का full form क्या है?
2. HTML और CSS में क्या अंतर है?
3. <head> और <body> का काम क्या है?
4. HTML tag और element में क्या अंतर है?
5. href attribute का इस्तेमाल कहाँ होता है?
6. Meaningful images के लिए alt text क्यों जरूरी है?
7. <ul> और <ol> में क्या अंतर है?
8. Semantic HTML क्या है?
9. id और class में क्या अंतर है?
10. क्या required attribute अकेले form को secure बना सकता है?

Practical Exercises

Exercise 1: Personal Webpage

एक HTML page बनाएँ जिसमें heading, introduction paragraph, image और दो links हों।

Exercise 2: Course List

तीन web development courses की ordered और unordered lists बनाएँ।

Exercise 3: Registration Form

Name, email, password और learning level के लिए inputs बनाकर एक basic form तैयार करें।

Exercise 4: Semantic Blog Page

header, nav, main, article, section और footer का उपयोग करके simple blog page बनाएँ।

Summary — HTML Cheat Sheet से क्या सीखा?#

इस HTML Cheat Sheet में आपने सीखा:

• HTML क्या है और webpage की structure कैसे बनाता है।
• Basic HTML document का structure।
• Tags, elements और attributes।
• Headings, text formatting, links, images और lists।
• Tables और forms।
• Semantic HTML और global attributes।
• Entities, audio, video, CSS और JavaScript linking।
• Accessibility, common mistakes और Browser DevTools से debugging।

HTML web development की foundation है। जब आप HTML elements और document structure को अच्छी तरह समझ लेते हैं, तो CSS से styling और JavaScript से interactivity सीखना आसान हो जाता है।

आगे क्या सीखें?#

Recommended learning path:

1. HTML Cheat Sheet — Webpage structure और elements।
2. CSS Cheat Sheet — Colors, layouts, Flexbox, Grid और responsive design।
3. JavaScript Cheat Sheet — Variables, functions, DOM और events।
4. Node.js Cheat Sheet — JavaScript के साथ backend development।

Suggested internal links:

• Browser DevTools Cheat Sheet
• Internet Fundamentals Cheat Sheet
• HTTP / HTTPS Cheat Sheet
• Next: CSS Cheat Sheet

Official reference: MDN HTML Guide और WHATWG HTML Standard.

Views: 1