HTML yra pamatinis žmonijos skaitmeninės civilizacijos akmuo, tačiau tuo pat metu – labiausiai klaidingai suprantama, iškraipoma ir apgaulingai paprasta kalba kompiuterių mokslo istorijoje. Epochoje, kai modernus programuotojas į projektą be dvejonių atsiunčia 450 megabaitų išorinių bibliotekų, sukonfigūruoja keliasdešimt rekursinių kompiliavimo paketų ir stato sudėtingas reaktyvumo abstrakcijas, į naršyklę išspjaunamas dokumentas neretai tėra tragiška beprasmių <div> ir <span> konteinerių pelkė su prikabintais pelės paspaudimų pasiklausytojais.

Teisingo, semantiško ir prieinamo HTML rašymas nėra kosmetinis estetikos reikalas – tai sistemų architektūra. Naršyklės nėra pasyvūs pikselių tinkleliai; tai galingi kompiliavimo varikliai su srautiniais leksiniais analizatoriais, DFA tokenizatoriais, medžio konstravimo algoritmais ir prieinamumo medžio (AOM) sintezatoriais. Kai iš 265 oficialių W3C ir WHATWG elementų pasirenkate tikslinę semantinę žymą, jūs įdarbinate tris dešimtmečius naršyklėse tobulintas aparatinio greitinimo, klaviatūros ergonomikos, ekrano skaitytuvų ir paieškos robotų indeksavimo technologijas.

Semantinio ženklinimo architektūra: nuo Timo Bernerso-Lee iki Gyvojo standarto

1991 metais Ženevoje, Europos branduolinių tyrimų organizacijos (CERN) laboratorijoje, seras Timas Bernersas-Lee išplatino kuklų dokumentą pavadinimu „HTML Tags“. Jį sudarė vos 18 elementų, pasiskolintų iš SGML standarto. Bernerso-Lee vizija buvo grynai inžinerinė: sukurti hipertekstinį formatą, leidžiantį fizikams visame pasaulyje dalintis moksliniais straipsniais nepriklausomai nuo to, kokią operacinę sistemą, vaizdo plokštę ar šriftus naudoja jų darbo stotys.

1995 metais Dave'as Raggettas ir IETF komitetas pristatė ambicingą HTML 3.0 projektą. Raggettas numatė sudėtingas matematinių lygčių sistemas, lentelių struktūras ir teksto apgaubimą aplink objektus. Tačiau prieš spėjant standartizuoti šią viziją, dešimtojo dešimtmečio viduryje prasidėjo aršūs „Netscape Navigator“ ir „Microsoft Internet Explorer“ naršyklių karai. Siekdami pritraukti kūrėjus, gamintojai nusispjovė į semantiką ir ėmė masiškai kurti chaotiškas vizualines žymas: „Netscape“ pasauliui padovanojo epilepsiją keliantį <blink>, o „Microsoft“ atkirto bėgančia eilute <marquee>, fonine muzika <bgsound> bei tuščiomis tarpinėmis <spacer>.

Tūkstantmečių sandūroje W3C konsorciumas pasuko į pražūtingą teorinį akligatvį – XHTML 2.0. Užsidarę akademiniame dramblio kaulo bokšte, komiteto nariai nusprendė, kad žiniatinklis privalo atsisakyti atgalinio suderinamumo ir priverstinai taikyti drakoniškas XML taisykles: viena praleista kabutė ar neuždaryta žyma privalėjo sustabdyti puslapio atvaizdavimą ir parodyti liūdnai pagarsėjusį geltonąjį mirties ekraną („Yellow Screen of Death“). Kadangi tikrasis internetas buvo gyvas, netobulas ir pilnas žmogiškųjų klaidų, komercinis pasaulis atmetė šią teorinę utopiją.

2004 metais „Apple“, „Mozilla“ ir „Opera“ inžinieriai sukilo prieš sustabarėjusį W3C ir įkūrė WHATWG darbo grupę. Jų manifestas buvo pragmatiškas: nustoti kurti teorines taisykles, ištirti, kaip realios naršyklės apdoroja klaidas laukinėje gamtoje, ir paversti HTML nuolat evoliucionuojančiu „Gyvuoju standartu“ (Living Standard). Šiandien WHATWG prižiūri oficialų standartą, apimantį 265 specializuotas žymas: nuo semantinių sekcijų iki SVG vektorinės grafikos, MathML matematinių lygčių ir natyvių interaktyvių valdiklių.

