123 The History of HTML — The Foundation of the World Wide Web

The Technologies That Built the Web

Before CSS could style a webpage, there had to be a webpage.

Before JavaScript could make a button interactive, there had to be a button.

Before PHP could generate a document, there had to be a document format to generate.

Before Apache or nginx could deliver a webpage, there had to be something to deliver.

At the foundation of all of these technologies is something remarkably simple:

HTML — HyperText Markup Language.

HTML is not a programming language.

It does not perform calculations the way JavaScript or PHP can.

Instead, HTML describes the structure and meaning of a document.

And that seemingly simple job helped create the World Wide Web.

Before the Web

Computer networks existed long before the World Wide Web.

The internet itself was already developing as a global network connecting computers.

Researchers could use email.

Files could be transferred using FTP.

Remote computers could be accessed.

Information systems such as Gopher would also emerge.

But finding and connecting information across different computers remained difficult.

The internet connected machines.

Something was still needed to connect information.

The Idea of Hypertext

The concept behind hypertext is older than the web.

Traditional writing is usually linear.

You begin at the beginning and continue through the document.

But knowledge is not always linear.

One idea connects to another.

A reference points somewhere else.

A reader may want to follow that connection immediately.

Hypertext allows documents to contain links to other information.

Instead of merely reading from beginning to end, the reader can move through a network of related ideas.

Vannevar Bush and the Memex

In 1945, American engineer and science administrator Vannevar Bush published an influential essay describing a hypothetical device called the Memex.

The Memex would allow people to store information and create associative trails connecting related material.

It was not the World Wide Web, and it was never built as described.

But it expressed an important idea:

Knowledge could be connected through relationships rather than organized only in a rigid sequence.

Ted Nelson and “Hypertext”

During the 1960s, Ted Nelson coined the term hypertext.

Nelson imagined systems in which documents could be deeply interconnected.

Other researchers also explored interactive computing and linked information.

The idea of connected documents was developing long before web browsers existed.

What was missing was a simple system that could work across the growing internet.

CERN

In the late 1980s, British computer scientist Tim Berners-Lee was working at CERN, the European physics research organization in Switzerland.

CERN was filled with scientists from around the world.

They used different computers.

They used different operating systems.

They created enormous amounts of information.

And sharing that information efficiently was difficult.

Berners-Lee saw an opportunity to combine hypertext with computer networking.

Information Management: A Proposal

In March 1989, Berners-Lee submitted a proposal for an information-management system.

The proposal described a way of linking information across different systems.

His manager, Mike Sendall, famously described the proposal as:

“Vague, but exciting.”

That vague but exciting idea would become the World Wide Web.

Three Fundamental Technologies

Berners-Lee's web depended upon several technologies working together.

Three became particularly fundamental:

• HTML — describes the document
• HTTP — transfers web information
• URL — identifies where a resource can be found

The combination was extraordinarily powerful.

A document could have an address.

A browser could request it.

And the document could contain links to other addresses.

The web could grow by connecting one document to another.

HTML Was Based on an Existing Idea

HTML did not appear completely from nowhere.

It was influenced by SGML — Standard Generalized Markup Language.

SGML provided a way to describe the structure of documents using markup.

Berners-Lee adapted markup concepts into something much simpler for hypertext documents on the web.

The result was HTML.

What Is Markup?

Markup describes parts of a document.

For example, HTML can identify:

• A heading
• A paragraph
• A link
• A list
• An image
• A quotation
• A form
• A table

The markup gives the browser information about what those pieces of content represent.

This is fundamentally different from simply telling the browser how something should look.

A Heading Is More Than Large Text

This distinction became increasingly important as the web matured.

A heading might normally appear larger and bolder than ordinary text.

But the important thing about a heading is not its size.

It is its meaning.

It tells the browser, search engine, screen reader, and other software:

This begins a section of the document.

CSS can decide how that heading looks.

HTML describes what it is.

The First Website

By the end of 1990, Berners-Lee had developed the major pieces needed to demonstrate the web.

He created the first web browser and editor.

He created the first web server.

And he created the first website.

The first web server ran on a NeXT computer at CERN.

The website explained the World Wide Web project itself and provided information about how to use it.

The web was being used to explain the web.

The First HTML Was Very Small

Early HTML contained only a relatively small collection of elements.

There were headings.

Paragraphs.

Lists.

Links.

Basic structural elements.

The language was intentionally simple.

A researcher did not need to become a professional programmer to publish a document.

That simplicity would become one of HTML's greatest strengths.

The Anchor

One HTML element deserves special attention:

<a>

The anchor element created hyperlinks.

A document could point to another document.

That document could point somewhere else.

Links could cross organizational and geographic boundaries.

The reader did not need to know which physical computer contained the information.

They could simply follow the link.

This was the heart of the web.

The Web Is Not the Internet

This distinction is important.

The internet is the underlying network infrastructure connecting computers and networks.

The World Wide Web is one system that operates over the internet.

Email uses the internet.

FTP uses the internet.

Other services use the internet.

The web uses technologies such as HTTP, URLs, browsers, web servers, and HTML.

The internet existed before the web.

HTML helped make the web possible.

The Web Leaves CERN

For the web to become truly global, people outside CERN needed to be able to use and develop it.

In 1993, CERN made the World Wide Web technology available on a royalty-free basis.

This was one of the most consequential decisions in the history of computing.

Anyone could build a web server.

Anyone could build a browser.

Anyone could publish HTML.

The web could grow without one company controlling access to its fundamental technology.

Mosaic

Another major turning point came from the National Center for Supercomputing Applications at the University of Illinois.

NCSA Mosaic appeared in 1993.

Mosaic made the web much more approachable to ordinary computer users.

It provided a graphical interface and helped popularize the integration of images with web content.

The web was beginning to move beyond research institutions.

Images Change the Web

Text and hyperlinks were powerful.

Images changed expectations.

Webpages could become visual publications.

Companies could display products.

Organizations could display logos.

Artists and photographers could publish visual work.

The web was becoming a publishing medium.

And once people began thinking visually, they wanted much more control over design.

Netscape

Several members of the Mosaic development team went on to help create Netscape Communications.

Netscape Navigator became one of the dominant browsers of the mid-1990s.

The rapid growth of the commercial web created enormous pressure for new HTML features.

Website designers wanted capabilities faster than standards organizations could define them.

Browser companies began adding their own HTML elements and attributes.

HTML Begins to Grow

HTML gained tables.

Forms became increasingly important.

Images became standard parts of pages.

Presentation controls appeared.

Frames appeared.

Scripting arrived.

Browser-specific extensions appeared.

The small document language was rapidly becoming the foundation for an entire application and publishing platform.

HTML 2.0

HTML 2.0 was standardized in 1995.

Rather than representing a dramatic new invention, it documented much of the HTML practice that had developed during the early web.

HTML was beginning the difficult transition from one inventor's document format to an international standard used by rapidly competing browsers.

The Browser Wars

Netscape Navigator and Microsoft Internet Explorer competed intensely during the 1990s.

Each browser company wanted capabilities that would attract users and web developers.

They introduced features that were not always part of established standards.

A webpage might work in one browser but not another.

Developers sometimes wrote different markup depending upon which browser was visiting.

The open web was in danger of fragmenting into browser-specific versions.

“Best Viewed With...”

Websites sometimes displayed messages such as:

“Best viewed with Netscape Navigator.”

or:

“Best viewed with Internet Explorer.”

Those messages captured a fundamental problem.

The World Wide Web was supposed to be universal.

A document should not need to belong to one browser company.

HTML 3.2

HTML 3.2 became a W3C Recommendation in 1997.

It attempted to standardize many features that had become common in browsers.

By this point HTML included increasing amounts of presentation-related markup.

Authors could influence fonts, colors, alignment, tables, and other visual characteristics.

HTML was being asked to describe both the meaning of a document and its appearance.

Those responsibilities were becoming tangled together.

The <font> Era

The <font> element became one of the symbols of this period.

Developers could place font instructions throughout their HTML.

It gave designers control.

But changing the appearance of a large site could require changing markup across many pages.

HTML was carrying presentation information that did not really belong in the document structure.

