What markup means
Markup is a way of adding labels to text so that a program knows what each part is. The word comes from the print trade, where editors marked up manuscripts with instructions for typesetters, such as “this line is a heading” or “set this in italics”.
Computer markup does the same job with typed codes. A short label placed before and after a piece of text says what it is, for example a heading, a paragraph or a list item. The text itself stays readable, and software interprets the labels to decide how to display it.
Two kinds of instructions
Markup tends to fall into two broad types, and the difference matters for the whole story.
- Presentational markup says how something should look: make this bold, put it in this font, center it.
- Structural or descriptive markup says what something is: this is a title, this is an emphasized phrase, this is a list.
Descriptive markup has an advantage. If a document says “this is a heading”, the same document can be shown on a large monitor, a printed page or a small phone screen, each with a suitable appearance. Presentational markup ties the document to one look.
Roots before the web
In the 1960s and 1970s, people working on document processing began to favor descriptive labels because they let the same text be reused in different outputs. These ideas contributed to a standard for defining markup languages, SGML, which was approved as an international standard in the 1980s. It was used in publishing, government and large technical documentation projects, where documents had to be kept for years and processed by different systems.
SGML was powerful but complex. It let organizations define their own sets of tags and rules for how they could be combined.
HTML takes shape
When Tim Berners-Lee built the first web system around 1990, he needed a simple page format that researchers could write by hand. He drew on SGML conventions to create a small set of tags. Early HTML included elements for headings, paragraphs, lists and, crucially, anchors, the tag used to create a link from one document to another. That link feature was inspired by earlier work on hypertext systems.
A simple format helped the web spread. A person could create a page with any text editor, save it, and put it on a server. Others could view the source of a page in their browser and learn by copying. The same openness made it easy to experiment, and that would later cause problems.
Browsers expand the language
As the web became popular in the mid-1990s, browser makers added their own tags to make pages look better, including tags for fonts, colors and page backgrounds. Images were introduced early and quickly became central. Competing web browsers did not always support the same tags, and authors began to test pages in several of them, much as the World Wide Web itself was moving from research tool to mass medium.
Because early HTML had no good tools for layout, designers often used tables, which were meant for data, to place content in columns, and sometimes used invisible spacer images. These tricks worked but mixed structure, content and appearance in the same file. A page that looked good might be hard for software to interpret, and hard for people using screen readers or text-only tools.
Formal versions of the language were published to bring order. HTML 2.0 appeared in 1995, and later versions followed in the second half of the decade.
Separating structure from style
The response was cascading style sheets, usually called CSS. The idea, proposed in the mid-1990s and developed by several people, was to keep HTML for structure and put presentation rules in a separate set of instructions. One style sheet could set the fonts, colors and spacing for an entire site. Changing the look no longer meant editing every page.
Browser support for CSS was uneven for some years, and designers had to work around differences. Over time, support improved, and the practice of writing clean structural HTML and controlling the look with CSS became the preferred approach. Many tags once used for appearance were deprecated.
This separation also had practical benefits:
- Accessibility. Clear structure helps screen readers navigate headings and lists.
- Search. Crawlers read headings and links as hints about what a page contains, which links to the story of search engines.
- Flexibility. One page can adapt to different screen sizes, which became important with mobile devices.
- Maintenance. A site can be redesigned without rewriting its content.
XML, strict versions, and HTML5
In the late 1990s and early 2000s, some groups pushed for stricter syntax, producing XML and XHTML, which required well-formed documents. These had real uses, particularly for data exchange, but browsers had always tolerated sloppy HTML, and many authors preferred that flexibility.
A later effort, HTML5, defined how browsers should handle pages in much more detail, including error cases, and added elements for common structures such as articles and navigation, along with built-in support for audio, video and drawing. The specification became a recommendation in 2014, although the language continues to be updated as a living standard.
Scripting and dynamic pages
Markup describes a page, and style sheets shape it, but interactivity needs a third layer. Browsers added scripting languages that let pages respond to clicks and update without reloading. Together, these three layers of structure, style and behavior became the standard way to think about web design.
Why it matters
The history of HTML is partly a history of tension between simplicity and control. A format simple enough for anyone to write allowed rapid growth, while its early gaps led designers to improvise in ways that later had to be corrected. The separation of content and style did not remove every problem, but it explains why a modern page can be reshaped for so many devices, and why a clean, well-structured page is easier for both people and software to use.