html5-aside-tag-in-hindi

by

Introduction to HTML5 <aside> Tag

HTML5 के <aside> tag में ऐसे content को show किया जाता है जो आसपास के content से related होता है। इस tag को ज्यादातर sidebar के रूप में उपयोग किया जाता है। इस tag को <body> tag के अंदर define किया जाता है।

उदाहरण के लिए आपके web page में एक article है। आप इसके पास एक <aside> element create कर सकते है और उसमे इस article से related दूसरी links और images show कर सकते है। इस tag को advertisement या author की profile show करने के लिए भी use किया जा सकता है।

<aside> tag को <article> tag में भी define किया जाता है। उस situation में इस tag में article से related content show किया जाता है। जैसे की कोई ऐसी बात जिस पर aritcle में ज़ोर दिया गया हो एक quote के रूप में show की जाती है।

<aside> tag का content आसपास के content से related होता है लेकिन महत्वपूर्ण नहीं होता है। ये user पर depend करता है की वह उसे use करना चाहता है या नहीं।

<aside> tag का behaviour <div> tag की तरह ही होता है और use करने पर दोनों same ही लगते है। लेकिन इनका मतलब अलग अलग होता है। Div के अंदर का content जरुरी नहीं की main page content से related हो। लेकिन <aside> tag का content main page content से related होता है।

Syntax of <aside> Tag

निचे <aside> tag का general syntax दिया जा रहा है।

<aside>

//Other block level or inline elements

</aside>

<aside> एक block level element होता है। इसमें आप दूसरे block level (<p>, <h1> आदि) और inline elements (<span>,<a> आदि) use कर सकते है।

<aside> element पर आप CSS styles भी apply कर सकते है।

aside
{
position:fixed;
top:20%;
left:0;
}

जैसा की आप ऊपर दिए गए syntax में देख सकते है <aside> tag पर position property को apply किया गया है। इसी प्रकार आप दूसरी properties भी इस tag पर apply कर सकते है और इसे अपने according design कर सकते है।

Attributes of <aside> Tag

<aside> tag के लिए specifically कोई attributes available नहीं है। सभी global attributes जैसे की id और class आदि आप <aside> के साथ भी use कर सकते है।

<aside id=”author-profile”>
….
….
<aside>

….

….

<aside id=”related-links”>
….
….

</aside>

Events Related to <aside> Tag

<aside> tag HTML के सभी event attributes (onclick, onmouseover आदि) को support करता है।

<aside onmouseover=”script-code”>
….
….

</aside>

Example

<html>
<head>

<style>

article
{
border:1px solid #eeeeee;
margin:5px;
}

aside
{
border:1px solid #eeeeee;
position:fixed;
top:20%;
left:0;
}

</style>

</head>

<body>

<article>
<h1>Heading</h1>
<p>This is an article about HTML5 aside element. </p>
</article>

<aside>
<a href=””>Related Link 1</a> <br>

<a href=””>Related Link 2</a>
</aside>

</body>

</html>

ऊपर दिए गए उदाहरण में <article> tag के content से सम्बंधित कुछ links <aside> tag के द्वारा sidebar के रूप में represent की गयी है। <aside> tag को CSS द्वारा left में content के pass fix किया गया है। ये script निचे दिया गया output generate करती है।

Leave a Comment