सभी HTML elements वाला ब्लॉग पोस्ट

 (patrickweaver.net)
5 पॉइंट द्वारा GN⁺ 2023-08-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • web accessibility पढ़ रहे Patrick Weaver ने अपनी Eleventy-आधारित personal site पर 100 से ज़्यादा HTML tags को असली pages में लागू करते हुए semantic HTML के साथ प्रयोग किया
  • शुरुआती लक्ष्य यह था कि आगे posts लिखते समय अनजान elements की CSS वजह से काम अटके नहीं, लेकिन इस एक post को पूरा करने में डेढ़ साल लग गया
  • MDN Web Docs की HTML elements सूची के आधार पर , , , , , जैसे structural elements की दोबारा समीक्षा की
  • , , , , , जैसे कम परिचित elements दिशा, pronunciation notation, program output, line break, interaction, web components जैसे specific use cases दिखाते हैं
  • browser support, static site generation, Safari video playback, deprecated tag behavior जैसी चीज़ों में HTML के अर्थ और वास्तविक implementation के बीच compatibility के निशान बचे हुए हैं

प्रयोग की शुरुआत और लक्ष्य

  • web accessibility के बारे में और सीखने के बाद, कम इस्तेमाल होने वाले HTML elements को देखना और उन्हें अपनी personal site में शामिल करना शुरू किया
  • site Eleventy से बनाई गई थी, blog post body को से wrap किया गया और layout template में जोड़ा गया
  • image captions के लिए और की styling पहले ही ठीक कर ली थी, और Recurse से जुड़े footnote या sidenote implementation में भी रुचि हुई
  • MDN Web Docs की HTML elements सूची के आधार पर सभी elements को एक ही post में इस्तेमाल करने का फैसला किया
    • लक्ष्य यह था कि आगे posts लिखते समय पहले इस्तेमाल न किए गए elements की वजह से CSS updates में देरी न हो
    • असल में इस एक post के लिए styles और templates ठीक करने में डेढ़ साल लग गया
  • `` जैसे elements को सीधे article body में रखना मुश्किल है, लेकिन patrickweaver.net पर देखने पर page में कहीं न कहीं हर element इस्तेमाल हो, ऐसी संरचना बनाई

document structure और metadata elements

  • `` में अलग बदलाव की ज़रूरत नहीं थी, लेकिन यह पता चला कि lang="en" जैसे lang attribute हमेशा याद नहीं रहते
  • `` इस post को लिखने से पहले परिचित नहीं था, और बाद में इसे relative links के साथ layout template में जोड़ा
    • local development और relative links में कुछ समस्याएं आईं, लेकिन आसानी से हल हो गईं
    • , , , , `` पहले से परिचित और site पर मौजूद elements थे
  • `` document पढ़ते हुए onbeforeprint, onblur जैसे attributes मिले
    • onbeforeprint एक ऐसी functionality से जुड़ा था जिसे पहले अधिक घुमावदार तरीके से handle किया गया था
    • onblur का मुख्य उपयोग परेशान करने वाले popups जैसा लगा

