HTML टैग लिस्ट
In this page:
स्ट्रक्चरल और लेआउट टैग्स
structural tags आपके page के main layout columns तय करते हैं। ये आपके webpage को headers, footers, main content grids, और sidebars जैसे logical zones में व्यवस्थित करते हैं।
header, main, और footer जैसे semantic tags generic div से बेहतर माने जाते हैं क्योंकि ये सर्च इंजनों और स्क्रीन रीडर्स तक meaning भी पहुँचाते हैं।
उदाहरण: Structural and Layout Tags
<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 भी बेहतर होती है।
उदाहरण: Text and Inline Formatting Tags
<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 में क्या भरना है।
उदाहरण: Form and Interactive Input Tags
<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 देते हैं।
उदाहरण: Media and Asset Embedding Tags
<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) देते हैं।
उदाहरण: Configuration and Metadata Tags
<head>
<title>My Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>- strong और em जैसे semantic tags के बजाय b और i जैसे visual tags इस्तेमाल करना।
- images पर ज़रूरी alt attributes छोड़ देना, जिससे वे screen readers के लिए invisible हो जाती हैं।
- अपने page के head section में paragraphs जैसे visible content tags रखना।
- HTML tags structural, text, form, media, और metadata elements में categorized होते हैं।
- Semantic layout tags content को logical zones में organize करते हैं, और metadata tags head section में configurations handle करते हैं।
- अपने code को साफ, readable, accessible, और SEO-friendly रखने के लिए हर task के लिए सही tag चुनें।
standard HTML structural, text, media, और form elements सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: