HTML Basic
In this page:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- visible content -->
</body>
</html>Headings और Paragraphs
Headings आपके content की hierarchy को h1 (सबसे महत्वपूर्ण) से लेकर h6 (सबसे कम महत्वपूर्ण) तक व्यवस्थित करते हैं, जबकि paragraphs आपके text के main body को रखते हैं। heading levels को skip करना (सीधे h1 से h4 पर जाना) accessibility और SEO structure, दोनों को नुकसान पहुंचाता है।
उदाहरण: Headings and Paragraphs
<h1>Page Title</h1>
<h2>Section Title</h2>
<p>Paragraph text.</p>Links और Navigation
Links अलग-अलग वेब pages को anchor tag और href attribute का उपयोग करके आपस में जोड़ते हैं। Links के बिना, web बस अलग-थलग, अनपहुंच द्वीपों की तरह होता। target attribute नियंत्रित करता है कि link same tab में खुले या new tab में।
- अपने link text को descriptive रखें ताकि users को पता चले कि click करने पर वे कहां जाएंगे।
- Accepted attributes:
- href — URL, #fragment, mailto: या tel: target
- target — _self | _blank | _parent | _top
- rel — noopener | noreferrer | nofollow | external ...
- download — optional filename; navigate करने के बजाय download करता है
उदाहरण: Links and Navigation
<a href="https://example.com" target="_blank">Visit Example</a>बुनियादी Image Embedding
img tag आपके page पर images display करता है। text tags के विपरीत, img tag खाली (empty) होता है, यानी इसमें सिर्फ attributes होते हैं और कोई closing tag नहीं होता। हमेशा width और height attributes शामिल करें ताकि ब्राउज़र image लोड होने से पहले उसके लिए जगह reserve कर सके।
- web accessibility के लिए हमेशा image tag के अंदर alternate text descriptions शामिल करें।
- Accepted attributes:
- src — image file का URL
- alt — image लोड न होने पर या screen readers द्वारा पढ़े जाने के लिए text alternative
- width / height — pixels में intrinsic size (integers, बिना units के)
- loading — lazy | eager
उदाहरण: Basic Image Embedding
<img src="photo.jpg" width="300" height="200" alt="A scenic photo">Line Breaks और Horizontal Rules
br tag नया paragraph शुरू किए बिना text को नई line पर ले जाता है, जबकि hr tag एक horizontal line बनाता है जिसका उपयोग content के असंबंधित हिस्सों को visually अलग करने के लिए किया जाता है।
उदाहरण: Line Breaks and Horizontal Rules
<p>First line<br>
Second line</p>
<hr>HTML में Comments
<!-- और --> के बीच लिखे गए HTML comments developers के लिए notes होते हैं जिन्हें ब्राउज़र parse करता है लेकिन page पर कभी display नहीं करता, जिससे वे reminders छोड़ने या markup के किसी हिस्से को अस्थायी रूप से disable करने के लिए उपयोगी होते हैं।
उदाहरण: Comments in HTML
<!-- This is a comment, not shown on the page -->
<p>Visible text</p>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: