From basement punch cards to design-system playbooks, the people who kept wrangling document structure
In an MIT basement a tired student grumbled about aligning footnotes by hand, while at IBM a teammate worried manuals fell apart after every revision. They taught mainframes simple commands called RUNOFF, a formatting program, and GML, a set of tags, so the machine could tidy headings for them.
A few years later ISO delegates compared the same report written with different codes and agreed on Standard Generalized Markup Language (SGML) as a shared checklist. At CERN Tim Berners-Lee trimmed SGML into HTML with links, and browser engineers later promised to keep HTML and the DOM in sync so scripts behaved the same everywhere.
Today design-system teams hand out custom elements and say, "Drop this in and the structure comes with it." Tap a year to see the worry, the fix, and the habit these people left behind. The stories stay in plain language so you can follow along without insider jargon.
Selecting a year opens a dialog close to the button so you can keep your reading position.
1960s
Late-night pagination experiments
Sleep-deprived students taught RUNOFF, an automatic formatter, and IBM's tag language GML to lay out theses without late-night hand work.
1970s
“Same manual, different tags”
Researchers wanted the same document to open everywhere, so they built portable markup like Scribe and drafted the first version of SGML.
1980s
Certifying SGML, planting HTML
After SGML became official, CERN staff trimmed it into HTML with simple links that anyone could write and share.
1990s
“Let’s read the same HTML”
Working groups turned HTML, XML, and the DOM into shared rules so pages and scripts behaved the same in every browser.
2000s
Making pages behave like apps
Browser teams pushed HTML toward app features, and meetups coined microformats so existing pages could reveal events and contact details.
2010s
Semantics team up with ARIA
HTML5 arrived alongside accessibility guides that reminded builders to name landmarks and roles so everyone could navigate.
2020s
Shipping structure as code
Design-system teams packaged custom elements and shared templates so structure could ship as reusable code and documentation.
Further Reading
Primary specifications and field notes that shaped SGML, HTML, and accessibility best practices.
MIT student Jerry Saltzer built RUNOFF so the computer could line up headings and footnotes for him.
In the MIT basement he fed punch cards into the mainframe and ran RUNOFF. Pages rolled out with centered titles and tidy notes, and a nearby researcher marveled that a few commands fixed the whole layout.
Saltzer jotted down a short list of commands such as #CENTER and shared it with classmates. His advisor checked the printout and suggested using the program on the next assignment as well.
RUNOFF mixed simple instructions with the text so the machine handled line breaks and footnotes. It proved that computers could manage document structure, paving the way for later markup languages.
1969
IBM GML Trial
IBM researchers created GML (Generalized Markup Language) so documents stayed intact even when someone changed a heading.
At IBM's Yorktown lab, Charles Goldfarb and his teammates listed parts like title and references on a chalkboard and chose tags such as :TITLE to mark them in text.
When the sample document printed correctly, a quality reviewer noted the pages realigned just by editing the tag, and a client considered adopting it to cut editing time.
GML used plain words to label sections such as title and body. Separating meaning from appearance made documents reusable and laid the groundwork for SGML and later HTML tags.
1973
Scribe Markup Language
Brian Reid built Scribe so a paper looked the same no matter which campus computer printed it.
Students were frustrated that fonts and margins changed on each machine. Reid introduced commands like @Heading to declare the structure once and let Scribe handle the rest.
When a classmate printed the same file on another mainframe and saw the layout match, the department adopted Scribe for theses.
Scribe split document meaning from presentation and showed the same content could be reused on different devices. SGML and HTML designers later borrowed that idea.
1978
ISO SGML Draft
ISO released a draft of SGML so different groups could agree on tag names before exchanging documents.
In Geneva, committee members compared airplane manuals and legal codes and noticed each one used different tag names for the same sections.
They proposed document type definitions (DTDs) so teams could publish their tag list in advance, and archives welcomed the chance to share files safely.
The SGML draft introduced the habit of declaring your tag vocabulary and rules first. That groundwork led to the 1986 standard.
1986
ISO 8879:1986 SGML
When SGML became an ISO standard, publishers trusted computers to check manuals before printing.
After the vote, aviation teams updated their systems so catalogs matched the approved DTD. Missing sections were caught early instead of during press checks.
Publishers installed SGML editors to make both printed books and data files from the same source, and clients liked receiving the two formats at once.
ISO 8879 spelled out how tags should look and how software should read them. Shared rules let different companies exchange documents and prepared the way for HTML.
1989
HTML Concept Memo
Tim Berners-Lee drafted HTML as a lightweight SGML set so researchers could link reports together.
At CERN he trimmed SGML to a short list of tags and showed colleagues how an <a> link could jump between memos.
Researchers tested headings, lists, and links, pleased that the language stayed small and easy to share.
HTML kept the useful parts of SGML and made links the central feature. That balance let browsers read documents and connect them.
1995
HTML 2.0 RFC
HTML 2.0 gave everyone one shared manual for forms, images, and links.
The IETF working group collected common browser behavior and published RFC 1866. Netscape and Microsoft agreed to follow it when handling forms, headings, and lists.
Support teams soon reported fewer calls about pages looking different, thanks to the shared instructions.
The spec explained what each tag meant and how browsers should react, giving developers a stable base for future features.
1997
XML 1.0 Recommendation
XML 1.0 showed that the same tag format could carry both documents and data.
During a W3C briefing, Tim Bray demonstrated an order list written in XML that needed no extra software to understand.
Newsrooms and software companies wrote DTDs and namespaces so partners could exchange information in a predictable structure.
XML's rules for element names and attributes made it easy for different programs to share a data tree. SVG, RSS, and many business formats grew from that idea.
1998
DOM Level 1
DOM Level 1 gave scripts a reliable way to find and change parts of a page.
Browser engineers agreed to treat the document as a tree, so document.getElementById and similar methods behaved the same everywhere.
A developer built a test page that added a new paragraph with a button and celebrated that it finally worked in every browser.
Seeing a page as parents and children let JavaScript edit structure safely, opening the door to dynamic web apps.
2004
WHATWG Forms
Apple, Mozilla, and Opera formed WHATWG to add web forms, canvas, and video without plug-ins.
At a meeting in San Jose, editor Ian Hickson proposed features such as canvas and input type="email", and engineers immediately sketched implementation plans.
Requests for video, form validation, and other upgrades poured into the mailing list, shaping the drafts in the open.
WHATWG kept HTML evolving based on real needs and set the stage for HTML5's richer elements.
2005
Microformats Community
Developers agreed on class names like hCard so existing HTML could expose contact details and events.
At BarCamp, attendees tried class="fn org" on blog posts and watched address-book apps import the data automatically.
Examples piled up on microformats.org, encouraging search teams to test pulling schedules and reviews straight from the markup.
Microformats proved you can add meaning without new tags, inspiring later efforts such as schema.org and microdata.
2011
schema.org Alliance
Google, Bing, and Yahoo opened schema.org and said, "Use these words and we will all understand your content."
At SMX they showed how adding itemprop attributes made star ratings appear in search results, sending marketers home to update their pages.
Within a year, shopping sites exposed price and stock information with the shared vocabulary, and browser devtools added structured data checkers.
schema.org acts as a shared dictionary so search engines and voice assistants can read the same structure. It helps front-end and back-end teams speak the same language.
2014
HTML5 Recommendation
When HTML5 became official, teams swapped generic divs for clear landmarks like main and nav.
One web lead replaced <div id="content"> with <main> and ran screen-reader tests; the QA report noted that navigation became easier.
Blog posts and design systems quickly explained when to use section and aside, spreading the habit of semantic markup.
HTML5 introduced names such as main, header, and nav so tools and assistive tech could understand a page's roles.
2017
ARIA 1.1 Authoring Practices
ARIA 1.1 gave developers a checklist for explaining custom widgets to assistive tech.
A museum web team added ARIA roles to its tab component and testers reported that screen readers now announced each tab correctly.
The pattern guide listed keyboard order and states, becoming a go-to reference for front-end teams.
ARIA 1.1 fills gaps when semantic HTML alone is not enough, so complex components still share their structure and state.
2020
Custom Elements v1
With custom elements stable, design systems could ship tags like <gov-card> that came with the correct layout.
A public agency defined a <gov-card> component so editors only needed to write the tag in Markdown to get a consistent card.
Accessibility specialists reviewed the element to ensure it kept semantic HTML inside, and surveys later showed people recognized the pattern across pages.
Custom Elements v1 lets teams create new tags with their own templates and accessibility settings, making reusable structure easy to share.
2022
Design System Guides
Public design-system guides started sharing structure templates alongside colors and buttons.
A government UX center posted ready-made page skeletons, and content teams liked that heading levels and landmarks were already in place.
Internal office hours paired designers and developers to review the rules and share scripts that test page structure automatically.
Documenting structure keeps new pages consistent and makes accessibility checks part of standard practice.
2023
Design Tokens Working Draft
The W3C design tokens draft suggested keeping colors, spacing, and roles in one shared file.
The community group introduced names such as "color.background.surface". Designers said a single file could now update apps and websites together, and engineers swapped themes by importing the JSON.
Conference talks echoed that tokens were the new blueprint, capturing hierarchy, contrast, and component rules in one place.
Design tokens store visual and structural decisions as key-value pairs so tools can apply the same intent across web, app, and email interfaces.
