Haan, HTML me aur bhi advanced elements hote hain jo different functionalities provide karte hain. Yeh kuch aur important elements hain:
1. <template> - Reusable HTML Code Blocks
Agar tum dynamic content create karna chahte ho jo JavaScript se load hoga, to <template> ka use hota hai.
Example:
<template id="greetingTemplate">
<p>Hello, Welcome to our website!</p>
</template>
<script>
let template = document.getElementById("greetingTemplate");
document.body.appendChild(template.content.cloneNode(true));
</script>
2. <slot> - Web Components ke Liye Placeholder
Agar tum custom web components create kar rahe ho, to <slot> placeholders kaam aate hain.
Example:
<my-component>
<span slot="title">Custom Title</span>
</my-component>
3. <dialog> - Popup Dialog Box Display Karne ke Liye
Agar tum modal popups ya alerts banana chahte ho to <dialog> ka use hota hai.
Example:
<dialog id="myDialog">
<p>This is a popup message!</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
4. <ruby>, <rt>, <rp> - Asian Languages ke Liye Furigana (Pronunciation Guide)
Agar tum Japanese ya Chinese text ke upar pronunciation guide dikhana chahte ho to yeh use hota hai.
Example:
<ruby>
漢 <rt>Kan</rt> 字 <rt>Ji</rt>
</ruby>
5. <wbr> - Word Break Suggestion Dene ke Liye
Agar tum chahte ho ki long words automatically wrap ho sakein to <wbr> ka use hota hai.
Example:
<p>Super<wbr>califragilistic<wbr>expialidocious</p>
6. <bdo> - Text Direction Change Karne ke Liye
Agar tum kisi text ka direction RTL (Right to Left) ya LTR (Left to Right) set karna chahte ho to <bdo> ka use hota hai.
Example:
<p><bdo dir="rtl">This text will be displayed from right to left.</bdo></p>
7. <noscript> - JavaScript Disable Hone Par Alternative Content Dikhane ke Liye
Agar kisi browser me JavaScript disable hai, to <noscript> alternative content dikhata hai.
Example:
<noscript>
<p>JavaScript is required to view this page properly.</p>
</noscript>
8. <fieldset> & <legend> - Forms ko Group Karne ke Liye
Agar tum form fields ko organize karna chahte ho, to <fieldset> aur <legend> ka use hota hai.
Example:
<fieldset>
<legend>Personal Information</legend>
<label>Name: <input type="text"></label>
<label>Email: <input type="email"></label>
</fieldset>
9. <output> - JavaScript Calculation Show Karne ke Liye
Agar tum dynamic values show karna chahte ho jaise live calculations, to <output> ka use hota hai.
Example:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result"></output>
</form>
10. <data> - Machine-Readable Values Store Karne ke Liye
Agar tum structured data ya hidden values store karna chahte ho to <data> ka use hota hai.
Example:
<p>Product Price: <data value="1499">₹1499</data></p>
11. <dfn> - Definition Terms Highlight Karne ke Liye
Agar tum kisi word ka definition dena chahte ho, to <dfn> ka use hota hai.
Example:
<p>The <dfn>Internet</dfn> is a global network connecting millions of computers.</p>
12. <var> - Mathematical Variables ke Liye
Agar tum mathematical formulas ya variables dikhana chahte ho to <var> ka use hota hai.
Example:
<p>The formula for area of a circle is <var>πr²</var>.</p>
13. <s> - Strikethrough Text (Outdated Information Show Karne ke Liye)
Agar tum kisi purani ya outdated information ko show karna chahte ho, to <s> ka use hota hai.
Example:
<p>Old Price: <s>₹2000</s> New Price: ₹1500</p>
14. <ins> & <del> - Inserted aur Deleted Text Show Karne ke Liye
Agar tum kisi text ko add ya remove dikhana chahte ho to ye tags use hote hain.
Example:
<p><del>Old content removed</del> <ins>New content added</ins></p>
15. <details> & <summary> - Expandable Content Dikhane ke Liye
Yeh FAQ sections ya hidden content dikhane ke liye kaam aata hai.
Example:
<details>
<summary>Click to expand</summary>
<p>This is hidden content that appears when clicked.</p>
</details>
Final Thoughts
Yeh HTML ke kuch aur advanced elements hain jo media, forms, structure aur interactive content ke liye use hote hain.
✔ Templates & Components: <template>, <slot>, <dialog>
✔ Text Formatting: <wbr>, <bdo>, <dfn>, <var>
✔ Interactive & Expandable Content: <details>, <summary>
✔ Forms & User Input: <fieldset>, <legend>, <output>
✔ Mathematical & Code Representation: <var>, <code>, <pre>
Agar tumhe kisi bhi specific element ka aur deep explanation ya example chahiye to batao!