`<output>` टैग

• <output> टैग वेब डेवलपर्स के बीच ज़्यादा जाना-पहचाना नहीं है, लेकिन यह डायनेमिक परिणाम दिखाने और screen reader accessibility को built-in रूप में देता है
• यह HTML spec में काफ़ी समय से मौजूद है, और role="status" से अपने-आप मैप होकर बदलावों की जानकारी visual impairment वाले users की assistive technology तक पहुंचाता है
• <output> का उपयोग input values के आधार पर calculate किए गए results बताने के लिए किया जाता है, लेकिन ज़्यादातर tutorials और libraries इसे नज़रअंदाज़ करती हैं
• for="" attribute support जैसी बेहतरीन accessibility देता है, और JavaScript frameworks के साथ भी इसकी compatibility बहुत अच्छी है
• अलग-अलग real-world projects में calculator, slider value formatting, form validation feedback जैसी स्थितियों में इसका उपयोगी इस्तेमाल किया जा सकता है

---

HTML का छिपा हुआ रत्न: <output> टैग

सभी डेवलपर्स <input> element को अच्छी तरह जानते हैं, और यह वेब पर input लेने का मुख्य साधन है

लेकिन ज़्यादातर लोगों ने <output> element का उपयोग कभी नहीं किया होता, और कई बार उन्हें इसके अस्तित्व तक का पता नहीं होता

यह अफ़सोस की बात है, क्योंकि डायनेमिक परिणाम दिखाने और accessibility के लिए अब तक हम जिस अस्थायी उपाय के रूप में <div> और ARIA का सहारा लेते रहे हैं, उसे <output> built-in रूप में हल कर देता है

यह टैग HTML spec में बहुत पहले से मौजूद है, लेकिन अभी भी व्यापक रूप से जाना नहीं गया है

HTML5 spec में इसकी परिभाषा

HTML5 spec के अनुसार

<output> element application में calculate किए गए परिणाम या user action के परिणाम को दर्शाता है

accessibility tree में यह role="status" से मैप होता है, इसलिए इसका मान बदलते ही screen reader अपने-आप पूरा content user को पढ़कर बताता है
यह लगभग वैसा ही है जैसे डिफ़ॉल्ट रूप से aria-live="polite" aria-atomic="true" लागू हो

इसका व्यवहार user के flow में बाधा डाले बिना पूरे content को धीरे-धीरे पढ़कर सुनाता है
ज़रूरत पड़ने पर developer अलग से ARIA attributes देकर इसका व्यवहार बदल सकता है

<output> का उपयोग कैसे करें

इसे बहुत सरल तरीके से नीचे की तरह इस्तेमाल किया जा सकता है

<output>여기에 동적 값 표시</output>

सिर्फ़ इतना करने पर भी built-in assistive technology support मिल जाता है, और किसी अलग attribute या याद रखने में मुश्किल API की ज़रूरत नहीं पड़ती; सिर्फ़ pure HTML से accessibility हासिल की जा सकती है

खोज का क्षण

लेखक ने accessibility project में multi-step form के score display पर काम करते समय <output> की अहमियत को पहचाना

form का score बदलना स्क्रीन पर दिख रहा था, लेकिन screen reader users उस बदलाव को जान नहीं पा रहे थे
हालाँकि ARIA live region से समस्या हल हो गई थी, फिर भी साफ़ अर्थ वाले HTML का उपयोग करना ज़्यादा बेहतर लगा

spec देखते समय लेखक ने ऐसा <output> खोजा जिसे form से अलग भी इस्तेमाल किया जा सकता है और जो अपने-आप परिणाम की सूचना देता है, और तब समझ आया कि सबसे सरल समाधान पहले से ही spec में मौजूद था

इसका ज़्यादा उपयोग क्यों नहीं होता

यह एक भुला दिया गया टैग है; ज़्यादातर tutorials या component libraries में इसका ज़िक्र नहीं मिलता, और GitHub के public repositories में भी इसके उदाहरण लगभग नहीं के बराबर हैं

इस वजह से knowledge gap बार-बार बना रहता है, और कम इस्तेमाल होने का यह दुष्चक्र चलता रहता है

जानने लायक बातें

• <output> में <label> की तरह for="" attribute भी होता है
  • परिणाम किन input values पर निर्भर है, यह बताने के लिए संबंधित id values को space से अलग करके लिखा जा सकता है