As we saw in our CSS history, there had to be a better way.

Tables Take Over Layout

The HTML table had been created for tabular data.

But web designers discovered that tables could control page layout with greater predictability than the limited CSS of the time.

Soon entire websites were constructed inside tables.

Tables inside tables created complex layouts.

Transparent spacer GIFs controlled widths and heights.

HTML became filled with markup whose purpose was not to describe the content, but to force the content into a visual arrangement.

Frames

Frames offered another approach to page organization.

A browser window could be divided into separate regions, each loading a different HTML document.

A navigation frame could remain visible while another frame displayed changing content.

Frames solved certain practical problems.

They also created new ones involving navigation, bookmarking, accessibility, printing, search engines, and linking.

Like many early-web technologies, frames were useful experiments that eventually revealed better ways of solving the same problems.

HTML 4

HTML 4 arrived in 1997, with HTML 4.01 following in 1999.

HTML 4 represented an important move toward cleaner separation between document structure and presentation.

CSS was increasingly expected to handle visual design.

HTML could move back toward describing meaning and structure.

Presentation-oriented HTML features began moving toward deprecation.

HTML + CSS

The relationship we now take for granted was becoming established:

HTML describes the document.

CSS describes its presentation.

This separation made websites easier to maintain.

One style sheet could control many HTML documents.

The HTML could become simpler.

The same content could potentially be presented differently in different contexts.

JavaScript Completes the Browser Trio

By this point another technology had joined the picture.

JavaScript could add behavior.

The three major browser technologies gradually settled into complementary roles:

HTML — structure and meaning

CSS — presentation and layout

JavaScript — behavior and interactivity

That division remains one of the most useful mental models in web development.

Then Came XHTML

As the web entered the 2000s, standards developers explored making HTML follow stricter XML rules.

The result was XHTML.

XHTML encouraged cleaner, more rigid markup.

Elements needed to be properly nested.

Tags needed to be properly closed.

Markup conventions became more disciplined.

For developers accustomed to inconsistent early HTML, this could feel like welcome structure.

XHTML 1.0

XHTML 1.0 became a W3C Recommendation in 2000.

It largely reformulated HTML 4 using XML syntax.

Many developers adopted XHTML-style coding practices.

Lowercase tags became common.

Quoted attributes became normal.

Elements were carefully closed.

Cleaner markup was generally a good development habit.

But XHTML Had a Problem

The web had always been remarkably forgiving.

A browser would attempt to display a page even if the HTML contained mistakes.

That tolerance helped the web grow.

Strict XML processing could behave very differently.

A markup error could potentially cause the document to fail rather than simply render imperfectly.

The strictness that made XML attractive also conflicted with some of the practical realities of the existing web.

HTML's Forgiveness Was a Feature

HTML's tolerance is sometimes criticized because it allowed sloppy markup.

But that tolerance also contributed to the web's extraordinary resilience.

Old pages continued working.

Imperfect pages still displayed.

Beginners could learn by experimenting.

Browsers attempted to make sense of what they received.

The web evolved without requiring every existing document to be rewritten each time the standard changed.

Two Visions for the Future

During the early 2000s, there was disagreement about where web standards should go next.

One direction emphasized increasingly strict XML-based document languages.

Another argued that HTML should evolve pragmatically while remaining compatible with the enormous existing web.

Representatives from browser companies including Apple, Mozilla, and Opera formed the Web Hypertext Application Technology Working Group, or WHATWG, in 2004.

Their work would profoundly shape HTML's future.

The Web Was Becoming an Application Platform

The problem had changed.

The original HTML was designed primarily for linked documents.

But developers were now building applications.

They needed forms.

Video.

Audio.

Graphics.

Interactive interfaces.

Application state.

Better semantic structure.

The web platform needed to evolve without abandoning its past.

HTML5

The work that became HTML5 took a pragmatic approach.

Instead of attempting to replace HTML with something fundamentally incompatible, HTML would evolve.

Existing websites would continue working.

New semantic elements would be introduced.

Browsers would gain capabilities needed by modern applications.

The web could move forward while preserving backward compatibility.

Semantic HTML

