HTML5 Content Elements Related to Content Rendering

HTML5 Content Elements: HTML5 में “Document का Contents किस प्रकार का है”, इस बात को ध्यान में रखते हुए Content को अच्छी तरह से Manage करने के लिए कई Rules बनाए गए हैं। ये Rules कई Groups के रूप में Define किए गए हैं, जिन्हें Content Models कहा जाता है और हर Group में किसी एक प्रकार के Content को Handle करने से संबंधित कई Elements Define किए गए हैं। इस Content Model में हर HTML Element Zero, One या Many Content Model से संबंधित हो सकता है। मूल रूप से HTML5 में Content को तीन मुख्‍य Content Categories में Divide किया गया हैः

Main Content Category

इस Category में बहुत सारे Elements द्वारा Share किए जाने वाले Common Rules को Describe किया गया है, जो निम्नानुसार हैं:

Metadata Content

इस Category से संबंधित Elements Document के Presentation व Behavior को Modify करने व अन्य Documents से Links Setup करने का काम करते हैं। इस Category के मुख्‍य Elements निम्नानुसार हैं:

<base> , <command> , <link> , <meta> , <noscript> , <script> ,<style> and <title>

Flow Content

इस Category में उन Elements को रखा गया है जो मूल रूप से Text अथवा Embedded Content को Hold करने का काम करते हैं। ये Elements निम्नानुसार हैं:

कुछ अन्य Elements भी इस Category से संबंधित हैं, लेकिन वे कुछ विशेष स्थितियों में ही उपयोग में लिए जाते हैं, जो निम्नानुसार हैं:

<area>     ये <map> Element का Descendent Element होता है।
<link>      ये तभी Use करते हैं जब itemprop Attribute Present हो।
<meta>    ये भी तभी Use करते हैं जब itemprop Attribute Present हो।
<style>    इसे तब Use करते हैं, जब scoped Attribute Present हो।

Sectioning Content

इस Group से Associated Elements, Current Document की Outline Create करने के लिए उपयोगी होते हैं, जो कि <header>, <footer> व अन्य Heading Elements (h1, h2, h3, h4, h5, h5, hgroup) का Scope Define करते हैं। इस Category से संबंधित Elements निम्नानुसार हैं:

<article>, <aside>, <nav>, <section>

Heading Content

इस Group के Elements किसी Section में लिखे गए Content का Title Define करते हैं। Section को दो तरीकों से Mark किया जा सकता है। पहला तरीका Manual होता है, जिसमें विभिन्न Sectioning Elements को Use किया जाता है। इन Elements को Use करके लिखा गया Content, Sectioning Content कहलाता है, जबकि दूसरे तरीके में उस समय Automatically Invisible Section बन जाते हैं, जब हम किसी Heading Element (h1, h2, h3, h4, h5, h6, hgroup) का प्रयोग करते हैं। इस Category से संबंधित Elements निम्नानुसार हैं:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

हालांकि Sectioning Content कुछ Headings को Hold करता है, लेकिन <header> Element को इस Group में शामिल नहीं किया गया है।

Phrasing Content

इस Group के अन्दर वे Elements आते हैं, जो Text अथवा अन्य Mark-ups को Hold करने का काम करते हैं। Phrasing Content सामान्यतया Paragraphs Create करते हैं। इस Category से संबंधित Elements निम्नानुसार हैं:

कुछ विशेष परिस्थितियों में हम कुछ और Elements को इस Category के Elements के रूप में Use कर सकते हैं, जो कि निम्नानुसार हैं:

<a>, <area>, <del>, <ins>, <link>, <map>, <meta>

Embedded Content

इस Category में वे Elements होते हैं, जो किसी अन्य Resource अथवा Content को किसी अन्य Mark-up Language अथवा Namespace से Import करते हैं। इस Category से Related Elements निम्नानुसार हैं:

<audio> , <canvas> , <embed> , <iframe> , <img> , <math> , <object> , <svg> , <video>

Interactive Content

इस Category में वे Elements होते हैं जो User Interaction के लिए Design किए गए हैं। ये Elements निम्नानुसार हैं:

<a> , <button> , <details> , <embed> , <iframe> , <keygen> , <label> , <select> , <textarea>

कुछ अन्य Elements कुछ विशेष परिस्थितियों में इस Category में Participate करते हैं, निम्नानुसार हैं :

<audio>  यदि controls Attribute Present हो।
<img>     यदि usemap Attribute Present हो।
<input>  यदि type Attribute Hidden न हो।
<menu>  यदि type Attribute Toolbar State में हो।
<object> यदि usemap Attribute Present हो।
<video>  यदि controls Attribute Present हो।

Form-Associated Content

इस Category में वे Elements आते हैं जो किसी Form Element के अन्दर Nested होते हैं। सामान्यतया इस Category के Elements के साथ form Attribute में id Specified होता है अथवा ये Form के अन्दर होते हैं। ये Elements निम्नानुसार हैं:

<button>, <fieldset> , <input> , <keygen> , <label> , <meter> ,
<object> , <output> , <progress> , <select> , <textarea>

इस Category के Elements की कुछ Sub-Category भी है, जो निम्नानुसार हैः

listed

इस Category के Element निम्नानुसार हैं:

<button> , <fieldset> , <input> , <keygen> , <object> , <output> , <select> , <textarea>

labelable

जो Elements <label> Element के साथ Associated हो सकते हैं, इस Category में आते हैं। इस Category के Element निम्नानुसार हैं:

<button> , <input> , <keygen> , <meter> , ><output> , <progress> , <select> , <textarea>

submittable

जो Elements, Form Submitting के समय Form Data Set Create करने के लिए Use होते हैं, इस Category में आते हैं। इस Category के Element निम्नानुसार हैं:

<button> , <input> , <keygen> , <object> , <select> , <textarea>

resettable

जो Elements, Form Resetting के समय Affected होते हैं, इस Category में आते हैं। इस Category के Element निम्नानुसार हैं:

<input> , <keygen> , <output> ,<select> ,  <textarea>

Transparent Content Model

<del> व <ins> Elements Transparent Elements हैं। ये वे Elements होते हैं, जिन्हें HTML Document से Remove कर देने पर भी Final Output Rendered Content पर कोई प्रभाव नहीं पडता है।