पुष्टिकरण, त्रुटि और चेतावनियों के संदेश के लिए अर्थपूर्ण HTML

Question

पुष्टि, त्रुटि और चेतावनियों के संदेशों के लिए अर्थपूर्ण HTML पर लोगों की राय क्या हैं?

वर्तमान में मैं कुछ सरल की तरह है:

<div class="message message-warning"> 
    <h3>Message Title</h3> 
    <p>Message text</p> 
</div> 

जिससे संदेश-चेतावनी वर्ग संदेश-पुष्टि या संदेश त्रुटि के द्वारा बदल दिया जाता है, तो संदेश एक अलग प्रकार का है।

बस इस बात को चिह्नित करने का अधिक अर्थपूर्ण तरीका होने पर रुचि है?

अग्रिम धन्यवाद

Answer 1

सं HTML में कोई तत्व है कि एक पुष्टिकरण, त्रुटि, या चेतावनी संदेश को दर्शाता है।

तकनीकी रूप से, samp तत्व को HTML 4.01 और HTML 3.2 में "प्रोग्राम, स्क्रिप्ट इत्यादि से नमूना आउटपुट" के रूप में परिभाषित किया गया है, हालांकि मूल रूप से HTML 2.0 में "शाब्दिक वर्णों का क्रम", आमतौर पर एक मोनो- स्पेस फ़ॉन्ट "और किसी प्रोग्राम या कंप्यूटिंग सिस्टम से" (नमूना) आउटपुट के रूप में एचटीएमएल 5 में कुछ हद तक फिर से परिभाषित किया जा रहा है "। तो इसका अर्थ अस्पष्ट है, और इसका अधिक उपयोग नहीं किया जाता है, इसलिए इसका उपयोग करने में कोई वास्तविक बात नहीं है। लेकिन यह तर्क दिया जा सकता है कि किसी प्रोग्राम से किसी भी संदेश के लिए samp मार्कअप का उपयोग करना स्वीकार्य है। यह एक टेक्स्ट-स्तरीय तत्व है, इसलिए आपको इसे h3 और अंदर (किसी भी) p के अंदर अलग-अलग उपयोग करने की आवश्यकता होगी, संरचना को कम या ज्यादा तोड़ना होगा।

यह भी कहा जा सकता है कि संदेश बाहरी स्रोत से उद्धरण हैं, इसलिए उन्हें के अंदर लपेटा जा सकता है।

h3 बनाम कुछ अन्य मार्कअप का उपयोग वास्तव में एक अर्थपूर्ण प्रश्न नहीं है, लेकिन संरचनात्मक: यह तीसरी स्तर के घोंसले पर कुछ सामग्री के लिए एक शीर्षक है?

Answer 2

यदि आप अर्थपूर्ण जाना चाहते हैं, तो आप संदेशों और चेतावनियों के लिए ऑटोलॉजी बनाकर एक अर्थपूर्ण-वेब दृष्टिकोण का उपयोग कर सकते हैं और इसे अपने HTML में एम्बेड करने के लिए RDFa का उपयोग कर सकते हैं।

Answer 3

मुझे लगता है कि strong element ऐसे संदेशों के लिए एक उपयुक्त तत्व है।

आप संदेश के महत्व को इंगित करने के लिए कईstrong तत्वों का उपयोग कर सकते हैं:

<strong>Login successfully.</strong> <!-- confirmation --> 
<strong><strong>Wrong login data.</strong></strong> <!-- warning/error --> 

मैं एक div के बजाय एक section element का उपयोग करेंगे, तो आप शीर्षक के रूप में एक h1 उपयोग कर सकते हैं। अब आप शीर्षक को स्तर समायोजित किए बिना, जहां भी आपको अपने दस्तावेज़ में इसकी आवश्यकता हो, इस ब्लॉक को डाल सकते हैं। पूरे पृष्ठ पर लागू होने वाली गंभीर त्रुटियों के मामले में, यह पृष्ठ पर पहला तत्व होना चाहिए।

विभिन्न वेरिएंट संभव हो रहे हैं:

<section class="message message-error"> 
    <h1><strong><strong>Error:</strong> Wrong login data.</strong></h1> 
    <p>The username and/or password is wrong. Try …</p> 
</section> 

<section class="message message-error"> 
    <h1>Error</h1> 
    <p><strong><strong>Wrong login data.</strong></strong></p> 
    <p>The username and/or password is wrong. Try …</p> 
</section> 

<section class="message message-error"> 
    <strong><strong>Wrong login data.</strong></strong> 
</section> 

<section class="message message-error"> 
    <p><strong><strong>Wrong login data.</strong></strong> Try …</p> 
</section> 

कौन सा उपयोग करने के लिए, संदेश के प्रकार पर निर्भर करता है कि सटीक त्रुटि, पता है अगर अतिरिक्त मदद पाठ प्रदान की जाती है, और अगर या नहीं तो कई संदेश आ सकता है एक ही समय में।