content sections और heading hierarchy

  • `` को केवल postal address के लिए समझा था, लेकिन पता चला कि इसे email address और links के लिए भी इस्तेमाल किया जा सकता है
  • blog post template में पहले से `` लागू था, और documentation पढ़ने के बाद सोचा कि क्या यह site के सभी pages पर भी fit हो सकता है
  • footnote area में `` का इस्तेमाल किया
    • `` document की मुख्य सामग्री से अप्रत्यक्ष रूप से जुड़े हिस्से को दर्शाता है
    • भविष्य में इसे sidenote की तरह style करने की संभावना रखी
  • site design में मूल रूप से `` नहीं था, लेकिन इस post में जोड़ा
  • केवल page के top पर इस्तेमाल हो रहा था, लेकिन यह पुष्टि करने के बाद कि कई इस्तेमाल किए जा सकते हैं, इसे हर blog post के header area में भी लागू किया
  • heading hierarchy भी साथ में व्यवस्थित की
    • पहले site name को , section name को , और post title को `` के रूप में इस्तेमाल किया जाता था
    • documentation और W3C tips पढ़ने के बाद, page के अनुसार `` का target बदलने और styling को classes से संभालने का तरीका अपनाया
    • इसे HTML और CSS की concerns separation के ज़्यादा अनुकूल माना
  • 2022 की शुरुआत में प्रयोग शुरू करने के बाद और 2023 की गर्मियों में publish करने से पहले और MDN documentation में जुड़ गए
    • section title और subtitle को group करने के लिए इस्तेमाल हुआ
    • `` search results नहीं, बल्कि search input को दर्शाने वाला semantic element है
    • static generated site होने के कारण server search results generation नहीं है, इसलिए example में JavaScript की ज़रूरत है
    • 2023 तक MDN header search या google.com पर भी `` नहीं दिखा
  • उन शुरुआती curiosities में से एक था जिसने यह exploration शुरू कराया, और MDN list पढ़ने के बाद top menu में जोड़ा
  • `` को भी post में शामिल किया, लेकिन Markdown और HTML मिलाकर लिखते समय visual nesting को स्पष्ट बनाए रखना मुश्किल था, इसलिए इसे कहीं और अक्सर इस्तेमाल किया जाएगा या नहीं, यह अनिश्चित है

text content elements से मिले observations

  • `` पहले tweet embed में इस्तेमाल किया था, लेकिन इस post में independent quotation style जोड़ा
    • documentation को ध्यान से देखने से पहले के `cite` attribute और element के बारे में नहीं पता था
  • , , बाद में पता चले elements हैं, और तथा की तुलना में का अपेक्षाकृत कम जाना जाना अजीब लगा
    • और में default margin होता है, लेकिन में पर margin होता है
  • `` की overuse के कारण modern web में खराब प्रतिष्ठा है, लेकिन इस site पर शुरू में इसका इस्तेमाल कम था
    • साथ में style किए जाने वाले elements बढ़ने पर यह लगभग 20 तक बढ़ गया
    • यह दिखाता है कि ऐसी site पर जहां सामान्य “section” ज़्यादा नहीं हैं, बहुत सारे `` अनावश्यक हो सकते हैं
  • और Medium से posts migrate करते समय image captions को semantically व्यक्त करने के लिए जोड़े गए शुरुआती elements थे
    • documentation के अनुसार `` केवल images ही नहीं, illustrations, diagrams और code snippets के लिए भी इस्तेमाल हो सकता है
    • माना गया कि मौजूदा code blocks में भी कई जगह `` इस्तेमाल किया जा सकता है
  • `` को visual horizontal line नहीं बल्कि semantic separation के रूप में define किया गया देखकर style फिर से देखा
    • hr:after में emoji डाला था, लेकिन screen readers में यह कैसे काम करता है, यह जांचना ज़रूरी है
  • पहली बार देखा गया element था, और यह आश्चर्यजनक लगा कि browser इसे लगभग की तरह treat करता है, फिर भी यह HTML5 तक बचा रहा
  • `` documentation में अपेक्षा से कम guidance थी, और यह सवाल बचा कि जो text लंबा article नहीं है, क्या वह “वास्तव में paragraph” है
  • `` को केवल code block के लिए सोचा था, लेकिन पता चला कि इसे meaningful whitespace दिखाने के लिए भी इस्तेमाल किया जा सकता है

