HTML5 सिमेंटिक्स उन सिमेंटिक टैग्स को संदर्भित करता है जो HTML पेज को अर्थ प्रदान करते हैं। HTML5 में टैग्स को दो श्रेणियों में विभाजित किया गया है - सिमेंटिक और नॉन-सिमेंटिक। HTML5 HTML में कई नए सिमेंटिक टैग्स लाता है।
कुछ HTML5 सिमेंटिक टैग्स हैं:
| टैग्स | व्याख्या |
|---|---|
| figure | यह विभिन्न प्रारूपों में एक छवि निर्दिष्ट करता है। |
| article | यह एक स्वतंत्र स्व-निहित लेख निर्दिष्ट करता है। |
| nav | यह नेविगेशन लिंक्स के लिए एक कंटेनर निर्दिष्ट करता है। |
| aside | यह मुख्य कंटेंट के अलावा कंटेंट के लिए एक टैग निर्दिष्ट करता है (जैसे साइडबार)। |
| section | यह दस्तावेज़ में एक सेक्शन का प्रतिनिधित्व करता है। |
| details | यह अतिरिक्त विवरण के लिए एक टैग निर्दिष्ट करता है। |
| header | यह एक सेक्शन या दस्तावेज़ के लिए हेडर निर्दिष्ट करता है। |
| footer | यह एक सेक्शन या दस्तावेज़ के लिए फूटर निर्दिष्ट करता है। |
| figcaption | यह HTML दस्तावेज़ पर एक छवि के लिए एक छोटा विवरण निर्दिष्ट करता है। |
| main | यह पेज के मुख्य कंटेंट को निर्दिष्ट करता है और यह अद्वितीय होना चाहिए। |
| summary | यह <details> एलिमेंट के लिए हेडर निर्दिष्ट करता है। |
| mark | यह हाइलाइटेड टेक्स्ट निर्दिष्ट करता है। |
आइए HTML5 सिमेंटिक्स का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } body { color: #000; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; } header { background-color: #000; padding: 20px; text-align: center; color: white; } nav { float: left; width: 20%; height: 200px; background: #282828; padding: 60px 10px; } nav ul { list-style-type: none; padding: 0; } nav ul li a { text-decoration: none; color: #fff; } article { float: left; padding: 80px 10px; width: 80%; background-color: #fff; height: 200px; text-align: center; } section:after { content: ""; display: table; clear: both; } footer { background-color: #000; padding: 20px; text-align: center; color: white; } </style> <body> <h1>HTML सिमेंटिक्स डेमो</h1> <header>यह हेडर है</header> <section> <nav> <ul> <li><a href="#">होम</a></li> <li><a href="#">अबाउट</a></li> <li><a href="#">संपर्क</a></li> </ul> </nav> <article>यह एक आर्टिकल एलिमेंट है।</article> </section> <footer>यह फूटर है</footer> </body> </html>आउटपुट