HTML5 introduced and popularized elements that better described common document structures.

These included elements such as:

• <header>
• <nav>
• <main>
• <article>
• <section>
• <aside>
• <footer>

Instead of creating generic containers for everything, authors could provide more information about what each part of the page represented.

HTML was returning to one of its original strengths:

describing meaning.

The <div> Is Useful, But It Says Almost Nothing

The <div> element remains extremely useful as a generic container.

But a div does not inherently tell us what the content means.

A <nav> element tells us something.

An <article> tells us something.

A <main> element tells us something.

Semantic HTML gives browsers and assistive technologies more information about the document.

HTML and Accessibility

This is where HTML's original purpose becomes especially important.

A properly marked-up button already has behaviors and semantics that browsers and assistive technologies understand.

A heading creates document structure.

A label can identify a form control.

A list identifies related items.

A table can identify actual tabular relationships.

Using the correct HTML element often provides accessibility benefits before a single additional accessibility attribute is added.

Use the Element That Means What You Mean

This leads to one of the simplest and most powerful rules in modern web development:

Use the HTML element that best describes the content or action.

If something is a button, use a button.

If something is a heading, use a heading.

If something is navigation, identify it as navigation.

If information is truly tabular, use a table.

Good HTML provides a strong foundation for CSS, JavaScript, accessibility, search engines, and future technologies.

Audio and Video

HTML5 also helped reduce dependence on browser plugins for multimedia.

Native <audio> and <video> elements allowed browsers to handle multimedia directly.

This was a major change.

For years, rich media on the web often depended on plugins and proprietary technologies.

More capability was moving into the open web platform itself.

Canvas

The <canvas> element provided a programmable drawing surface.

JavaScript could use it to create graphics, visualizations, games, image manipulation, and other dynamic visual content.

HTML provided the element.

JavaScript supplied the behavior.

The technologies worked together.

Forms Become More Capable

Forms have existed since the early web, but modern HTML added improved input types and validation capabilities.

Browsers could better understand fields representing email addresses, numbers, dates, ranges, and other kinds of information.

Mobile devices could display more appropriate keyboards.

Some validation that once required JavaScript could be handled directly by HTML.

Once again, the web platform absorbed capabilities that developers previously had to build themselves.

The Browser Became Smarter About HTML

Modern HTML is not merely a collection of tags.

The browser understands increasingly rich meanings and behaviors.

Choosing the correct element allows the browser to provide built-in capabilities.

This can reduce the amount of custom code needed.

The simplest solution is often to let HTML do the job HTML already knows how to do.

HTML5 Becomes the Modern Web

HTML5 became a W3C Recommendation in 2014, but web development did not stop there.

The idea of HTML as something that receives one giant numbered version every several years became less useful.

The web evolves continuously.

HTML increasingly became maintained as a living standard.

The Living Standard

Today HTML is developed as an evolving standard rather than waiting for an eventual HTML6 to redefine the web.

Features can be specified, implemented, tested, improved, and standardized continuously.

This better reflects how browsers and the web actually develop.

HTML is no longer waiting for occasional revolutions.

It is continually evolving.

Old HTML Still Works

One of the web's most remarkable characteristics is backward compatibility.

A surprisingly old HTML document can often still be opened in a modern browser.

The page may look dated.

Some obsolete features may be interpreted differently.

But browsers make enormous efforts not to break the existing web.

This is very different from many software platforms where old applications simply stop running.

The Web Carries Its History With It

This backward compatibility creates complexity.

Browsers contain decades of accumulated behavior.

They must understand modern semantic HTML while also dealing with markup written during the browser wars.

They need to support today's standards without unnecessarily breaking yesterday's websites.

The web does not usually throw its past away.

It builds the future on top of it.

HTML and Search Engines

HTML also helps search engines understand content.

Headings indicate structure.

Titles identify documents.

Links connect information.

Alternative text can describe images.

Semantic elements provide additional context.

Good HTML is not merely cleaner code.

It helps machines understand the information humans are publishing.

HTML and Artificial Intelligence

This becomes even more interesting in the age of artificial intelligence.

AI systems increasingly retrieve, analyze, summarize, and interpret information from the web.