Po gaubtu: kaip naršyklių varikliai apdoroja DOM medį ir skaičiuoja atvaizdavimą

Norint suprasti, kodėl teisingas žymų pasirinkimas yra kritiškai svarbus, būtina pažvelgti į šiuolaikinio atvaizdavimo variklio („Blink“, „WebKit“ ar „Gecko“) vidų, kai per tinklo lizdą atkeliauja HTML baitų srautas:

  • Baitų dekodavimas ir išankstinis skenavimas: Tinklo sluoksnis perduoda neapdorotus baitus teksto dekodatoriui, kuris nustato koduotę pagal HTTP antraštes arba <meta charset="utf-8">. Tuo pat metu lygiagrečiai paleidžiamas „Preload Scanner“, kuris žaibiškai peržvelgia kodą į priekį ir pradeda foninį kritinių skriptų, stilių bei šriftų siuntimąsi.
  • Tokenizatorius ir baigtinių automatų būsenos: Pagrindinis leksinis analizatorius veikia kaip deterministinis baigtinis automatas (DFA). Jis skaito simbolį po simbolio, keisdamas vidines būsenas (žymos atidarymo, žymos pavadinimo, atributų reikšmių) ir generuodamas žetonus: DOCTYPE, pradinės žymos, pabaigos žymos, teksto ir komentarų žetonus.
  • Medžio konstravimas ir klaidų taisymas: Skirtingai nuo XML, HTML5 medžio konstravimo algoritmas naudoja atidarytų elementų steką ir griežtas įterpimo būsenas (pvz., „in body“, „in table“). Aptikęs klaidingai supintą kodą (pvz., <p>Pirmas <div>Antras</div></p>), variklis automatiškai pritaiko garsųjį įsivaikinimo algoritmą (Adoption Agency Algorithm), kuris virtualiai uždaro ir perkoduoja žymas, neleisdamas puslapiui nulūžti.
  • DOM ir CSSOM suliejimas į atvaizdavimo medį (Render Tree): Sukonstruotas gyvas C++ objektų DOM medis apjungiamas su lygiagrečiai sukurta stilių hierarchija (CSSOM). Atmetami nematomi elementai (<head>, <script> ar elementai su display: none) ir suformuojamas galutinis atvaizdavimo medis.
  • Išdėstymas (Reflow), piešimas (Paint) ir kompozicija: Naršyklė apskaičiuoja kiekvieno elemento tikslias geometrines koordinates ekrano taškais (Reflow), rastrizuoja vektorines figūras į GPU sluoksnius (Paint) ir sujungia juos į kadrą (Composite). Netinkamai parinktos žymos, kurios sukelia nenumatytus DOM perskaičiavimus, verčia naršyklę nuolat kartoti brangias išdėstymo operacijas, išeikvodamos įrenginio bateriją ir sukeldamos sąsajos strigimus.

Šiuolaikinio interneto nuodėmės: „Div-Soup“, žymų iškraipymai ir nusikaltimai prieinamumui

Pats destruktyviausias modernaus programavimo įprotis yra „Div-Soup“ – vartotojo sąsajų konstravimas iš aklų <div> ir <span> kalnų. Klasikinis programuotojų nusikaltimas: mygtuko sukūrimas kaip <div class="mygtukas" onclick="pateiktiForma()">Pateikti</div>.

Parašęs tokį pseudomygtuką vietoje tikrojo <button>, programuotojas išmeta į šiukšliadėžę dešimtmečius inžinerinio įdirbio. Įprastas <div> neturi jokios semantikos: jo negalima pasiekti klaviatūros „Tab“ klavišu, jis nereaguoja į „Enter“ ar „Space“ paspaudimus, automatiškai nepateikia formų, nepraneša ekrano skaitytuvui apie išjungtą (disabled) būseną ir yra nematomas balso valdymo sistemoms. Norėdamas ištaisyti savo tingumą, programuotojas privalo rankiniu būdu rašyti dešimtis eilučių JavaScript kodo: kabinti tabindex="0", apdoroti mygtukų kodus 13 ir 32, rankiniu būdu sinchronizuoti aria-disabled ir piešti fokusavimo rėmelius. Tai absurdiškas dviračio išradinėjimas iš naujo, kai standartinis <button> visa tai siūlo nemokamai jau nuo 1995 metų.

