Theory
Text की नीरस दीवार
कल्पना कीजिए एक अख़बार पढ़ना जहाँ हर एक शब्द एक जैसा दिखता है। कोई bold headlines नहीं, कोई italicized book titles नहीं, और कोई highlighted quotes नहीं। आपकी आँखें seconds में थक जाएँगी! अपना personal portfolio बनाते समय, आपकी bio और project descriptions बिल्कुल यही चुनौती झेलती हैं। अगर आप शब्दों का एक सपाट block दिखाते हैं, recruiters इसे skip कर देंगे। हम एक reader की आँखों को आपकी उपलब्धियों के सबसे अहम हिस्सों की ओर कैसे guide करें?
Theory
Study Guide के Highlighters
याद कीजिए आप university exams की तैयारी कैसे करते हैं। एक घना chapter पढ़ते समय, आप बस passively नहीं पढ़ते। आप critical terms mark करने के लिए एक yellow highlighter इस्तेमाल करते हैं, definitions underline करने के लिए एक red pen इस्तेमाल करते हैं, और structure समझने के लिए बड़े chapter headings खोजते हैं। Text formatting tags आपके digital highlighters और pens हैं। वे browser को बताते हैं कौन से शब्द अतिरिक्त weight, emphasis, या structure के लायक़ हैं।
Theory
Text Formatting Tags
web design में, text formatting tags विशेष elements हैं जो text content का visual appearance और semantic meaning modify करते हैं। ये tags मोटे तौर पर physical tags में बँटे हैं, जो केवल visual look बदलते हैं जैसे bold के लिए <b> या italic के लिए <i>, और logical tags में, जो search engines और screen readers के लिए meaning जोड़ते हैं जैसे strong importance के लिए <strong> या emphasis के लिए <em>। Headings <h1> से <h6> तक text hierarchy परिभाषित करती हैं, जबकि <p> standard paragraph blocks परिभाषित करता है।
At a glance
HTML5 में मुख्य text formatting tags की तुलना।
| Tag | Type | Visual Result | Semantic Meaning |
|---|---|---|---|
| <b> | Physical | Bold text | शुद्ध रूप से visual boldness |
| <strong> | Logical | Bold text | High importance या urgency |
| <i> | Physical | Italic text | शुद्ध रूप से visual झुकाव |
| <em> | Logical | Italic text | Stressed emphasis |
| <mark> | Logical | Yellow background | Highlighted reference |
| <u> | Physical | Underlined text | Visual underline |
Practical
एक Portfolio About Section Format करना
<h1>About Me</h1>
<p>I am a <b>second year BCA student</b> passionate about <i>web engineering</i>.</p>
<p>My current project is a <strong>smart portfolio tracker</strong> built <em>from scratch</em>.</p>
<p><mark>Key Note:</mark> <u>Attendance is mandatory</u> for the practical lab exam.</p>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
एक student एक HTML5 document में एक subsection के लिए सबसे छोटा संभव standard heading level दिखाना चाहता है। उन्हें कौन सा tag चुनना चाहिए?
- <h1> क्योंकि number 1 top priority दर्शाता है
- <h6> क्योंकि heading levels h1 से h6 तक चलती हैं
- <h0> क्योंकि zero न्यूनतम size का मतलब है
- custom size attribute इस्तेमाल करके <heading size="small">
Show the answer
<h6> क्योंकि heading levels h1 से h6 तक चलती हैं
HTML headings सख़्ती से सबसे अहम, सबसे बड़ी heading के लिए <h1> से लेकर सबसे कम अहम, सबसे छोटी heading के लिए <h6> तक चलती हैं। कोई <h0> tag नहीं है, और heading tags standard structural scaling के लिए एक size attribute इस्तेमाल नहीं करते।
Think first
Bold बनाम Strong का चुनाव
tap करने से पहले, मन में समझाइए कि एक आधुनिक professional web developer एक webpage पर critical safety warnings के लिए <b> के बजाय <strong> इस्तेमाल करना क्यों पसंद करता है।
Show the answer
जबकि दोनों tags text को visually bold render करते हैं, <b> शुद्ध रूप से physical है और screen readers या search engines को शून्य meaning देता है। <strong> tag logical है, accessibility tools को बताते हुए कि text वाक़ई अहम है, यह पक्का करते हुए कि visually impaired users उचित बोली urgency के साथ text सुनें।
Watch out
Heading Font Size का जाल
practical lab exams में एक बार-बार होने वाली ग़लती <h1> या <h2> जैसे heading tags केवल इसलिए इस्तेमाल करना है क्योंकि आप कुछ बेतरतीब text को बड़ा और bold दिखाना चाहते हैं। यह आपके webpage की SEO structure नष्ट करता है। Headings textbook headings जैसी हैं, वे structure परिभाषित करती हैं, design नहीं। अगर आप बस एक paragraph के अंदर बड़ा text चाहते हैं, बाद में CSS font size नियम इस्तेमाल कीजिए, visual shortcuts के लिए कभी heading tags का दुरुपयोग मत कीजिए।
Formula
Exam Guide: Physical बनाम Logical Tags
जब एक 5 mark question आपसे physical और logical tags में अंतर करने को कहे, अपना जवाब इन तीन stambhs से format कीजिए:
- Definition: Physical tags सीधा visual styling तय करते हैं, जबकि logical tags systemic meaning और context जोड़ते हैं।
- Parity Pairs: दिखाइए कि
<b>कैसे<strong>के साथ जोड़ी बनाता है, और<i>कैसे<em>के साथ।
- Modern Standards: नोट कीजिए कि HTML5 accessibility compliance के लिए logical tags को प्राथमिकता देता है।
Summary
Key takeaways
- Headings स्पष्ट document hierarchy स्थापित करने के लिए सख़्ती से h1 से h6 तक चलती हैं।
<b>और<i>जैसे Physical tags अतिरिक्त structural meaning जोड़े बिना text appearance बदलते हैं।<strong>और<em>जैसे Logical tags search engines और accessibility tools के लिए semantic value जोड़ते हैं।<mark>tag reference text blocks पर आसानी से एक native yellow highlight लागू करता है।- normal font sizes बदलने के shortcut के रूप में कभी heading elements इस्तेमाल मत कीजिए।
- Memory Hook: Physical tags त्वचा-गहरे हैं, पर logical tags में आत्मा है।