ध्यान दें कि आप शायद input तत्व पर लागू संदेशों के लिए शीर्षक का उपयोग नहीं करना चाहते हैं (उदा। जब उपयोगकर्ता ने आवश्यक फ़ील्ड भर दिया हो या गलत सामग्री दर्ज की हो।), क्योंकि ये त्रुटि संदेश संबंधित label resp में संबंधित होना चाहिए। सीधे input तत्व के बगल में।

पहुंच के लिए, आपको WAI-ARIA पर एक नज़र रखना चाहिए। मुझे लगता है कि aria-live="assertive" त्रुटि संदेशों को चिह्नित करने का एक उचित तरीका हो सकता है, लेकिन मुझे एआरआईए अच्छी तरह से नहीं पता है, इसलिए आपको उपयोग से पहले निश्चित रूप से इसके बारे में पढ़ना चाहिए।

Answer 4

क्या मैं <figure> का सुझाव दे सकता हूं?

HTML5 Doctor से अंश (और वे, W3C से):

आंकड़ा तत्व सामग्री की एक इकाई का प्रतिनिधित्व करता है, वैकल्पिक रूप से एक शीर्षक के साथ, कि आत्म निहित, कि आम तौर पर से एक इकाई के रूप में संदर्भित किया जाता है दस्तावेज़ का मुख्य प्रवाह, और दस्तावेज़ के अर्थ को प्रभावित किए बिना दस्तावेज़ के मुख्य प्रवाह से दूर ले जाया जा सकता है।

चलें पहला सवालों का जवाब:

• इस तरह के एक संवाद एक इकाई है? हां
• क्या ऐसा संवाद स्वयं निहित है? हां
• क्या इस तरह के एक संवाद दस्तावेज़ से प्रभावित किए बिना दस्तावेज़ से दूर हो सकता है? हाँ

हाँ, यह एक <figure> बिल्कुल फिट बैठता है।

और, <figcaption> शीर्षक सलाखों/शीर्षकों के लिए विशेष रूप से अच्छा है।

तो, मैं भी आगे देखने के लिए कोशिश कर के बिना <figure> के साथ जाना चाहते हैं:

<figure id="dialog-box" class="warning"> 
    <figcaption>Message Title</figcaption> 
    <p>Message text</p> 
</figure> 

Answer 5

<figure> विचार दिलचस्प है, लेकिन मैं इसे यहाँ फिट बैठता है नहीं लगता। टैग के उपयोग को औचित्य देने के लिए वास्तविक सामग्री क्या है। Spec के अनुसार, <figure> "सामग्री की इकाई" का प्रतिनिधित्व करता है - जिसका अर्थ है एक छवि, आरेख, कोड ब्लॉक, आदि जो वैकल्पिक रूप से इस सामग्री के लिए एक कैप्शन (<figcaption>) हो सकता है। यह कहना एक खिंचाव होगा कि <figcaption> के बाहर का संदेश सामग्री की एक उपयुक्त इकाई का प्रतिनिधित्व करता है।

हमें इस उदाहरण में <h#> टैग का उपयोग करने से सावधान रहना चाहिए, क्योंकि संदेश द्वितीयक सामग्री है, और शायद दस्तावेज़ रूपरेखा का हिस्सा नहीं होना चाहिए।

revised spec के तहत कोई तर्क दे सकता है कि <aside> उचित होगा। <article> के बाहर उपयोग किए जाने पर इसे अब "स्पर्शिक सामग्री" माना जाता है।

<strong> संदेश के "शीर्षक" के लिए उपयुक्त होगा, क्योंकि यह संदेश का अर्थात् अधिक महत्वपूर्ण हिस्सा है, लेकिन दस्तावेज़ शीर्षलेख नहीं है। कि एक अच्छा पुराने जमाने, सबसे अच्छा तत्व शब्दार्थ व्यर्थ <div> हो सकता है

<aside class="warning-or-whatever"> 
    <strong>Message Title</strong> 
    <p>Message Text</p> 
</aside> 

एक भी बहस कर सकते, कुछ भी विशेष रूप से इस तरह के एक सुविधा के लिए बनाया है के बाद से,: तो कोड तो लग सकता है।मुझे लगता है कि यह आपके संदेश को "टेंगेंशियल" के बारे में बताता है।

धन्यवाद, जेफ

Answer 6

Alerts are one of the semantics that ARIA added to HTML, "शुद्ध" HTML में करने का कोई सीधा रास्ता नहीं है क्योंकि वहाँ। इसलिए:

<aside role="alert"> 
    <strong>Message Title<strong> 
    <p>Message Text</p> 
</aside> 

मैं व्यक्तिगत रूप से तत्व के रूप में उपयोग करने के लिए <aside> पर role तमाचा चाहते हैं - यह तकनीकी रूप से पेज की सामग्री के भाग के रूप Jeff Lindblom's answer द्वारा वर्णित नहीं है,।

इस के लिए एक "अर्थ" CSS चयनकर्ता होने के लिए आसान पर्याप्त है:

[role="alert"] { 
    font-size: 2em; /* or what have you */ 
}