Clear structure and meaningful markup can help machines distinguish headings, navigation, articles, lists, tables, and other content relationships.

The original idea behind HTML—describing what information means rather than merely how it looks—may become even more valuable as machines consume more of the web.

HTML Was Semantic Before “Semantic Web” Was Fashionable

At its best, HTML has always been about meaning.

A paragraph is marked as a paragraph because it is a paragraph.

A heading is marked as a heading because it is a heading.

A link is marked as a link because it connects one resource to another.

The visual presentation can change.

The underlying meaning remains.

That principle has survived more than three decades of web development.

HTML Is Still Surprisingly Simple

Modern web development can involve enormous stacks of technology.

Linux.

Apache.

Nginx.

PHP.

MySQL.

JavaScript frameworks.

Build systems.

APIs.

Cloud services.

Artificial intelligence.

Yet someone can still create a text file, place some basic HTML inside it, open it in a browser, and have a webpage.

That simplicity is extraordinary.

View Source

HTML also contributed to one of the web's most important educational traditions.

Someone could discover an interesting webpage and examine its source.

They could see how it had been constructed.

They could experiment.

They could learn by examining the work of others.

For an entire generation of web developers, View Source was a classroom.

The Web Was Learnable

This accessibility helped the early web grow.

You did not necessarily need a computer science degree.

You did not need an expensive development system.

You did not need permission from a software company.

You could create an HTML document.

You could put it on a web server.

You could link it to another document.

And suddenly you were part of the World Wide Web.

HTML Democratized Publishing

Before the web, publishing information to a large audience often required access to printing presses, broadcasters, publishers, or other distribution systems.

HTML dramatically lowered that barrier.

A person, small business, town, organization, artist, researcher, or hobbyist could publish information that anyone with internet access could potentially find.

The page might be simple.

But it could be global.

The Foundation Remained

The web changed enormously.

CSS became sophisticated.

JavaScript became a full application language.

PHP and databases made websites dynamic.

Apache and nginx became powerful server platforms.

Linux became infrastructure.

Cloud computing abstracted the hardware.

Artificial intelligence began helping create and interpret the content.

But underneath the webpage itself, HTML remained.

Everything Eventually Becomes HTML

A PHP application may generate HTML.

A database may supply information that becomes HTML.

A JavaScript framework may construct HTML elements in the browser.

A content-management system may generate HTML.

An artificial-intelligence system may write HTML.

The tools can change dramatically.

But if the result is a webpage, HTML remains one of the browser's fundamental languages for understanding its structure.

The Technology Can Become Invisible Without Becoming Unimportant

Most people visiting a website never think about HTML.

They see an article.

A photograph.

A navigation menu.

A form.

A product.

A video.

A heading.

A link.

But underneath those visible elements is a document structure the browser understands.

Once again:

The technology can become invisible without becoming unimportant.

A Language Designed to Connect Information

HTML has accumulated many capabilities during its history.

But its most important feature may still be the one that was there near the beginning.

The hyperlink.

One document can point to another.

That document can point to another.

No central authority needs to define every possible connection.

Anyone publishing a page can create another link.

The web grows through connections.

The Foundation of the Web

HTML is easy to underestimate because it is familiar.

It is not as dramatic as artificial intelligence.

It is not as powerful as a general-purpose programming language.

It does not manage servers like Linux.

It does not store millions of records like MySQL.

But HTML performs one essential task extraordinarily well.

It gives information structure, meaning, and connections.

Everything else can build upon that foundation.

Next: HTML Today and Tomorrow

HTML has survived more than three decades of extraordinary technological change.

But what does modern HTML look like?

How important is semantic HTML today?

Why should we use a button instead of making a div clickable?

What role does HTML play in accessibility?

How do modern forms, responsive images, audio, video, dialogs, details, and other native browser capabilities reduce the need for custom JavaScript?

How does structured HTML help search engines and artificial intelligence understand information?

And if AI eventually creates much of the code automatically, will humans still need to understand HTML?

Next in The Technologies That Built the Web, we will explore HTML Today and Tomorrow—and see why the simplest member of the modern web stack may remain one of its most important.