• visually कोई बदलाव नहीं दिखता, लेकिन accessibility tree में semantic रूप से input और result के बीच संबंध बन जाता है
• <form> element के बिना भी, जहाँ कहीं text user input के अनुसार dynamically बदलता है, वहाँ इसका उपयोग किया जा सकता है
• डिफ़ॉल्ट रूप से यह inline element है, इसलिए layout की ज़रूरत के मुताबिक इसे <span> या <div> की तरह style करना पड़ सकता है
• यह 2008 से spec का हिस्सा है, इसलिए browser और screen reader support बहुत अच्छा है
• React, Vue जैसे सभी JS frameworks के साथ compatibility बढ़िया है
• अक्टूबर 2025 तक कुछ screen readers updates को नहीं पढ़ते; ऐसे मामलों में role="status" attribute अलग से जोड़ना recommended है

महत्वपूर्ण:
<output> उन calculated results या action results के लिए उपयुक्त है जो user input से स्पष्ट रूप से जुड़े हों,
इसे global notifications (जैसे toast messages) के लिए इस्तेमाल नहीं करना चाहिए; system feedback के लिए role="status" या role="alert" का उपयोग करना चाहिए

वास्तविक उपयोग के उदाहरण

calculator application

जब एक simple calculator बनाया जाता है, तो result display के लिए <output> इस्तेमाल करने पर बिना अतिरिक्त ARIA role के भी result value अपने-आप announce हो जाती है

slider value formatting (Volvo Cars case)

slider से internal value (जैसे 10000) बदलते हुए, <output> में उसे पढ़ने में आसान रूप (10,000 miles/year) में दिखाया जा सकता है
container पर role="group" और shared label देकर accessibility और React component composition, दोनों में मदद मिलती है

form validation feedback

password strength जैसी real-time validation messages भी <output> के ज़रिए assistive technology users तक तुरंत पहुँचाई जा सकती हैं

server-calculated results दिखाना

Shipping cost, tax, server API से मिले recommended values जैसे server द्वारा calculate किए गए values के लिए भी <output> उपयुक्त है

नीचे दिए गए React example की तरह server से amount लाकर उसे <output> में तुरंत दिखाया जा सकता है

native element इस्तेमाल करने का संतोष

spec के इरादे के मुताबिक pure HTML element का सही उपयोग करके,
accessibility बढ़ाई जा सकती है और code को सरल बनाया जा सकता है,
साथ ही कम-ज्ञात <output> टैग की उपयोगिता और मूल्य को नए सिरे से खोजा जा सकता है

यह इस बात की ओर भी इशारा करता है कि HTML में अब भी ऐसे कई छिपे हुए रत्न मौजूद हैं

नवीनतम अपडेट: Bob Rudis ने इस लेख के अनुरूप एक working example page प्रकाशित किया है

[GN⁺]

Hacker News राय

• <output> एलिमेंट की समस्या यह है कि इसकी functionality आधी-अधूरी implement हुई है, इसलिए व्यवहार में यह लगभग बेकार-सा लगता है
  अगर input की तरह इसमें type attribute होता तो यह कहीं ज़्यादा practical होता
  मैंने अपने Sciter में output|type के साथ प्रयोग किया और इस तरह कई types जोड़े

  • type="text": default, बिना formatting
  • type="number": user locale के अनुसार number formatting
  • type="currency": user locale के अनुसार currency formatting
  • type="date": date के रूप में दिखाना, timezone conversion नहीं
  • type="date-local": local date format, UTC datetime को local में
  • type="time": time के रूप में दिखाना
  • type="time-local": local time, value को UTC datetime की तरह handle करना
    इस तरह server user का locale जाने बिना भी data भेज सकता है

  • article और spec में जैसा बताया गया है, <output> का उपयोग app में calculation के result या user action के result को दिखाने के लिए है
    यहाँ ARIA semantics महत्वपूर्ण हैं, और page update होने पर screen reader में result पढ़ा जाता है
    <output> के अंदर आप मनचाहा typed representation खुद डाल सकते हैं
    "text" default है, और date या time के लिए <time> tag इस्तेमाल किया जा सकता है
    अभी number formatting के लिए dedicated tag नहीं है, लेकिन Intl आने के बाद इसकी demand बढ़ी है
    उदाहरण के लिए:
    <output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
    यानी <output> को हर type handle करने की ज़रूरत नहीं है, type expression तो पूरे HTML को करना चाहिए

  • यह बात सही लगती है कि आधी-अधूरी functionality की वजह से यह लगभग बेकार है
    अफ़सोस की बात है कि 2025 में भी ऐसे case बहुत ज़्यादा हैं
    मुझे लगता है इसमें काफी हद तक Safari ज़िम्मेदार है
    सबसे extreme उदाहरण <input type="date"> है
    कहते हैं कि इसे production में सीधे use किया जा सकता है, लेकिन browser compatibility issues की वजह से JS date picker ज़्यादा इस्तेमाल करना पड़ता है, जो अजीब लगता है

  • मेरी निजी इच्छा है कि <output> सीधे <input> से जुड़कर result दिखाए
    उदाहरण के लिए: <input type="range" id="example_id" name="example_nm" min="0" max="50"> <output name="example_result" for="example_id"></output> इस तरह input value सीधे दिख जानी चाहिए
    "type" specifier भी जुड़ जाए, और ::before या ::after CSS में content: से content बदलना भी संभव हो तो अच्छा होगा
    अलग-अलग <input> types के लिए ऐसी formatting functionality हो तो यह उपयोगी हो सकता है
    खासकर type="tel" जैसे cases में input value को अच्छे से format करके दिखाना सुविधाजनक होगा
    'checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week' आदि सब पर यह लागू हो सकता है
    text वाले types भी कुछ conditions में useful हो सकते हैं
    और for="" attribute की भूमिका भी और व्यापक होनी चाहिए
    अभी ज़्यादातर examples इसे <output name="result"><form oninput="result.value=..."> की तरह बदलकर इस्तेमाल करते हैं

  • <output> को input की तरह symmetric type देने के बारे में सोचना ही गलत approach है
    output input value की तरह typed चीज़ नहीं है, बल्कि page पर content बदलने वाला container है

  • मुझे नीचे वाला रूप पसंद है <output for=input> <!-- custom time-locale component डालें --> <time is=time-locale datetime=2001-02-03>2001-02-03</time> </output> अच्छा होगा अगर यह component locale के अनुसार value बदल दे
    HTML/CSS से fake content बनाना कई समस्याएँ पैदा कर सकता है
    उदाहरण के लिए CSS ::before/:after से inject की गई चीज़ को copy करते समय, या .innerText और actual inner text के बीच अंतर जैसी बातें होती हैं
    इन चीज़ों पर निर्णय लेने की ज़रूरत होगी, लेकिन अगर बहुत सारी functionality एक ही tag में ठूँस दी जाए तो अंत में वह सिर्फ़ उसी tag के लिए DSL बनकर रह जाएगी
    value का प्रकार (absolute/relative), साथ आने वाला data (जैसे currency type), और HTML processing का हिस्सा बन जाने से JS में flexible तरीके से बदलना मुश्किल हो जाएगा

