From basement punch cards to design-system playbooks, the people who kept wrangling document structure
In the MIT basement someone sighed, “I’m still aligning footnotes at 2 a.m.,” while an IBM researcher muttered, “Change one heading and the whole manual collapses.” RUNOFF, GML, and Scribe were taped together so mainframes could lay out reports without human babysitting.
A decade later ISO delegates complained, “Same document, different tags—we can’t exchange this,” so SGML emerged. At CERN Tim Berners-Lee pitched HTML as “just enough SGML with links,” and browser engineers later promised, “If we standardize HTML and the DOM, your scripts won’t break on rival browsers.”
Today design-system teams tell stakeholders, “Drop this custom element and the structure ships with it.” Tap a year to hear the worry, the fix, and the habit it left behind—each story keeps the jargon friendly so you can follow along without a standards body badge.
Selecting a year opens a dialog close to the button so you can keep your reading position.
1960s
Late-night pagination experiments
“My thesis is eating my sleep,” students said, so they taught mainframes to center headings and wrangle footnotes with RUNOFF and GML.
1970s
“Same manual, different tags”
Archivists begged for portable markup, academics sketched DTDs on whiteboards, and SGML slowly took shape.
1980s
Certifying SGML, planting HTML
Once SGML was rubber-stamped, CERN researchers asked, “What if we trim it and add links?” and the HTML memo began to circulate.
1990s
“Let’s read the same HTML”
Working groups hammered out HTML 2.0 and the DOM so teams could promise, “One spec, one script, every browser.”
2000s
Making pages behave like apps
Browser vendors formed WHATWG chanting “HTML needs new inputs,” while meetup crews coined microformats to surface events and people.
2010s
Semantics team up with ARIA
HTML5 went stable, and accessibility experts insisted, “Name your landmarks, declare your roles,” turning structure into shared etiquette.
2020s
Shipping structure as code
Teams promised, “Drop this custom element and the landmarks come with it,” while public design guides spread reusable templates.
Further Reading
Primary specifications and field notes that shaped SGML, HTML, and accessibility best practices.
“If I teach the mainframe .he and .fo maybe I can sleep,” Jerry Saltzer joked while wiring RUNOFF to paginate theses for him.
Graduate students hoisted punch cards into the mainframe queue, anxious for perfectly formatted thesis drafts. RUNOFF let them mark headings, footers, and spacing before printing. When the output matched their layout plan, they realized structure could be declared with simple inline tokens.
RUNOFF’s ideas spread quickly: early email and Unix man pages borrowed the dot-command approach, proving that structure and presentation could be automated.
RUNOFF inspired a family of markup systems (troff, TeX) that separated document intent from printer commands. It set the stage for generalized markup languages.
1969
IBM GML Trial
Legal reviewers groaned, “Every draft breaks on a new machine,” so Goldfarb, Mosher, and Lorie tagged contracts with GML to keep layouts sane.
IBM’s legal department struggled to reuse templates. The trio created macros to label sections like and let secretaries reuse clauses safely. After pilots succeeded, IBM shared the approach with government agencies to ease cross-system document exchange.
GML proved that descriptive tags, not printer codes, were the key to portability—laying groundwork for SGML.
GML introduced generalized markup: tags described meaning, not appearance. It influenced the ISO committee that drafted SGML and, by extension, HTML.
1973
Scribe Markup Language
Brian Reid promised classmates, “Send the file, not a printer manual,” and Scribe delivered the same layout on every campus machine.
At Carnegie Mellon, Reid built Scribe so academics could share papers without rewriting macros for each printer. Authors defined structure with tags, then compiled to multiple formats. When the thesis committee saw consistent layouts across devices, they applauded the automation.
Scribe influenced thinking around extensible markup and licensing for document processors.
Scribe’s context-sensitive macros foreshadowed templates and style sheets. SGML designers cited it when arguing for generalized tags and document type definitions.
1978
ISO SGML Draft
Delegates waved manuals and complained, “Same plane, different tags,” prompting ISO to circulate the first SGML draft for comment.
Representatives from publishing, aerospace, and government spent weeks merging requirements. The draft introduced DTDs—formal blueprints for documents. Test implementations confirmed that conforming parsers could enforce structure automatically.
The collaborative drafting culture encouraged open discussion of markup semantics, later mirrored by the W3C.
SGML’s draft cemented the idea of validating structure before rendering. It established the terminology (entities, elements, attributes) carried into HTML and XML.
1986
ISO 8879:1986 SGML
“Stamp it official and we’ll invest,” publishers urged—and once SGML earned ISO status, enterprise teams rushed to author with it.
When ISO ratified SGML, vendors hurried to ship compliant editors and parsers. Documentation teams defined DTDs for aircraft manuals and legal codes. Validation caught missing sections before printing, saving costly rework.
The standard legitimized markup as an enterprise discipline, not merely an academic experiment.
SGML’s requirement for explicit document types influenced HTML’s element definitions and XML’s strict syntax rules.
1989
HTML Concept Memo
“What if we click through papers instead of hunting binders?” Berners-Lee asked, sketching HTML as lightweight SGML with links.
Berners-Lee sketched tags like <title> and <link> on a notepad, imagining physicists navigating documents by clicking references. Colleagues quickly prototyped parsers, and the idea evolved into HTML and URLs.
The memo reframed structure as an interactive map, not just print layout.
By grounding HTML in SGML, Berners-Lee ensured compatibility with existing parsers while enabling hypertext-specific semantics.
1995
HTML 2.0 RFC
Browser engineers finally agreed, “One RFC, one behavior,” as HTML 2.0 gathered the wild tag zoo into a single spec.
IETF engineers compiled existing practices from CERN and NCSA browsers and published RFC 1866. Developers finally had authoritative definitions for forms, headings, and lists. Browser vendors aligned their parsers, reducing cross-compatibility bugs.
With stable tags, content management systems emerged to output compliant HTML automatically.
The RFC formalized SGML DOCTYPE declarations and MIME types, paving the way for scripting and styling layers.
1997
XML 1.0 Recommendation
“Keep SGML’s rigor but drop the baggage,” Tim Bray urged as XML 1.0 arrived and teams rushed to share data with the same tags.
At the W3C briefing, Bray and Bosak demonstrated how invoices, news feeds, and documentation could travel as the same tree of elements. A publisher exported article metadata, while an ERP vendor parsed purchase orders—both using custom DTDs atop XML. Developers exclaimed, “Finally we can read it like a document and process it like data.”
Browsers shipped XML viewers, and APIs such as SAX and DOM parsers spread. XML became the handshake between CMSs, web services, and device sync.
XML enforced namespaces, well-formed documents, and explicit schemas. It shaped SOAP, RSS, SVG, and countless configuration formats, embedding structural thinking into both frontend rendering and backend integration.
1998
DOM Level 1
Tired of vendor quirks, developers cheered, “getElementById works everywhere now,” when DOM Level 1 landed.
Before the DOM, each browser exposed different APIs. The new standard defined nodes, attributes, and methods like getElementById. Developers debugged less and shipped more interactive pages. Tools like Dreamweaver and early static site generators used the DOM for WYSIWYG editing.
The DOM helped bridge authorship and runtime, making structure programmable.
DOM Level 1 codified the tree representation underpinning modern frameworks and accessibility tooling.
2004
WHATWG Forms
“HTML needs new tricks, not new plug-ins,” browser vendors said as they launched WHATWG for app-friendly markup.
Representatives from Apple, Mozilla, and Opera met at the Web Hypertext Application Technology Working Group. They drafted Web Forms 2.0, canvas, and new semantic elements. Feedback loops through public mailing lists kept the spec aligned with real-world needs.
WHATWG’s living standard model ensured structure could adapt without waiting years for formal ratification.
The group’s work led directly to HTML5’s richer element set, integrating multimedia and offline capabilities into the document model.
2005
Microformats Community
Meetup organizers rallied builders with “Just add class=\"hcard\" and let the bots do the rest,” kickstarting microformats.
Meetups in San Francisco and London brainstormed structured class names that search engines could parse. Bloggers annotated contact info and events, spawning mashups and feed readers that understood the metadata. The movement proved that semantics could evolve from the grassroots.
Microformats influenced HTML5 additions such as microdata, schema.org, and ARIA roles.
The approach championed progressive enhancement: HTML stayed valid while offering machine-readable hints—an idea reused by JSON-LD and structured data today.
2011
schema.org Alliance
Search teams stood shoulder to shoulder saying, “Mark it once, all engines understand,” as schema.org launched shared vocabularies.
At SMX Advanced, engineers from Google, Bing, and Yahoo demoed recipe cards lighting up SERPs the moment itemprop="ratingValue" appeared. Marketers hurried back to add microdata and JSON-LD. “Our concert dates finally show on the right rail!” one promoter cheered.
Rich snippets drove adoption. CMS plugins shipped schema templates, and DevTools gained structured data validators, making semantic markup part of daily workflows.
schema.org unified microdata, RDFa, and JSON-LD vocabularies. Frontends expose consistent structures for accessibility and SEO, while backends maintain canonical schemas that feed search, voice assistants, and analytics.
2014
HTML5 Recommendation
When W3C hit publish, teams high-fived, “Finally, nav and video are official,” cementing HTML5’s semantic upgrade.
The release introduced <article>, <nav>, <section>, <video>, and a formal parsing algorithm. Front-end teams celebrated: accessible landmarks and multimedia no longer required plug-ins. Books, courses, and validators taught the new structure quickly.
HTML5 marked the moment the web officially moved beyond documents into app territory.
The spec clarified error handling so browsers behaved predictably even with imperfect markup, empowering tooling like linters and formatters.
2017
ARIA 1.1 Authoring Practices
Accessibility coaches insisted, “No widget ships without roles and keyboard paths,” releasing the ARIA 1.1 playbook.
The WAI community documented keyboard behavior, roles, and states for interactive components. Designers mapped the guidance into design systems, ensuring assistive technologies announced content correctly. Workshops showed developers how to test with screen readers.
Structure and accessibility became inseparable parts of the conversation.
ARIA 1.1 patterns reinforced semantic HTML and offered fallbacks when custom widgets were unavoidable, setting expectations for modern component libraries.
2020
Custom Elements v1
“Ship the tag, ship the structure,” design-system teams cheered once browsers locked in Custom Elements v1.
Framework authors and standards editors collaborated to stabilize lifecycle callbacks and shadow DOM behavior. Companies packaged button, card, and chart elements for use across frameworks. Design system teams rejoiced at finally sharing structure without rewriting per stack.
Custom elements nudged architecture toward encapsulated, semantic building blocks.
The v1 spec defined connected/disconnected callbacks, template slots, and attribute reflection—features embraced by modern component authoring tools.
2022
Design System Guides
Public playbooks bragged, “Copy this template and your landmarks, tokens, and ARIA ship on day one,” spreading structural discipline.
Design ops teams published documentation covering component anatomy, semantics, and ARIA usage. Community contributors filed issues pointing out edge cases, helping the guides mature. Organizations adopted the recipes to keep cross-platform products structurally consistent.
Design systems turned structural decisions into reusable policy, not tribal knowledge.
Guides emphasized design tokens, semantic naming, and documentation tooling—principles vital for multi-brand, multi-device ecosystems.
2023
Design Tokens Working Draft
“Ship color, spacing, and roles as one source of truth,” the W3C draft urged, letting teams deploy structure and style together.
The W3C Community Group unveiled a JSON schema for tokens like "color.background.surface". Designers exported Figma variables, engineers piped them into React, iOS, and email templates. “Flip the theme file and every surface updates before QA finishes coffee,” one design systems lead joked.
Workflows shifted: tokens now document component hierarchy, accessibility contrast, and motion preferences. Structure files travel alongside code, ensuring every surface reflects the same intent.
Design tokens bridge semantic structure with presentation. Build tools translate them into CSS custom properties, native constants, and docs. Backends reuse the same definitions for PDFs and notifications, keeping multi-channel structure in sync.