हेल्लो दोस्तों! आपको html5 के बारे में बताया जा चूका है आज इस पोस्ट में के article tag html5 in Hindi बारे में बताया जा रहा है तो चलिए शुरू करते है।
Html5 <article> tag का परिचय
एक वेबसाइट में header या footer और sidebar आदि अलग अलग pages पर same हो सकते है लेकिन article में हर page पर unique होता है जैसे की article किसी website का वह section होता है जिसमे main content होता है और जो यूजर के लिए इम्पोर्टेन्ट(important) होता है वो आपकी वेबसाइट के इसी section के base पर आपको search engines में ranking मिलती है
example के लिए यदि आप c3school को ही ले so तो heading और sidebar वही रहते है लेकिन tutorials बदलती रहती है ये सभी tutorials एक दुसरे से independent होती है।
<article> tag का content आपकी वेबसाइट के बाकि content से independent होता है यानि इस content को दुसरे कंटेंट्स की आवश्यकता नहीं होती है जैसे की newspaper में अलग अलग articles होते है और वे सभी independent होते है उसी प्रकार आपकी वेबसाइट में हर article tag independent होता है
एक article में सामान्यत: heading और paragraphs होते है headings और paragraphs को क्रमशः <h1> और <p> टैग्स(tags) के द्वारा define किया जाता है किसी article का html syntax इस प्रकार होता है
<article> <h1>heading</h1> <p>this is a paragraph</p> </article>
एक article में आवश्यकता अनुसार sub heading (<h2>,<h3> आदि ) भी प्रयोग की जाती है एक <article> element में कई बार footer को भी define किया जाता है जैसे की निचे दिखाया जा रहा है
<article> <h1>heading</h1> <p>this is a paragraph related main heading</p> <h2>sub heading</h2> <p>this is paragraph related तो sub heading</p> <article> attributes of html5 <article> tag <article> tag का कोई element specific article नहीं होता है लेकिन ये tag सभी global attributes जैसे की id,class,title आदि को support करता है <article id=”html tutorial”> </article>
इसी प्रकार आप दुसरे global attributes को भी <article> tag के साथ प्रयोग कर सकते है
styling <article> tag
इसे भी पढ़े –html5 in hindi
किसी भी दुसरे html element की तरह <article> पर भी आप css rules apply कर सकते है css के द्वारा आप article की width define करने से लेकर color और display भी define कर सकते है
article
{ width:92px; color:#27272; display:block; }
उपर दी गए syntax में जैसे की आप देख सकते है की <article> element पर CSS द्वारा styles apply की गयी है इसी प्रकार आप और भी बहुत से CSS rules इस tag पर apply कर सकते है
<article> event attributes
<article> element में सभी global attributes जैसे की on click,on-focus आदि को support करता है इन events को हैंडल करके आप web page को interactive बना सकते है
<article onclick=”script-code-here”>
जैसे की आपको उपर दी गए syntax में देख सकते है <article> element में onclick event attribute define किया गया है इसी प्रकार आप दुसरे event attributes भी define कर सकते है
example
निचे <article> tag का heading और styling का example निचे दिखाया गया है
<html> <head> <style> article { width:600px; color:blue; display:block; } </style> </head> <body> <article> <h1>about<article>element</h1> <p>अपनी वेबसाइट में article दिखने के लिए आप <article>tag का प्रयोग करते है आपके वेबसाइट का हर article unique होता है </p> <h2>more about<article>element</h2> <p>आप <article>tag के साथ सभी global attributes और global events का प्रयोग कर सकते है </p> <article> </body> </html>
जैसा की आप निचे आउटपुट में देख सकते है की <article> element के अन्दर पहले एक main heading create की गयी है और बाद में एक paragraph add किया गया है इसके बाद एक sub heading को add किया गया है और फिर से एक paragraph add किया गया है इसी प्रकार और भी headings और paragraphs एक <article> element में add किये जा सकते है