HTML <article> एलिमेंट का उपयोग करना सीखें।
HTML <article> टैग का उपयोग सेल्फ-कंटेन्ड कंटेंट के लिए आर्टिकल एलिमेंट्स को परिभाषित करने के लिए किया जाता है। सेल्फ-कंटेन्ड का अर्थ है कि आप जो कंटेंट आर्टिकल एलिमेंट के अंदर डालते हैं, वह आपकी वेबसाइट के बाकी हिस्सों से स्वतंत्र रूप से काम करना चाहिए।
HTML <article> टैग का उपयोग कैसे करें
<article> टैग के उपयोग के मामले:
- ब्लॉग्स
- पत्रिकाएँ
- समाचार साइट्स
<main> एलिमेंट के विपरीत, जो एक कंटेंट कंटेनर भी है, <article> टैग का उपयोग एक ही HTML दस्तावेज़ में एक बार या कई बार किया जा सकता है।
उदाहरण के लिए, आप लेख/पोस्ट के लिए मुख्य पेज कंटेनर एलिमेंट के रूप में एकल <article> एलिमेंट का उपयोग कर सकते हैं:
<article> <h1>आपके पोस्ट का शीर्षक</h1> <p>पैराग्राफ</p> <p>पैराग्राफ</p> <img src="your-image.jpg" alt="छवि का विवरण" /> <p>पैराग्राफ</p> <p>पैराग्राफ</p> </article>जिस वेबसाइट को आप अभी पढ़ रहे हैं, वह एक समान HTML मार्कअप संरचना का पालन करती है। आप इसे स्वयं देख सकते हैं यदि आप इस वेबसाइट पर राइट-क्लिक करें और इंस्पेक्ट पर क्लिक करें।
<article> एलिमेंट का उपयोग विभिन्न कंटेंट की सूची प्रदर्शित करने के लिए भी किया जा सकता है, प्रत्येक अपने स्वयं के आर्टिकल एलिमेंट के अंदर। उदाहरण के लिए, व्यक्तिगत पोस्ट के लिंक के साथ एक आर्टिकल फीड:
<div> <article> <a href="/path-to-blog-post-1"> <h3>ब्लॉग पोस्ट 1</h3> </a> </article> <article> <a href="/path-to-blog-post-2"> <h3>ब्लॉग पोस्ट 2</h3> </a> </article> <article> <a href="/path-to-blog-post-3"> <h3>ब्लॉग पोस्ट 3</h3> </a> </article> </div>उपरोक्त तीनों आर्टिकल्स को वेब ब्राउज़र द्वारा स्वतंत्र, सेल्फ-कंटेन्ड कंटेंट के रूप में पढ़ा जाता है।
<article> टैग कंटेनर एलिमेंट्स को परिभाषित करने के लिए उपयोग किए जाने वाले कई HTML टैग्स में से एक है। कुछ सबसे अधिक उपयोग किए जाने वाले HTML कंटेनर एलिमेंट्स हैं:
<section>, <main> , <header>, <footer>,<form>, और <div> (जो एक जेनेरिक टैग है जिसका उपयोग हम तब करते हैं जब अन्य टैग्स में से कोई भी लागू नहीं होता)।
