डेवलपर टूल · HTML WYSIWYG एडिटर
शीर्षक बड़े बोल्ड टेक्स्ट नहीं हैं: वेब सामग्री में शीर्षक स्तर क्यों मायने रखते हैं
· यह क्यों मायने रखती है
HTML अभिगम्यता पाठ संपादन
यह बताता है कि क्यों h1 से h6 एक दस्तावेज़ की रूपरेखा बनाते हैं जिस पर स्क्रीन-रीडर उपयोगकर्ता और खोज इंजन भरोसा करते हैं, और यह कैसे जांचें कि दृश्य शीर्षक वास्तविक शीर्षक हैं।
बिना किसी शीर्षक वाला लेख - एक पेज के साथ खुलता है जहां प्रत्येक स्पष्ट शीर्षक एक बोल्ड पैराग्राफ है
CSS द्वारा बड़ी और बोल्ड की गई एक पंक्ति दस्तावेज़ ट्री में एक पैराग्राफ रहते हुए एक अनुभाग शीर्षक की तरह दिख सकती है। दूरदर्शी पाठक टाइपोग्राफी से विभाजन का अनुमान लगा सकते हैं, लेकिन सॉफ़्टवेयर को पहचानने, एकत्र करने या नेविगेट करने के लिए कोई शीर्षक तत्व नहीं मिलता है। केवल दिखावे से ही पदानुक्रम नहीं बनता।
ToolAcre शैली नियंत्रणों से बचता है और h1 से h4 के लिए स्पष्ट ब्लॉक विकल्प प्रदान करता है। इसलिए एक लेखक मजबूत पाठ के साथ किसी शीर्षक का अनुकरण करने के बजाय उसे एन्कोड कर सकता है। अनुमति सूची स्रोत में h5 और h6 को भी स्वीकार करती है, हालाँकि टूलबार उन स्तरों के लिए नियंत्रणों का विज्ञापन नहीं करता है।
एक शीर्षक तत्व आकार से परे क्या करता है - इसकी रूपरेखा, नेविगेशन शॉर्टकट और इसके द्वारा प्रदान की जाने वाली संरचना की व्याख्या करता है
एक शीर्षक तत्व उस सामग्री को लेबल करता है जो नेविगेशन योग्य दस्तावेज़ संरचना का अनुसरण करती है और उसमें योगदान करती है। ब्राउज़र एक्सेसिबिलिटी APआई के माध्यम से उस भूमिका को उजागर करते हैं, और कई सहायक टूल शीर्षकों की एक सूची प्रस्तुत कर सकते हैं या उनके बीच स्थानांतरित हो सकते हैं। स्टाइलशीट अनुपस्थित या प्रतिस्थापित होने पर तत्व पहचानने योग्य रहता है।
एक बोल्ड पैराग्राफ कोई भी संरचनात्मक संकेत नहीं देता है। यह अभी भी उपयोगी गद्य हो सकता है, लेकिन इसे खंड सीमा के रूप में खड़ा नहीं किया जाना चाहिए। एक रूपरेखा या पहुंच निरीक्षण टूल के साथ अंतिम दस्तावेज़ का परीक्षण करें क्योंकि स्थानीय पूर्वावलोकन शीर्षक संबंधों की रिपोर्ट नहीं करता है या लेखक के संगठन को मान्य नहीं करता है।
स्तर घोंसला बना रहे हैं, आकार नहीं - यह बताता है कि h2 से h4 पर जाने से पाठक और टूल भ्रमित क्यों होते हैं
स्तर नेस्टिंग को व्यक्त करते हैं, प्रकार के आकारों का मेनू नहीं। h2 आम तौर पर पेज के प्राथमिक संदर्भ के नीचे एक अनुभाग प्रस्तुत करता है; एक h3 उस h2 का एक उपधारा प्रस्तुत करता है। केवल इसलिए h4 का चयन करना क्योंकि इसका डिफ़ॉल्ट फ़ॉन्ट सही दिखता है, मध्यवर्ती संरचना के गायब होने का संकेत दे सकता है।
ToolAcre h1 से h6 तक संरक्षित रखेगा और छोड़े गए स्तरों को अस्वीकार नहीं करेगा। फ़िल्टर शब्दावली को लागू करता है, एडिटरीय तर्क को नहीं। कागज पर या स्रोत में रूपरेखा बनाएं, फिर पसंदीदा दृश्य पैमाने का पीछा करने के लिए स्तरों को बदले बिना उपस्थिति को नियंत्रित करने के लिए गंतव्य पर CSS का उपयोग करें।
संदर्भ के अनुसार पेज शीर्षक चुनें; यह एडिटर वन-एच1 नियम लागू नहीं करता है
कार्यपुस्तिका एक h1 निर्धारित करती है, लेकिन कार्यान्वयन में ऐसा कोई नियम नहीं है और यह लेख एक सार्वभौमिक कानून के रूप में किCAक का आविष्कार नहीं करता है। पेज टेम्प्लेट, एम्बेडेड टुकड़े और दस्तावेज़ कन्वेंशन यह निर्धारित करते हैं कि सामग्री को अपना प्राथमिक शीर्षक प्रदान करना चाहिए या होस्ट द्वारा प्रदान किए गए शीर्षक के नीचे शुरू करना चाहिए।
संपूर्ण गंतव्य का निरीक्षण करें, अकेले टुकड़े का नहीं। यदि CMS पहले से ही लेख शीर्षक को h1 के रूप में प्रस्तुत करता है, तो चिपकाई गई मुख्य सामग्री समझदारी से h2 से शुरू हो सकती है। ToolAcre उस बाहरी टेम्पलेट को नहीं देख सकता, इसलिए इसका h1 विकल्प प्रत्येक ड्राफ्ट के लिए अनुशंसा के बजाय एक क्षमता है।
व्यावहारिक उदाहरण: स्रोत में शीर्षक तत्व के साथ बोल्ड पैराग्राफ की तुलना करें
`<p><strong>Installation</strong></p>` और `<h2>Configuration</h2>` बनाएं. दोनों सैंडबॉक्स में प्रमुख दिख सकते हैं, फिर भी स्रोत से पता चलता है कि केवल कॉन्फ़िगरेशन ही एक शीर्षक है। प्रकाशित पेज पर एक्सेसिबिलिटी ट्री निरीक्षण को भी शीर्षक के रूप में केवल h2 की पहचान करनी चाहिए।
ब्लॉक चयनकर्ता या स्रोत मोड के माध्यम से इंस्टॉलेशन को सही स्तर पर बदलें। फिर समीक्षा करें कि क्या दोनों शीर्षक सहकर्मी हैं या माता-पिता और बच्चे हैं। सेनिटाइज़र दोनों रूपों को सुरक्षित रखता है लेकिन उनके शब्दों से संबंध तय नहीं कर सकता। वह निर्णय दस्तावेज़ लेखक और पेज संदर्भ का है।
स्तरों का दुरुपयोग किए बिना शीर्षकों को स्टाइल करना - स्पष्ट करता है कि CSS, स्तर का चुनाव नहीं, उपस्थिति को नियंत्रित करना चाहिए
शीर्षक उपस्थिति CSS में है। एक साइट तार्किक स्तर को बनाए रखते हुए h2 को मामूली और h3 को दृष्टिगत रूप से विशिष्ट बना सकती है, बशर्ते डिज़ाइन अभी भी पदानुक्रम का संचार करता हो। केवल छोटा ब्राउज़र डिफ़ॉल्ट प्राप्त करने के लिए h4 को प्रतिस्थापित करने की तुलना में सही h2 को स्टाइल करना अधिक सुरक्षित है।
पूर्वावलोकन की स्टाइलशीट जानबूझकर सरल और हल्की है। यह आपका उत्पाद विषय नहीं है, इसलिए इसके डिफ़ॉल्ट शीर्षक आयाम गंतव्य डिज़ाइन के लिए खराब सबूत हैं। सिमेंटिक खंड को कॉपी करें, वहां स्वीकृत शैलियों को लागू करें, और एक पृथक दृश्य को संतुष्ट करने के लिए रूपरेखा को दोबारा लिखे बिना प्रतिक्रियाशील व्यवहार की समीक्षा करें।
इसमें क्या शामिल नहीं है - <section> और <article>, या SEO जैसे तत्वों को संरचना से परे विभाजित करना
यह आलेख अनुभाग और आलेख तत्वों, ARIA शीर्षक भूमिकाओं, संपूर्ण SEO मार्गदर्शन या प्रत्येक स्क्रीन रीडर को कवर नहीं करता है। यह यह भी दावा नहीं करता है कि ToolAcre छोड़े गए स्तरों, डुप्लिकेट शीर्षकों या शीर्षक पाठ गुणवत्ता को मान्य करता है। टूलबार तत्वों की आपूर्ति करता है; लेखक एक सुसंगत संरचना प्रदान करते हैं।
सेनिटाइज़्ड आउटपुट स्वचालित रूप से सुरक्षित अविश्वसनीय प्रकाशन नहीं है। पूर्वावलोकन सैंडबॉक्स ToolAcre के अंदर निष्पादन को सीमित करता है, जबकि कॉपी किया गया मार्कअप उस सुरक्षा को छोड़ देता है। गंतव्य-साइड स्वच्छता और पहुंच परीक्षण का उपयोग करें। एक सही हेडिंग ट्री एक गुणवत्ता आयाम है, सुरक्षा नियंत्रण या पूर्ण ऑडिट नहीं।
टेकअवे: संरचना पहले, शैली दूसरी - नियम का सारांश और कैसे ToolAcre का HTML WYSIWYG एडिटर आपको यह पुष्टि करने देता है कि दृश्य शीर्षक के पीछे मार्कअप एक शीर्षक तत्व है या नहीं
संरचना पहले, शैली बाद में। तय करें कि कौन से विषय अनुभाग और उपखंड हैं, उस संबंध से स्तर निर्दिष्ट करें, फिर उत्सर्जित होने वाले वास्तविक h तत्वों ToolAcre का निरीक्षण करें। फ़ॉन्ट, रंग और रिक्ति गायब होने पर भी शीर्षक सार्थक रहना चाहिए।
अंत में, टुकड़े को उसके वास्तविक टेम्पलेट के अंदर रखें और संयुक्त पदानुक्रम की समीक्षा करें। स्थानीय एडिटर बाहरी पेज शीर्षक या नेविगेशन शेल को नहीं जान सकता। इसका मूल्य पारदर्शिता है: दृश्य स्वरूपण और स्रोत एक-दूसरे के बगल में बैठते हैं, जिससे प्रकाशन से पहले नकली शीर्षकों का पता लगाना आसान हो जाता है।