दस्तावेज़ संरचना और रूपरेखा
एक पृष्ठ तत्वों का एक समतल ढेर नहीं है। ऊपर से नीचे तक एक को पढ़ें और इसे एक साथ रखना चाहिए: एक शीर्षक, फिर इसके नीचे अनुभाग, प्रत्येक के अपने शीर्षलेख के साथ, एक क्रम में जो इसके माध्यम से जाने के लिए समझदारी रखता है। वह आकार पृष्ठ की रूपरेखा है, और यह दो चीजों से आता है जो एक साथ काम कर रहे हैं। शीर्षलेख प्रत्येक भाग का नाम देते हैं, और सिमेंटिक HTML अध्याय से मुख्य क्षेत्र, <header>, <nav>, <main>, <aside>, और <footer>, उन भागों को क्षेत्रों में समूहित करते हैं। यह अध्याय इस बारे में है कि दोनों कैसे एक पूरे पृष्ठ में संयोजित होते हैं।
कैसे शीर्षलेख और मुख्य क्षेत्र एक रूपरेखा बनाते हैं
एक वेब पृष्ठ ऊपर से नीचे तक पढ़ता है, उसी तरह जैसे आप किताब के एक पृष्ठ को पढ़ते हैं। जो कोई भी दौरा करता है वह शीर्ष पर शुरू करता है और नीचे काम करता है, इसलिए जिस क्रम में आपकी सामग्री बैठी है वह वह क्रम है जिसमें आगंतुक इसे पढ़ते हैं। चीजों को उस क्रम में रखें जिसमें कोई वास्तव में उनसे मिलना चाहता है।
शीर्षलेख वह हैं जो उस क्रम को एक आकार देते हैं। एक शीर्षलेख उस भाग के लिए एक छोटा लेबल है जो इसके बाद आता है, <h1> से नीचे <h6> तक के टैग के साथ लिखा गया है। <h1> पूरे पृष्ठ का शीर्षक है। प्रत्येक <h2> इसके नीचे एक मुख्य अनुभाग का नाम देता है, और एक <h3> एक <h2> के अंदर एक छोटे भाग का नाम देता है। उन्हें स्टैक करें और आप पृष्ठ की रूपरेखा प्राप्त करते हैं: एक विषयसूची जो पृष्ठ के क्रम को प्रतिबिंबित करती है।
<!-- सोरडौ शुरुआती लोगों के लिए -->
<h1>शुरुआती लोगों के लिए सोरडौ</h1>
<!-- आपको क्या चाहिए -->
<h2>आपको क्या चाहिए</h2>
<!-- सामग्री -->
<h3>सामग्री</h3>
<!-- उपकरण -->
<h3>उपकरण</h3>
<!-- स्टार्टर बनाना -->
<h2>स्टार्टर बनाना</h2>अपने आप में शीर्षलेखों को पढ़ें और आप पहले से ही जानते हैं कि पृष्ठ किस बारे में है और यह कैसे आयोजित है, एक भी पैराग्राफ पढ़ने से पहले।
<h1> से <h6> तक, कंकाल हैं: <h1> पृष्ठ शीर्षक है, और सब कुछ इसके अंतर्गत नेस्टेड है। केवल शीर्षलेखों को पढ़ें और आप पहले से ही जानते हैं कि पृष्ठ कैसे रखा गया है। एक मुख्य, और सही शीर्षलेख क्रम
दो आदतें एक रूपरेखा को स्वच्छ रखती हैं। सबसे पहले, पृष्ठ को एक एकल <h1> दें। यह पृष्ठ का शीर्षक है, और एक पृष्ठ का एक शीर्षक है, जिस तरह एक किताब के कवर पर एक नाम है। बाकी सब कुछ <h2> और नीचे है।
दूसरा, स्तर न छोड़ें। एक <h2> के बाद, अगला कदम नीचे <h3> है, <h5> नहीं। एक स्तर छोड़ना रूपरेखा में एक अंतराल छोड़ता है, जैसे एक विषयसूची जो अध्याय 1 और फिर अध्याय 4 सूचीबद्ध करती है। एक बार में एक स्तर में जाएं, नीचे और वापस:
<!-- सप्ताह की रातों की डिनर -->
<h1>सप्ताह की रातों की डिनर</h1>
<!-- पास्ता -->
<h2>पास्ता</h2>
<!-- टमाटर और तुलसी -->
<h3>टमाटर और तुलसी</h3>
<!-- लहसुन की मक्खन -->
<h3>लहसुन की मक्खन</h3>
<!-- सलाद -->
<h2>सलाद</h2>
<!-- यूनानी -->
<h3>यूनानी</h3>जिस सामग्री के शीर्षलेख हैं वह आमतौर पर एक <main> क्षेत्र में रहती है। <main> पृष्ठ की प्राथमिक सामग्री को चिह्नित करता है, जो पृष्ठ के लिए अद्वितीय है और साझा किए गए हेडर, नेविगेशन, या पाद लेख नहीं है। एक <main> है, जैसे एक <h1> है।
<h2> फिर <h3>, <h5> के लिए कोई कूद नहीं। और पृष्ठ की मुख्य सामग्री एक <main> में जाती है। यदि कोई शीर्षलेख गलत आकार दिख रहा है, तो वह CSS के लिए एक नौकरी है, स्तरों को स्विच करने के लिए एक कारण नहीं। सामग्री को समूहीकृत और आदेश देना
संबंधित सामग्री बेहतर पढ़ी जाती है जब यह समूहीकृत होती है। इसके लिए दो तत्व मौजूद हैं। एक <section> एक पृष्ठ का एक थीम्ड चंक है जिसका अपना शीर्षलेख है, जैसे एक नुस्खा का "सामग्री" हिस्सा। एक <article> एक ऐसा टुकड़ा है जो अपने आप में खड़ा होता है और यदि आप इसे उठाते हैं तो भी समझदारी होगी, जैसे एक एकल ब्लॉग पोस्ट या एक ग्राहक समीक्षा।
<!-- लेख -->
<article>
<!-- धीमी-वृद्धि फोकेशिया -->
<h2>धीमी-वृद्धि फोकेशिया</h2>
<!-- एक रोटी जिसे लगभग कोई आटा गूंधना की जरूरत नहीं है। -->
<p>एक रोटी जिसे लगभग कोई आटा गूंधना की जरूरत नहीं है।</p>
</article>आदेश समूहीकरण जितना महत्वपूर्ण है। क्योंकि पृष्ठ ऊपर से नीचे तक पढ़ता है, सबसे महत्वपूर्ण सामग्री शीर्ष के पास रखें, और बाकी को उस क्रम में व्यवस्थित करें जिसमें एक पाठक इसे चाहता है। एक नुस्खा चरणों से पहले सूचीबद्ध करता है जो आपको चाहिए, क्योंकि यह वह क्रम है जिसमें आप इसे अनुसरण करेंगे।
<section> के साथ संबंधित सामग्री को समूहित करें एक थीम्ड भाग के लिए जिसका एक शीर्षलेख है, और <article> एक ऐसे टुकड़े के लिए जो अपने आप पर खड़ा होता है, जैसे एक एकल पोस्ट। फिर आदेश को ध्यान में रखें: पृष्ठ ऊपर से नीचे तक पढ़ता है, इसलिए महत्वपूर्ण चीजें शीर्ष के पास जाती हैं। इसे उस क्रम में लिखें जिसमें कोई वास्तव में इसे पढ़ना चाहता है। सामान्य संरचनात्मक गलतियां
कुछ संरचनात्मक गलतियां बार-बार दिखाई देती हैं, और प्रत्येक के पास एक स्वच्छ फिक्स है।
- पाठ को बड़ा बनाने के लिए शीर्षलेख टैग का उपयोग करना।
<h3>तक पहुंचना क्योंकि यह उस आकार पर प्रस्तुत होता है जो आप चाहते हैं रूपरेखा को तोड़ता है। स्तर को अर्थ से चुनें, और आकार को CSS में सेट करें। - शीर्षलेख स्तरों को छोड़ना।
<h2>से<h4>तक कूदना रूपरेखा में एक छेद छोड़ता है। एक बार में एक स्तर नीचे जाएं। - एक से अधिक
<h1>। एक पृष्ठ का एक शीर्षक है। अतिरिक्त<h1>टैग विषयसूची को मलिन करते हैं। - कोई शीर्षलेख नहीं। पैराग्राफों का एक लंबा रन इसे तोड़ने के लिए कुछ भी नहीं के साथ स्कैन करना मुश्किल है। एक पाठक को अपना रास्ता खोजने में मदद करने के लिए शीर्षलेख जोड़ें।
इन्हें ठीक करें और पृष्ठ सभी के लिए स्पष्ट रूप से पढ़ता है, चाहे वह अपनी आंखों से स्कैन कर रहा हो या इसे जोर से पढ़ा जा रहा हो। Accessibility अध्याय हर आगंतुक के लिए एक पृष्ठ को काम करने पर आगे बढ़ता है।
<h1> न जोड़ें, और एक लंबे पृष्ठ को कोई शीर्षलेख के साथ न छोड़ें। प्रत्येक एक रूपरेखा को मलिन करता है। शीर्षलेख स्तर अर्थ से चुनें और CSS आकार संभालने दें।