← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 2 of 9

HTML टैग लिस्ट

फ़र्ज़ करें आप किसी बड़ी carpentry workshop में गए हैं। कोई table या cabinet बनाने के लिए, आप सिर्फ एक tool इस्तेमाल नहीं करते। आप काटने के लिए saw, जोड़ने के लिए hammer, नाप के लिए measuring tape, और finishing के लिए sandpaper इस्तेमाल करते हैं। HTML tags वही carpentry tools हैं। हर tag का एक specific काम होता है: कुछ बड़े sections group करते हैं, कुछ text को style करते हैं, कुछ input इकट्ठा करते हैं, और कुछ images embed करते हैं। हर काम के लिए सही tag चुनना जानकर, आप ऐसे साफ-सुथरे, accessible, और structured webpages बना सकते हैं जो ठीक वैसे ही दिखें जैसा आपने सोचा था।

स्ट्रक्चरल और लेआउट टैग्स

structural tags आपके page के main layout columns तय करते हैं। ये आपके webpage को headers, footers, main content grids, और sidebars जैसे logical zones में व्यवस्थित करते हैं।

header, main, और footer जैसे semantic tags generic div से बेहतर माने जाते हैं क्योंकि ये सर्च इंजनों और स्क्रीन रीडर्स तक meaning भी पहुँचाते हैं।

Note: generic div tags पर निर्भर रहने के बजाय अपने pages को साफ-सुथरे तरीके से व्यवस्थित करने के लिए semantic layout tags का इस्तेमाल करें।
Warning: एक ही page पर कई main tags nest करने से बचें, क्योंकि यह HTML validation rules का उल्लंघन करता है।

उदाहरण: Structural and Layout Tags

markup
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>

टेक्स्ट और इनलाइन फॉर्मेटिंग टैग्स

text tags आपके लिखे हुए content को फॉर्मेट और structure करने के लिए इस्तेमाल होते हैं, जिससे headings, paragraphs, bold text, और italic emphasis के लिए एक स्पष्ट visual order बनती है।

सही semantic tag (जैसे सिर्फ b की जगह strong) इस्तेमाल करने से स्क्रीन रीडर users के लिए accessibility भी बेहतर होती है।

Note: बेहतर screen-reader accessibility के लिए टेक्स्ट को semantically bold और italic करने के लिए strong और em tags का इस्तेमाल करें।
Warning: सिर्फ text को bold या बड़ा दिखाने के लिए heading tags इस्तेमाल न करें; इसके लिए actual CSS styling इस्तेमाल करें।

उदाहरण: Text and Inline Formatting Tags

markup
<h1>Heading</h1>
<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>

फॉर्म और इंटरैक्टिव इनपुट टैग्स

form tags data इकट्ठा करने और user interactions को handle करने के लिए इस्तेमाल होते हैं। ये text inputs, selection menus, buttons, और textareas जैसे interactive elements तय करते हैं।

हर form control को एक label element के साथ जोड़ा जाना चाहिए ताकि users को पता चले कि हर field में क्या भरना है।

Note: अपने forms को accessible बनाए रखने के लिए input fields को हमेशा linked labels के साथ जोड़ें।
Warning: अपने buttons पर submit type attribute कभी न छोड़ें, क्योंकि इससे unexpected submissions हो सकते हैं।

उदाहरण: Form and Interactive Input Tags

markup
<label for="name">Name:</label>
<input type="text" id="name">
<button type="submit">Submit</button>

मीडिया और एसेट एम्बेडिंग टैग्स

media tags आपको images, videos, audio clips, vector shapes, या दूसरे external resources को सीधे अपने page पर embed करने देते हैं। आधुनिक responsive sites अक्सर इन्हें srcset attribute के साथ जोड़कर हर device के लिए अलग-अलग image sizes देते हैं।

Note: अपनी images को accessible रखने के लिए हमेशा descriptive alt text लिखें।
Warning: image dimensions (width और height) डिफाइन न करने से आपका page लोड होते समय layout shift हो सकता है।

उदाहरण: Media and Asset Embedding Tags

markup
<img src="photo.jpg" srcset="photo.jpg 1x, [email protected] 2x" alt="Photo">

कॉन्फ़िगरेशन और मेटाडेटा टैग्स

metadata tags सिर्फ head section के अंदर रहते हैं। ये आपके page पर दिखते नहीं हैं, लेकिन browser को ज़रूरी configuration instructions (जैसे page titles, character sets, और stylesheets) देते हैं।

Note: ग्लोबल languages और emojis को natively support करने के लिए अपना character set UTF-8 तय करें।
Warning: head section के अंदर visible content tags (जैसे h1 या p) न रखें, क्योंकि यह HTML standards का उल्लंघन करता है।

उदाहरण: Configuration and Metadata Tags

markup
<head>
  <title>My Page</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.