Introduction to HTML5 <article> Tag
एक website में header, footer और sidebar आदि अलग अलग pages पर same हो सकते है। लेकिन article हर page पर unique होता है। Article किसी website का वह section होता है जिसमें main content होता है और जो user के लिए सबसे महत्वपूर्ण होता है। आपकी website के इसी section के base पर आपको search engines में ranking मिलती है।
उदाहरण के लिए यदि आप Best Hindi Tutorials को ही लें तो heading और sidebar वही रहते है लेकिन tutorials बदलती रहती है। ये सभी tutorials एक दूसरे से independent होती है।
<article> tag का content आपकी website के बाकी content से independent होता है। यानी इस content को दूसरे contents की आवश्यकता नहीं होती है। जैसे की newspaper में अलग अलग articles होते है और वे सब independent होते है उसी प्रकार आपकी website में हर article tag independent होता है।
एक article में सामान्यतः headings और paragraphs होते है। Headings और paragraphs को क्रमशः <h1> और <p> tags द्वारा define किया जाता है। किसी article का HTML syntax इस प्रकार होता है।
| <article> <h1>Heading</h1> <p>This is a paragraph.</p> </article> |
एक article में आवश्यकता अनुसार sub headings (<h2>,<h3> आदि) भी use की जाती है। एक <article> element में कई बार footer को भी define किया जाता है। जैसा की निचे दिखाया जा रहा है।
| <article> <h1>Heading </h1> <p> This is paragraph related to main heading</p> <h2> Sub Heading</h2> <p>This is paragraph related to subheading</p> <article> |
Attributes of HTML5 <article> Tag
<article> tag का कोई element specific attribute नहीं होता है। लेकिन ये tag सभी global attributes जैसे की id, class, title आदि को support करता है।
| <article id=”HTMLTutorial”>
</article> |
इसी प्रकार आप दूसरे global attributes को भी <article> tag के साथ use कर सकते है।
Styling <article> Tag
किसी भी दूसरे HTML element की तरह <article> पर भी आप CSS rules apply कर सकते है। CSS द्वारा आप article की width define करने से लेकर, color और display भी define कर सकते है।
| article { width:920px; color:#272727; display:block; } |
ऊपर दिए गए syntax में जैसा की आप देख सकते है <article> element पर CSS द्वारा styles apply की गयी है। इसी प्रकार आप और भी बहुत से CSS rules इस tag पर apply कर सकते है।
<article> Event Attributes
<article> element सभी global event attributes जैसे की onclick, onfocus आदि को support करता है। इन events को handle करके आप web page को interactive बना सकते है।
| <article onclick=”script-code-here”> |
जैसा की आप ऊपर दिए गए syntax में देख सकते है <article> element में onclick event attribute define किया गया है। इसी प्रकार आप दूसरे event attributes भी define कर सकते है।
Example
निचे <article> tag का heading और styling सहित उदाहरण दिया जा रहा है।
| <html> <head> <style> article </style> </head> <body> <article> <h1>About <article> Element</h1> <p>अपनी website में article show करने के लिए आप <article> tag use करते है। आपके website का हर article unique होता है। </p> <h2>More About <article> Element</h2> <p>आप <article> tag के साथ सभी global attributes और global events use कर सकते है। </p> </article> </body> </html> |
जैसा की आप देख सकते है ऊपर दिए गए उदाहरण में <article> element के अंदर पहले एक main heading create की गयी है और बाद में एक paragraph add किया गया है। इसके बाद एक subheading add की गयी है और फिर से एक paragraph add किया गया है। इसी प्रकार और भी headings और paragraphs एक <article> element में add किये जा सकते है। ऊपर दी गयी script निचे दिया गया output generate करती है।