inline text semantic elements

  • [link](#) को placeholder की तरह इस्तेमाल किया जाता था, लेकिन वास्तव में यह page के सबसे ऊपर जाने वाला link था
  • `` को MDN documentation ने “author की सुविधा के लिए” बताया, इसलिए यह सबसे कम इस्तेमाल होने वाला tag लग रहा था
  • और के बीच अंतर HTML5 में द्वारा को replace करने की पुरानी समझ से अलग था
    • practical rule के रूप में आम तौर पर को word level पर और को sentence या phrase level पर इस्तेमाल करने का फैसला किया
    • यह वास्तविक distinction को सरल बनाने वाला rule of thumb है
  • `` ऐसा element है जो आसपास के text से अलग direction वाले text को handle करता है
    • example name है, लेकिन इसे arbitrary user input Unicode text पर भी लागू माना गया
    • आगे arbitrary input शामिल कर सकने वाले tags को `` से wrap करने की कोशिश होगी
  • `` RTL languages से अक्सर काम न होने के कारण कम इस्तेमाल होगा, लेकिन थोड़े से RTL text को handle करना जानना उपयोगी है
  • का एक दौर था जब इसका `` की तरह misuse होता था, लेकिन CSS के मजबूत होने से अब ऐसा कम होने की संभावना है
    • documentation का example कविता है, इसलिए paragraph और independent line के बीच की boundary कैसे सोची गई, इसे लेकर जिज्ञासा हुई
    • कुछ मामलों में `` ज़्यादा उपयुक्त हो सकता है
  • और कई languages में visible punctuation से पहले ही व्यक्त अर्थ को HTML semantic elements से फिर दिखाते हैं
    • की default style italic है और text में न मौजूद quotes जोड़ता है
  • पूरे article में बहुत इस्तेमाल हुआ, और जिज्ञासा थी कि क्या Google Docs का Markdown support इस्तेमाल करता है, लेकिन document HTML देखने पर Google Docs अभी `` के रूप में render करता है
  • `` का MDN example product name में product ID को value के रूप में जोड़ता है, इसलिए असली use case सोचना मुश्किल था
    • अगर ID user को दिखनी चाहिए तो उसे display करना बेहतर है, और अगर user को नहीं दिखनी चाहिए तो यह data किसके लिए है, अस्पष्ट है
    • पुष्टि हुई कि `` W3C HTML5 specification में दिखाई नहीं देता
  • `` definition खुद नहीं, बल्कि definition के अंदर term को wrap करने वाला element है, इसलिए नाम अजीब लगा
    • निष्कर्ष निकाला कि यह केवल officially adopted न हुए HTML 2.0 proposal में शामिल लगता है
  • और भी और की तरह usage criteria पर सोचने को मजबूर करते हैं
    • practical rule के रूप में आम तौर पर को words और को sentences या phrases के लिए इस्तेमाल करने का फैसला किया
    • documentation examples में `` को अक्सर confusion की संभावना वाले expression पर ध्यान खींचने के लिए इस्तेमाल किया गया
  • `` keyboard keys specify करने के लिए है, लेकिन “Right click” जैसी action के लिए यह फिट बैठता है या नहीं, इसकी सीमा पर जिज्ञासा हुई
  • `` ऐसा लगा जैसे bidirectional authoring web का निशान हो, जहां user किताब में highlighter चलाने जैसा काम करता है
  • , , `` East Asian typography में pronunciation, translation और transliteration information देने के लिए इस्तेमाल होते हैं
    • `` source में शामिल parentheses characters को छिपाने के लिए इस्तेमाल होता है
  • `` strikethrough element है जो ऐसे text को दर्शाता है जो पहले सही था लेकिन अब accurate या relevant नहीं है
    • HTML 4.01 में deprecated हुआ था और HTML5 में meaning redefine हुआ
    • कुछ screen readers strikethrough की सूचना नहीं देते, जिससे confusion हो सकती है, इसलिए MDN की recommended CSS site में जोड़ी
  • program output दिखाने के लिए है, और Raspberry Pi post में पहले से handle किए गए हिस्से को `` से update किया
  • `` small text rendering के लिए इस्तेमाल होता है, लेकिन ज्यादातर मामलों में CSS का ही इस्तेमाल जारी रहेगा
  • documentation देखते हुए पहली बार सोचा कि या `` जैसी contradictory styling को क्यों allow किया जाता है
  • और के लिए पहले CSS implementation इस्तेमाल किया हो सकता था, लेकिन इन्हें footnote और formula examples में लागू किया
  • `` semantic HTML के लिए useful लगा, इसलिए इसे blog post dates पर लागू किया
    • observation था कि Google search results में भी `` इस्तेमाल नहीं होता लगता
  • `` ऐसा element है जिसके लिए MDN बहुत strongly कहता है कि “अधिकांश मामलों में आप वास्तव में इसे इस्तेमाल नहीं करना चाहेंगे”; spelling errors दिखाना इसका मुख्य recommended use लगता है
  • mathematical या programming variable string को semantically दिखाता है, और Pythagorean theorem example में के साथ इस्तेमाल किया
  • `` long words, खासकर URLs को किसी specific point पर line break कराने की समस्या हल करता है
    • लंबे URL में break point डालने से अलग-अलग screen widths पर line breaks ज़्यादा readable हो जाते हैं
    • URL में hyphen character शामिल करने से भी modern browsers में clear break point बनता है
    • बिना line break वाले URL को layout टूटने से बचाने के लिए अलग scrollable `` में wrap किया

images, multimedia, embeds

  • और ऐसे elements थे जिनसे image map वाली websites पहले बनाने के बावजूद परिचय नहीं था
    • आजकल इनके कम इस्तेमाल को दिखाते हुए `` boundary debugging tool इस्तेमाल करना मुश्किल था
    • tab focus के दौरान एक बार में केवल एक `` boundary दिखी, और styling काम नहीं कर रही थी
    • को shape वाले जैसा माना
  • `` HTML5 का representative multimedia tag है, इसलिए पहले इस्तेमाल किया था, लेकिन 2020s में यह अपेक्षा से कम दिखता है, यह आश्चर्यजनक था
    • Bandcamp player का UI custom , , combination है, लेकिन hidden इस्तेमाल करता है
  • `` में srcset attribute को नए सिरे से देखा
    • screen width के अनुसार तीन अलग images देने वाला demo बनाया
    • browser cache और scaled display behavior को प्रभावित करते हैं, इसलिए effect देखने के लिए private window और non-scaled या non-retina display की ज़रूरत हो सकती है
  • और `` से कम व्यापक रूप से इस्तेमाल होते हैं, और online video ज्यादातर YouTube पर centralized लगती है
    • audio podcasts की तरह individual files देने के तरीके में ज़्यादा distributed है
  • `` में कुछ constraints थीं
    • self-closing tag बनाने पर render नहीं हुआ
    • लिखने के समय Safari संभवतः video support नहीं कर रहा था क्योंकि development server “Range” request header support नहीं करता था
    • GitHub Pages पर hosted version में Safari playback काम करेगा या नहीं, इसे लेकर जिज्ञासा हुई
    • `` issue की वजह Eleventy build में .vtt file को ठीक से setup न करना था
  • और के कई uses और जैसे specific tags से replace हो चुके हैं, फिर भी उनका deprecated न होना आश्चर्यजनक था
  • में “inline frame” जैसा 90s-style नाम बचा हुआ है, और HTML5 में deprecated हो गया
    • यह भी पुष्टि हुई कि यह display: inline के रूप में render होता है
  • और अलग-अलग situations में image version बदलने के लिए intended elements हैं
    • mouse/trackpad पर computer icon, touchscreen पर phone icon, और कोई भी न हो तो fallback image दिखाने वाला example बनाया
  • `` iPad-style link preview और SPA जैसे performance benefits से जुड़ा experimental element लगा
    • 2023 तक किसी भी browser में default रूप से enabled नहीं है
    • लगता है पहले Chrome experimental flag था, लेकिन 2023 में chrome://flags में available नहीं था
    • HTML 5 Spec में यह नहीं लगता, और MDN documentation में यह क्यों शामिल था, यह अनिश्चित है

SVG, MathML, scripting

  • MDN documentation द्वारा और को साथ group करना दिलचस्प लगा
    • `` Figma और Sketch जैसे tools की वजह से आसानी से prototype और export किया जा सकता है, इसलिए व्यापक रूप से इस्तेमाल होता है
    • `` ज़्यादा rare element लगता है
  • `` को सीधे circle draw करने वाले example में इस्तेमाल किया
  • `` को MathML namespace के non-HTML elements को wrap करने वाले wrapper जैसा माना, और केवल simple expression डाला
  • `` पर 2020 में Recurse Center में sharp lines draw करने की समस्या को गहराई से देखा था
    • MDN documentation से browser-specific `` maximum size होने की बात नई पता चली
    • modern browsers में हर dimension लगभग 32,000 pixels के स्तर पर है
    • , , से fake को फिर implement किया
  • `` को outdated लगने वाला element होने की उम्मीद नहीं थी, लेकिन post लिखते हुए एहसास हुआ कि इसे वास्तव में सीधे कम ही इस्तेमाल करते हैं
    • ज़्यादातर JavaScript build tool द्वारा एक `` tag में bundled होकर डाली जाती है
    • इसलिए `` markup tag की बजाय boilerplate जैसा लगता है
  • `` interactive websites में पर्याप्त रूप से न डाला गया element लगा
    • खासकर minified/compiled SPA में `` न हो तो users खाली page देख सकते हैं
    • इस post में हर tag के साथ डाला

edit marks, tables, forms, interaction

  • और ऐसे elements थे जिन्हें MDN documentation देखते हुए पहली बार जाना, और वे word processor में इस्तेमाल होने वाले elements जैसे लगे
    • Google Docs rendering भी याद आई, लेकिन फिर पुष्टि हुई कि यह `` के रूप में render होता है
  • `` शुरुआती web में layout के लिए overuse हुआ था, लेकिन data के बढ़े हुए modern web में उल्टा कम इस्तेमाल होना ironic लगा
    • कारणों में rough default design और database tables में stored data को web UI में अलग perspective से दिखाने का उद्देश्य बताया
    • article खुद document-based है, इसलिए असली table data नहीं है, लेकिन 2023 Apple emoji set पर आधारित हो सकने वाला emoji data example table के रूप में डाला
    • और पहले नहीं पता थे, और custom non-`` design की तुलना में इन्हें ज़्यादा इस्तेमाल करने के मौके होंगे या नहीं, यह पता नहीं
  • `` और संबंधित elements आमतौर पर submit पर नए page पर जाने वाले cases में इस्तेमाल किए थे, लेकिन page के अंदर user interaction के लिए भी valid हैं
    • accessibility के लिहाज से form elements संभवतः सबसे महत्वपूर्ण हैं, इसलिए आगे implementation में documentation देखने का इरादा है
  • और “JavaScript के बिना भी किया जा सकता है” वाले examples के रूप में आम हैं
    • ऐसा expand/collapse UI पहले JavaScript या jQuery से बनाया गया feature था, और कुछ HTML tags से आसान हो गया, यह दिलचस्प है
    • अनुमान लगाया कि अगर इसे आज HTML spec में propose किया जाता तो शायद CSS pseudo-effect से replace होकर वापस ले लिया जाता
  • `` ऐसा element था जिसके HTML-only existence के बारे में पता नहीं था
    • style effect से ज़्यादा useful होने के लिए JavaScript चाहिए
    • alert() से ज़्यादा custom interaction बनाते हुए भी CSS से style किया जा सकने वाला simple तरीका है

web components और deprecated elements

  • web components लंबे समय से और सीखने वाली सूची में थे, और MDN का संबंधित section पढ़ना अच्छा लगा
  • web component rendering के लिए JavaScript और Class syntax की ज़रूरत होना आश्चर्यजनक था
    • Shadow DOM और पढ़ने के बाद समझ आया, क्योंकि HTML में style encapsulation का built-in तरीका नहीं है
    • conceptually यह कुछ हद तक `` जैसा लगा
  • और का इस्तेमाल कर post की table of contents बनाने के लिए web component इस्तेमाल किया
    • frontend framework components की तरह child template element के properties के रूप में इस्तेमाल होने वाली property pass करने का तरीका जल्दी नहीं मिला
    • हर child को पूरा `` element pass करके `
  • के अंदर सहीhref` set किया
  • deprecated HTML elements भी post के अंत में शामिल किए
    • , , , , `` layout-related functionality के CSS में move होने के examples हैं
    • और web components spec का हिस्सा थे, लेकिन पूरी तरह implement नहीं हुए, इसलिए असल में implement नहीं कर पाए
    • directory listing के लिए web server-style जैसा लगा, और Eleventy static site के directory list example में इस्तेमाल किया
  • और को की जगह इस्तेमाल होने के लिए design किया गया था, इसलिए इन्हें general body में सीधे डालना मुश्किल था, और केवल के अंदर इस्तेमाल किया
  • `` के बारे में MDN की यह explanation कि यह official specification का हिस्सा नहीं था, देखकर लगा कि यह काम नहीं करेगा, लेकिन 2023 में कुछ browsers में यह काम करता दिखा
    • इसे `` के साथ confusion की संभावना के लिए fallback माना
  • `` Firefox 8~84 में partially supported बताया गया, लेकिन locally installed पुराने version में भी example चलाया नहीं जा सका
  • जैसे fallback के करीब है, फिर भी deprecated हो गया, जबकि `` spec में बचा है, यह आश्चर्यजनक था
  • के लिए यह अस्पष्ट लगा कि attribute के बजाय यह अलग element क्यों था
    • post शुरू करते समय यह MDN के “Embedding Content” section में था, लेकिन खत्म करते समय deprecated हो गया
  • `` deprecated elements में वास्तव में काम करता है, यह ध्यान खींचता है
    • सीधे इस्तेमाल करने पर उसके बाद का page source code के रूप में render होता है, इसलिए इसे `` से wrap किया
  • और में closing tag था, इसलिए इन्हें source code या teletype-style monospace text display के लिए body में इस्तेमाल किया जा सकता था
  • और East Asian characters की pronunciation display के लिए थे, लेकिन लगा कि spec simplified हो गया है
  • MDN list में न मौजूद `` को भी दूसरी HTML tag lists देखते हुए जोड़ा
  • 2013 की पुरानी MDN list में , , , जैसे elements थे
    • `` को accessibility reasons से अब ज्यादातर browsers ignore करते हैं
    • `` modern browsers में काम नहीं करता और CSS से handle करने वाली functionality है
    • `` ज़्यादा multimedia web document vision का संकेत देता है
    • `` JavaScript के बिना वाली दुनिया से आया element लगता है
  • `` का भी उल्लेख है, लेकिन try नहीं किया
  • footnote के लिए native HTML implementation नहीं है, यह बात बाद में पता चली

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-08-14
Hacker News की रायें

  • लगता है लेखक frames को याद करने के लिए बहुत छोटा है :) मैं सिर्फ़ Wikipedia लेख (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)) लिंक करना चाहता था, लेकिन उसकी व्याख्या खास अच्छी नहीं है शुरुआती वेब के लोकप्रिय होने के समय frames मेनू, sidebar, हमेशा दिखने वाले header वगैरह के लिए आम तौर पर इस्तेमाल होते थे; अक्सर ऊपर fixed header, बाईं ओर sidebar और बीच में content frame वाला layout होता था हर frame काफ़ी स्वतंत्र रूप से काम करता था, जैसे उसका अपना back/forward history होता था, और links default रूप से सिर्फ़ उसी frame को बदल देते थे. इसलिए back, forward और refresh सहज नहीं लगते थे, और अगर गलत content किसी frame में load हो जाए तो शुरुआत से फिर से जाना छोड़कर उसे ठीक करना मुश्किल था अच्छा हुआ कि CSS ने frames के ज़्यादातर मुख्य use cases की जगह ले ली; user के नज़रिए से frames सचमुच संभालने में तकलीफ़देह थे

    • frames का एक यादगार उपयोग दूसरे sites के index sites में था. बाईं sidebar में कई links होते थे और दाईं frame में वह site खुलती थी Browser tabs न होने के दौर में यह काफ़ी अच्छा use case था; history में आगे-पीछे जाने या कई windows manage करने के बजाय एक ही window के frame में links की सूची देखना बेहतर था
    • CSS के राजा Eric Meyer भी अपने पुराने CSS reference document को अभी तक frame page के रूप में बनाए हुए हैं: https://meyerweb.com/eric/css/references/css1ref.html
    • 90 के दशक में GeoCities पर बनाई मेरी पहली website ने भी frameset इस्तेमाल किया था, और layout ठीक वैसा ही था जैसा ऊपर बताया गया
    • https://tintara.tripod.com/FramesSuck.html
    • और अब सिर्फ़ deprecated नहीं हैं, बल्कि बहुत पहले से obsolete elements हैं: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • भले ही इस पर थोड़ी बात हुई है, यह अब भी बेतुका लगता है कि स्क्रीन पर छिपाते हुए screen reader के लिए छोड़ देने वाली कोई सरल standard CSS declaration अभी तक नहीं है अब तक मैंने जो देखा है वह अभी भी clip इस्तेमाल करना, content को page के बाहर ले जाना, या ऐसी ही tricks हैं. समझ नहीं आता कि यह display का कोई वैकल्पिक value या extra property क्यों नहीं है इसे हल कर सकने वाली speak property किसी theoretical CSS module में तो घूमती रही है, लेकिन मेरी जानकारी में implementations ने इसे लगभग अपनाया नहीं है

    • उस मकसद के लिए ARIA attributes इस्तेमाल किए जा सकते हैं https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... Example code: https://stackoverflow.com/questions/26032089/in-html-how-can...
    • मुझे लगता है कि यह visual presentation संभालने वाले CSS में नहीं, बल्कि data·structure·meaning संभालने वाले HTML में होना चाहिए सोचता हूँ कि सही aria-label लगा हुआ whitespace character भी शायद कुछ ऐसा ही कर पाए

  • लेखक जिस element को लेकर उलझन में था, उसकी बात करें तो **HTML 5.2** को 2021 में W3C ने बंद कर दिया और WhatWG HTML Living Standard ने उसकी जगह ले ली WhatWG standard ने HTML 5.2 के उलट को obsolete नहीं किया, और उसे “ऐसे li elements की unordered list के रूप में tool bar जो user द्वारा किए या activate किए जा सकने वाले commands को दिखाता है” के तौर पर फिर से define किया Wikipedia की elements list और HTML version information शायद इस मामले में पुरानी है, और अभी भी ज़िंदा है. हालांकि इसके बार-बार deprecated होने के इतिहास और हाल के browsers के भी सही semantics देने में भ्रमित रहने को देखते हुए, लगभग हमेशा सही ARIA role (`toolbar`, `menu`, `menubar`) के साथ इस्तेमाल करना बेहतर है

  • इनमें से ज़्यादातर elements व्यापक रूप से इसलिए इस्तेमाल नहीं होते क्योंकि वे ऐसे पुराने प्रयास थे जो अब मौजूद न रहने वाली समस्याएँ हल करना चाहते थे, या लेखक के मानने की तरह उन्हें CSS से बेहतर हल किया जा सकता था, या वे browser implementation पर बहुत निर्भर थे उदाहरण के लिए जब और सभी हमेशा-updated browsers में आ गए तो उम्मीद थी, लेकिन content को अचानक खोलने के बजाय user को guide करते हुए slide करके खोलना हो तो JavaScript चाहिए था. मैंने जो सबसे अच्छा implementation देखा उसने WAAPI इस्तेमाल किया था, और Safari ने तो अपना proprietary pseudo-element भी जोड़ दिया

    • JavaScript के बिना भी slide animation संभव तो है, लेकिन बंद होते समय खास सुंदर नहीं दिखता और खुलते समय ठीक लगता है: https://codepen.io/dada1smo/pen/LYydWBg यह मेरा code नहीं है; css-tricks link के comments में मिला था
    • पहले formatting tag था, लेकिन HTML5 में यह **fine print** tag बन गया.[1] जैसे pure formatting tags बहुत पहले deprecated होकर गायब हो चुके हैं [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

  • / tags nested हो सकते हैं. एक बार मैंने इससे choose-your-own-adventure game बनाकर company intranet पर डाल दिया था टुकड़ों को जोड़ने वाला एक generation script था और असली text बस कुछ pages का था, लेकिन HTML 5MB हो गया. उस दिन बहुत सारे browsers खराब कर दिए और अंत में इसे delete करना पड़ा

    • दिलचस्प है, पर ठीक से समझ नहीं आया. details/summary nesting कैसे 5MB HTML तक पहुँची, और उसने कैसे कई browsers को तोड़ दिया—इस बारे में और सुनना चाहूँगा

  • याद आता है जब मैंने करीब 1995 में पहली बार HTML सीखा था. क्या किसी को Kevin Werbach की Barebones Guide to HTML याद है? वह असल में सभी HTML tags और उनकी भूमिका सूचीबद्ध करने वाली site थी. वह resource, एक text editor और शुरुआती version का Netscape Navigator हो तो सीखना और experiment करना तुरंत शुरू किया जा सकता था

  • कुछ दिन पहले web browsing AI agent बनाने की कोशिश करते हुए Hacker News comments को table के अंदर table के अंदर table के रूप में implemented देखकर झटका लगा

    • यह जानकर मुझे उल्टा खुशी हुई. HN को और readable बनाने के लिए मैंने userContent.css बनाया, body width limit की, line-height को 1.5em रखा और हर paragraph में extra top margin दिया अब wide browser में एक line में 250 characters दिखाने वाले HN को मेहनत से नहीं पढ़ना पड़ता. हर paragraph पढ़ने में आसान हो गया है और paragraph separation भी line spacing से ज़्यादा साफ़ दिखता है

  • Semantic HTML में बहुत संभावना है. निजी तौर पर मुझे body footnotes को right margin में छोटे या translucent font में रखना, और ज़रूरत हो तो / expanding elements लगाना पसंद है लेकिन ऐसी style को सच में implement करने के लिए हर बार CSS की काफ़ी detail जाननी पड़ती है, तभी यह ठीक से चलती लगती है

  • सबसे पहले, यह वाकई सीखने का शानदार तरीका और अच्छी practice है लेखक को पुराने और अब इस्तेमाल न होने वाले elements को देखकर उनका उपयोग अनुमान लगाते देखना भी मजेदार है—वे elements जो कभी अचानक इस्तेमाल किए जा सकने लगे थे और तब रोमांचक लगे थे हालांकि Mosaic के बाद से HTML के हर version को हाथ से लिखते आए व्यक्ति के तौर पर, मुझे MDN का description list की तरह पीछे से नाम बदलना पसंद नहीं है। मूल spec का definition list मुझे बेहतर लगता है मेरे लिए dl, dt, dd को “definition list”, “defined term”, “definition” के रूप में सोचना ज्यादा स्वाभाविक है। description, definition से व्यापक शब्द जरूर है, लेकिन definition list मानने पर यह याद रखना आसान होता है कि dl में term (dt) और definition (dd) होते हैं W3 भी इसे definition list कहता है: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • क्या आपने असली दुनिया में `` तक पहुंचने वाले cases देखे हैं?

    • हां। मेरी पहली tech job एक hyperlocal marketing agency में थी, और ज्यादातर समय छोटे local दुकानों के restaurant menus और sales information update करने में जाता था Restaurant menus की hierarchy कभी-कभी बेतहाशा गहरी हो जाती थी, क्योंकि कई restaurants ने बहुत ज्यादा menu items बना रखे थे। Mozzarella sticks और arancini को सही से दिखाने के लिए कभी-कभी Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy जैसी hierarchy चाहिए होती है
    • हां। specs या दूसरे technical documents में यह मिलता है। उदाहरण के लिए HTML spec[1] खुद ऐसा है [1]: https://html.spec.whatwg.org/#link-type-next
    • यह परेशान करने वाली चीजों में से एक है। समझ नहीं आता कि इसे 1~6 तक ही क्यों सीमित किया गया है, और arbitrary size specify करने वाली attribute क्यों allow नहीं की गई
    • एक पूर्व professor और boss की लिखी विशाल book का web version बनाया था; उसमें निश्चित रूप से heading के 6 levels इस्तेमाल हुए थे, और शायद उससे भी ज्यादा की जरूरत थी