Ne mažiau žalinga yra antraščių hierarchijos anarchija. Kai programuotojas pasirenka <h4> tiesiai po <h1> vien todėl, kad jam patiko šrifto dydis, jis sulaužo aklųjų navigacijos sistemą. Ekrano skaitytuvų naudotojai naršo puslapį spausdami greituosius klavišus („H“ arba lygio skaičių), kad išgirstų dokumento planą. Jei lygiai peršokami, struktūros suvokimas sugriūva. Dydžiui valdyti skirtas CSS, o HTML paskirtis – loginė hierarchija.

Be to, paieškos robotai („Googlebot“) naudoja semantinius blokus (<main>, <article>, <nav>, <aside>, <header>, <footer>), kad atskirtų esminį autorinį straipsnį nuo šoninių meniu ar teisinės informacijos. Jei svetainė yra vientisa divų košė, robotai priversti spėlioti, todėl prastėja puslapio reitingavimas ir prarandami išplėstiniai paieškos rezultatai.

W3C prieinamumas, ARIA medis ir Living Standard specifikacijos

Kartu su DOM medžiu naršyklė realiuoju laiku generuoja paralelinę duomenų struktūrą – Prieinamumo medį (Accessibility Tree arba AOM). Operacinės sistemos per vidines sąsajas (pvz., MSAA/UI Automation „Windows“ sistemoje ar NSAccessibility „macOS“) perduoda šiuos duomenis asistuojančioms technologijoms.

Kiekvienas semantinis HTML5 elementas pagal nutylėjimą jau turi įsiūtą W3C ARIA semantiką:

  • <nav> automatiškai suteikia orientyrą role="navigation".
  • <main> žymi pagrindinį puslapio branduolį role="main".
  • <dialog>, iškviestas per showModal(), automatiškai užrakina fokusą modalo viduje, patamsina foną per ::backdrop ir palaiko uždarymą „Escape“ klavišu.
  • <details> ir <summary> sukuria pilnavertį išskleidžiamą bloką su klaviatūros valdymu ir aria-expanded būsena be jokio JavaScript kodo.
  • <progress> ir <meter> pateikia tikslias skaitines reikšmes neįgaliesiems be jokių trečiųjų šalių animacijų.

Pirmoji ARIA taisyklė griežtai teigia: „Jei galite naudoti natyvų HTML elementą ar atributą, turintį reikalingą semantiką ir elgseną, visada naudokite jį, užuot dirbtinai lipdę ARIA roles ant generic žymų.“ ARIA yra pagalbinis korekcinis sluoksnis, o ne pasiteisinimas netvarkingam kodui.

Skaitmeninės kapinės: kodėl Marquee, Blink ir Center Were Put to Rest

HTML5 specifikacija oficialiai paskelbė pasenusiomis ir uždraudė dešimtis archajinių žymų. Šių elementų pašalinimo priežastys atspindi šiuolaikinės programinės įrangos inžinerijos brandą:

  • Atsakomybių atskyrimo principas: Žymos <center>, <font>, <big> ir <strike> sumaišė vizualinį stilių su dokumento struktūra. Kai atsirado CSS „Flexbox“ ir „Grid“, kietai įkoduotas dizainas tapo technine skola, stabdančia prisitaikantį dizainą mažiems ekranams.
  • Aparatinis našumas ir kognityvinė ergonomika: Bėganti eilutė <marquee> nuolat vertė naršyklę perskaičiuoti kadrus pagrindinėje gijoje, eikvodama pirmuosius mobiliuosius procesorius. Svarbiausia – judantis tekstas yra neįveikiama kliūtis regos negalią ar dėmesio sutrikimų turintiems žmonėms.
  • Struktūrinis trapumas: Rėmeliai <frameset> ir <frame> sulaužė pagrindinę interneto valiutą – unikalų URL adresą. Vartotojas galėjo atsidaryti kelis puslapius rėmeliuose, tačiau naršyklės adreso juosta nesikeitė: tapo neįmanoma išsisaugoti nuorodos, grįžti atgal ar indeksuoti turinio.
  • Saugumo spragos: Seni įskiepių elementai, tokie kaip <applet> („Java“ apletai) ar <keygen>, atverdavo tiesiogines spragas vartotojų kompiuteriuose. Juos pakeitė izoliuotas <iframe sandbox>, „WebAssembly“ ir modernios naršyklės kriptografijos API.

Išmokę šio gido 265 HTML, SVG ir MathML žymas, įgysite gilų profesinį žodyną, leidžiantį kurti žaibiškas, ilgaamžes ir kiekvienam pasaulio žmogui prieinamas interneto sistemas.