• <output>? मैंने भी कभी इस्तेमाल नहीं किया
  आज पहली बार इसके बारे में जाना और इसे अपनी TIL (आज सीखी चीज़) सूची में जोड़ लिया
  GitHub public repos में search करने पर भी यह लगभग नहीं मिलता, शायद इसलिए कि अगर कोई सिखाता नहीं है तो कोई इसका इस्तेमाल भी नहीं करता
  यहाँ एक बात दिमाग में आई कि LLM code generation करते समय क्या इस tag का वास्तव में उपयोग करते हैं, या फिर यह उनकी training में लगभग है ही नहीं

  • मुझे भी चिंता है कि AI spec documents नहीं पढ़ता
    अगर कोई नया W3C spec आए और ज़्यादातर लोग सिर्फ़ "vibe coding" करें तो?
    अगर AI नए specs reflect करने के बजाय पुराने code patterns ही दोहराता रहा, तो spec updates का फैलाव शायद आज से भी ज़्यादा मुश्किल हो जाएगा

  • मैंने Claude द्वारा code generate करवाते समय पहली बार <output> tag देखा

  • LLM standard documents सीधे नहीं पढ़ते, बल्कि मौजूदा projects से मिले विशाल data के statistical patterns के आधार पर code generate करते हैं
    अगर असली code में यह tag लगभग इस्तेमाल ही नहीं होता, तो LLM के output में भी यह लगभग नहीं आएगा

• 7 अक्टूबर 2025 अपडेट: कुछ screen readers अभी भी <output> tag के updates को पहचान नहीं पाते, इसलिए फिलहाल role attribute को explicitly इस्तेमाल करना बेहतर हो सकता है: <output role="status">
  सवाल यह है कि 17 साल पुराने tag के support के बेहतर होने का बस इंतज़ार ही करना पड़ेगा क्या

  • Windows environment में NVDA repository में issue डालो तो वे काफ़ी अच्छी तरह handle करते हैं
    https://github.com/nvaccess/nvda

  • 17 साल पुराने standard के बावजूद अगर screen readers इस tag को ignore कर रहे हैं, तो इसे सुधारने के लिए effort चाहिए
    मेरी नज़र में यह साफ़ तौर पर screen reader side की समस्या है

• मैंने frontend web accessibility पर कई courses किए हैं, लेकिन <output> tag को कभी नहीं देखा
  यह अच्छी जानकारी साझा करने के लिए धन्यवाद

• <output> में भी <label> की तरह for="" attribute होता है, तो सोचता हूँ कि screen reader users के लिए इसका कोई अर्थपूर्ण असर होगा या नहीं
  मौजूदा web पर यह लगभग इस्तेमाल नहीं होता, इसलिए संभव है कि screen reader users भी इससे परिचित न हों, लेकिन अंततः यह software UX पर निर्भर करेगा

  • मैं खुद screen reader इस्तेमाल नहीं करता, लेकिन testing के लिए काफ़ी काम किया है
    यह assistive technology में ठीक से expose होगा या नहीं, इस पर संदेह है
    मैं अभी computer के सामने नहीं हूँ, इसलिए तुरंत test नहीं कर सकता
    निजी तौर पर मुझे लगता है कि output value को साफ़ label करना कहीं बेहतर है
    उदाहरण के लिए: <label for="output">Total</label> <output id="output">£123.45</output> इस तरह screen reader इसे "Total, £123.45" की तरह पढ़ेगा, जिससे context समझना आसान होगा

• मेरे हिसाब से semantic HTML बस beginners के लिए एक trap है
  ज़्यादा सोचने के बजाय aria-live जैसे वास्तव में काम करने वाले solution इस्तेमाल करने चाहिए
  ऐसे elements से खेलना मज़ेदार हो सकता है, लेकिन developer होने के नाते हमारी ज़िम्मेदारी है कि users के लिए सचमुच काम करने वाली structure बनाएं
  कम इस्तेमाल होने वाले semantic tags की बजाय वही इस्तेमाल करना सही है जिसकी browser और मौजूदा ecosystem को उम्मीद होती है

  • HTML सिर्फ़ browsers के लिए नहीं है
    EPUB पर बहुत काम करने के अनुभव से कहूँ तो semantic page structure overall काफ़ी आसान और बेहतर बनाती है

• मुझे पता चला कि <output> web page accessibility, खासकर screen reader support, के लिए बना tag है
  "ARIA" का मतलब Accessible Rich Internet Applications है, जो accessibility बढ़ाने वाले HTML attributes का एक समूह है

  • यह कुछ वैसा है जैसे React के नीचे JavaScript क्या है, यह समझाना
    accessibility की basics न जानना शर्म की बात नहीं है, लेकिन इसका मतलब यह भी नहीं कि पाठक को न जानने पर अजीब तरह से react किया जाए

  • MDN में इससे जुड़ा documentation अच्छी तरह व्यवस्थित है
    (article के author भी इसी guideline पर ज़ोर देते हैं)
    "ARIA इस्तेमाल करने का पहला नियम यह है कि अगर कोई native HTML element या attribute पहले से मौजूद है जो आपकी ज़रूरत के semantics और behavior दे सकता है, तो उसे दोबारा purpose देने के लिए ARIA role, state या property जोड़ने के बजाय सीधे वही native element/attribute इस्तेमाल करें"
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

  • समझाने के लिए धन्यवाद
    सच कहूँ तो मैं खुद भी Google कर सकता था, लेकिन धुंधली-सी शनिवार दोपहर में आपका comment पढ़ लेना ज़्यादा आसान लगा
    एक बार फिर धन्यवाद

• सिर्फ़ article का title देखकर मुझे लगा था कि <output> का गलत इस्तेमाल हुआ होगा, लेकिन पढ़ने के बाद मैं सचमुच हैरान रह गया
  (खासकर ऊपर वाली dodgy GenAI calculator image देखकर मैंने इससे भी बड़ी विफलता की उम्मीद की थी, लेकिन अंत में content इतना अच्छा निकला कि सब पढ़ने के बाद ही मुझे वह image फिर याद आई)

  • वह dodgy GenAI calculator image बहुत मज़ेदार है
    उसमें addition, multiplication और division है, लेकिन subtraction नहीं

  • उस dodgy GenAI calculator image की बात करें तो
    लगता है AI आने से पहले इंसानों द्वारा बनाई गई और भी ज़्यादा खराब images को हम भूलते जा रहे हैं
    AI की वजह से अब कम से कम इतनी image तुरंत बन जाती है कि शर्मिंदा न होना पड़े
    इस मामले में (subjectively) मुझे लगता है कि उसमें vintage retro IT feel अच्छी तरह उभरकर आई है, इसलिए उसका अपना महत्व है
    मुझे नहीं लगता कि हर AI use किसी professional artist के काम की जगह लेता है

• ऐसी चीज़ें देखना मुझे हमेशा अच्छा लगता है
  एक और टिप यह है कि अगर form names को backend data structure के हिसाब से रखा जाए, तो JS से values लेकर data दोबारा assemble करने की ज़रूरत कम हो जाती है
  उदाहरण के लिए इस तरह: <input name=“entity[id]”> <input name=“entity[relation]”> इस तरह JS में अलग से झंझट करके data बनाने के बजाय सिर्फ़ form submit करते ही मनचाहा data मिल जाता है