HTML
सेक्शनिंग तत्व
खोज…
टिप्पणियों
HTML5 मानक मुख्य तत्व को सेक्शनिंग तत्व के रूप में सूचीबद्ध नहीं करता है।
लेख तत्व
<article> तत्व में लेख, ब्लॉग पोस्ट, उपयोगकर्ता टिप्पणियां या एक इंटरैक्टिव विजेट जैसी स्व-निहित सामग्री होती है, जिसे आरएसएस के उदाहरण के लिए पेज के संदर्भ में वितरित किया जा सकता है।
- जब लेख तत्वों को नेस्ट किया जाता है, तो आंतरिक लेख नोड की सामग्री बाहरी लेख तत्व से संबंधित होनी चाहिए।
एक ब्लॉग ( section ) जिसमें कई पोस्ट ( article ) हैं, और टिप्पणियां ( article ) कुछ इस तरह दिख सकती हैं।
<section>
<!-- Each individual blog post is an <article> -->
<article>
<header>
<h1>Blog Post</h1>
<time datetime="2016-03-13">13th March 2016</time>
</header>
<p>The article element represents a self contained article or document.</p>
<p>The section element represents a grouping of content.</p>
<section>
<h2>Comments <small>relating to "Blog Post"</small></h2>
<!-- Related comment is also a self-contained article -->
<article id="user-comment-1">
<p>Excellent!</p>
<footer><p>...</p><time>...</time></footer>
</article>
</section>
</article>
<!-- ./repeat: <article> -->
</section>
<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
<p>This content should be unrelated to the blog.</p>
</footer>
अनावश्यक उपयोग से बचें
जब पृष्ठ की मुख्य सामग्री (हेडर, फुटर, नेविगेशन बार आदि को छोड़कर) बस तत्वों का एक समूह है। आप <main> तत्व के पक्ष में <article> को छोड़ सकते हैं।
<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>
इसके बजाय, यह इंगित करने के लिए कि इस पृष्ठ के लिए यह main सामग्री है, लेख को <main> तत्व से बदलें।
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
यदि आप किसी अन्य तत्व का उपयोग करते हैं, तो सुनिश्चित करें कि आप कई उपकरणों और गैर HTML5 ब्राउज़रों में सही व्याख्या और प्रतिपादन के लिए <main> ARIA भूमिका निर्दिष्ट करें।
<section role="main">
<p>This section is the main content of this page.</p>
</section>
टिप्पणियाँ:
<main>तत्व वंशजों को<article>भीतर अनुमति नहीं है
<article> तत्व के लिए आधिकारिक एचटीएमएल 5 विनिर्देश पढ़ने के लिए यहां क्लिक करें
मुख्य तत्व
<main> तत्व में आपके वेब पेज की मुख्य सामग्री है । यह सामग्री व्यक्तिगत पृष्ठ के लिए अद्वितीय है, और साइट पर कहीं और नहीं दिखनी चाहिए। हेडर, फुटर, नेविगेशन, लोगो इत्यादि जैसी दोहराई जाने वाली सामग्री को तत्व के बाहर रखा गया है।
-
<main>तत्व को कभी भी एक ही पृष्ठ पर अधिकतम एक बार उपयोग किया जाना चाहिए। -
<main>तत्व को एकarticle,aside,footer,headerयाnavतत्व के वंशज के रूप में शामिल नहीं किया जाना चाहिए।
निम्नलिखित उदाहरण में, हम एक एकल ब्लॉग पोस्ट (और संदर्भ और टिप्पणी जैसी संबंधित जानकारी) प्रदर्शित कर रहे हैं।
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
यह पोस्ट करने के लिए ब्लॉग पोस्ट
<main>तत्व के भीतर समाहित है, यह इस पृष्ठ के लिए मुख्य सामग्री है (और इसलिए, वेबसाइट में अद्वितीय है)।<header>और<footer>टैग भाई-बहन के<main>तत्व हैं।
टिप्पणियाँ:
एचटीएमएल 5 विनिर्देश एक समूह तत्व के रूप में
<main>तत्व को पहचानता है, न कि एक सेक्शनिंग तत्व।
- ARIA भूमिका विशेषताएँ :
main(डिफ़ॉल्ट) ,presentationमुख्य सामग्री के रूप में उपयोग किए जाने वाले अन्य तत्वों के लिए एक
role="main"ARIA भूमिका विशेषता जोड़ना उपयोगकर्ता एजेंटों की सहायता करने के लिए सलाह दी जाती है जो HTML5 का समर्थन नहीं करते हैं और उन लोगों के लिए अधिक संदर्भ प्रदान करते हैं।डिफ़ॉल्ट रूप से
<main>तत्व की मुख्य भूमिका है, और इसलिए इसे प्रदान करने की आवश्यकता नहीं है।
<main> तत्व के लिए आधिकारिक एचटीएमएल 5 विनिर्देश पढ़ने के लिए यहां क्लिक करें
नव तत्व
<nav> तत्व का मुख्य रूप से उन वर्गों के लिए उपयोग करने का इरादा है, जिनमें वेबसाइट के लिए मुख्य नेविगेशन ब्लॉक होते हैं, इसमें वेब पेज के अन्य हिस्सों (जैसे सामग्री की तालिका के लिए एंकर) या अन्य पृष्ठ पूरी तरह से लिंक शामिल हो सकते हैं।
इनलाइन आइटम
निम्नलिखित हाइपरलिंक का एक इनलाइन सेट प्रदर्शित करेगा।
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
जरूरत पड़ने पर सूची आइटम का उपयोग करें
यदि सामग्री वस्तुओं की एक सूची का प्रतिनिधित्व करती है, तो इसे दिखाने के लिए और उपयोगकर्ता अनुभव को बढ़ाने के लिए एक सूची आइटम का उपयोग करें।
role="navigation" पर ध्यान दें, इस पर और नीचे।
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
अनावश्यक उपयोग से बचें
<footer> तत्वों में साइट के अन्य भागों के लिंक की एक सूची हो सकती है (FAQ, T & C, आदि)। अकेले पाद लेख तत्व इस मामले में पर्याप्त है, आपको <footer> में <nav> तत्व के साथ अपने लिंक को और अधिक लपेटने की आवश्यकता नहीं है ।
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
टिप्पणियाँ:
<main>तत्व के वंशजों को<nav>भीतर अनुमति नहीं है
role="navigation"ARIA भूमिका को<nav>तत्व से जोड़ने से उपयोगकर्ता एजेंटों की सहायता करने की सलाह दी जाती है जो HTML5 का समर्थन नहीं करते हैं और जो करते हैं उनके लिए अधिक संदर्भ प्रदान करते हैं।<nav role="navigation"><!-- ... --></nav>
स्क्रीन रीडर: (सॉफ़्टवेयर जो नेत्रहीन या दृष्टिहीन उपयोगकर्ताओं को साइट पर नेविगेट करने की अनुमति देता है)
स्क्रीन रीडर्स जैसे उपयोगकर्ता एजेंट अपनी आवश्यकताओं के आधार पर
<nav>तत्व की अलग-अलग व्याख्या करेंगे।
- यह पृष्ठ प्रदान करते समय
<nav>तत्व को उच्च प्राथमिकता दे सकता है- यह तत्व के प्रतिपादन में देरी कर सकता है
- यह उपयोगकर्ता की जरूरतों के लिए एक विशिष्ट तरीके से पृष्ठ को अनुकूलित कर सकता है
उदाहरण: भीतर पाठ लिंक बनाने<nav>कोई है जो नेत्रहीनों है के लिए बड़ा तत्व।
<nav> तत्व के लिए आधिकारिक एचटीएमएल 5 विनिर्देश पढ़ने के लिए यहां क्लिक करें
अनुभाग तत्व
<section> तत्व विषयगत समूह सामग्री के लिए एक सामान्य अनुभाग का प्रतिनिधित्व करता है। हर खंड, आम तौर पर, के एक बच्चे के रूप में एक ऐसा शीर्षक तत्व के साथ की पहचान की जा करने के लिए सक्षम होना चाहिए section ।
- आप एक
<article>और इसके विपरीत<section>तत्व का उपयोग कर सकते हैं। - हर खंड में एक विषय होना चाहिए (इस क्षेत्र की पहचान करने वाला एक प्रमुख तत्व)
- एक सामान्य स्टाइल 'कंटेनर' के रूप में
<section>तत्व का उपयोग न करें।
यदि आपको स्टाइल लागू करने के लिए कंटेनर की आवश्यकता है, तो इसके बजाय<div>उपयोग करें।
निम्नलिखित उदाहरण में, हम एक अध्याय के साथ एक ब्लॉग पोस्ट प्रदर्शित कर रहे हैं, जिसमें प्रत्येक अध्याय एक खंड (विषयगत रूप से समूहीकृत सामग्री का एक समूह है, जिसे प्रत्येक अनुभाग में शीर्षक तत्वों द्वारा पहचाना जा सकता है) ।
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
टिप्पणियाँ:
डेवलपर्स को लेख तत्व का उपयोग करना चाहिए जब यह तत्व की सामग्री को सिंडिकेट करने के लिए समझ में आता है।
<main> तत्व के लिए आधिकारिक एचटीएमएल 5 विनिर्देश पढ़ने के लिए यहां क्लिक करें
हैडर तत्व
<header> तत्व अपने निकटतम पूर्वज सेक्शनिंग सामग्री या सेक्शनिंग रूट तत्व के लिए परिचयात्मक सामग्री का प्रतिनिधित्व करता है। A <header> आमतौर पर परिचयात्मक या नेविगेशनल एड्स का एक समूह होता है।
नोट: हेडर तत्व सामग्री को सेक्शन नहीं कर रहा है; यह एक नया खंड पेश नहीं करता है।
उदाहरण:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
इस उदाहरण में, <article> में <header> ।
<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>
पाद तत्व
<footer> तत्व में पृष्ठ का पाद लेख भाग होता है।
यहां <footer> तत्व के लिए एक उदाहरण है जिसमें p पैराग्राफ टैग है।
<footer>
<p>All rights reserved</p>
</footer>