HTML Tag Reference

HyperText Markup Language (HTML) is the invisible skeleton of the web. It has evolved from a simple academic document format into a complex application architecture over three decades.

The Birth of the Web: The First 18 Tags

In 1989, Tim Berners-Lee, a physicist at CERN, envisioned a system to share documents across the institute’s network. He invented HTTP (to transmit data), URLs (to locate data), and HTML (to structure data).

The very first HTML specification (circa 1991) contained only 18 tags. Many of these foundational tags are still in use today:

• <title>: The name of the document.
• <h1> to <h6>: Hierarchical headers.
• <p>: Paragraphs.
• <a>: The “Anchor” tag, the most important tag of all, creating the hyper-links that wove the “web” together.

At this stage, HTML was purely structural. It had no concept of fonts, colors, or layouts. It was designed solely to format academic papers.

The Browser Wars & The Chaotic 90s

As the web exploded in popularity into the mid-1990s, a fierce rivalry emerged primarily between Netscape Navigator and Microsoft Internet Explorer. This period is known as the “Browser Wars.”

In a race to attract users, browser vendors began inventing their own proprietary, non-standard HTML tags. This broke the universal nature of the web, as pages designed “Best Viewed in Netscape” would look broken in Internet Explorer, and vice versa.

The Era of “Div Soup” and Tables

Before CSS (Cascading Style Sheets) was reliably supported, developers hijacked structural tags to force visual layouts. The most notorious hack was using <table> tags—originally meant for tabular data—to create complex page grids, nesting tables within tables until the code became an unreadable mess.

Infamous 90s Tags

This era also birthed tags focused entirely on flashy presentation rather than structure, many of which are now universally mocked (and officially deprecated):

• <blink>: Invented by Netscape. It caused text to flash on and off rapidly. It was incredibly distracting, caused accessibility issues, and became the quintessential symbol of 90s web design excess.
• <marquee>: Microsoft’s answer to <blink>. It caused text or images to scroll horizontally across the screen like a news ticker.
• <font>: Allowed developers to inline fonts, sizes, and colors directly into the HTML, permanently entangling styling with structure.
• <center>: A structural tag whose only purpose was to center-align its children visually.

These presentation-focused tags bloated the language. The web community realized that separating Structure (HTML) from Presentation (CSS) was crucial for the web’s future.

The XML Detour

In the late 90s and early 2000s, the W3C (World Wide Web Consortium) attempted to fix HTML’s sloppiness by enforcing the strict rules of XML. This resulted in XHTML.

XHTML demanded absolute perfection. If you forgot to close a tag (e.g., <p>Hello instead of <p>Hello</p>), or forgot a trailing slash on an empty tag (e.g., <img src="a.jpg"> instead of <img src="a.jpg" />), the browser was supposed to immediately stop rendering and display a “Yellow Screen of Death” error.

While theoretically pure, this proved far too brittle for the chaotic, human-authored reality of the web. The community ultimately rebelled against XHTML’s draconian strictness.

HTML5 & The Semantic Web

HTML5, officially finalized in 2014, was a massive paradigm shift. It rejected the strictness of XML, returning to HTML’s forgiving roots (“pave the cowpaths”). But more importantly, it introduced the concept of Semantic HTML.

Instead of relying on generic <div> (division) tags with CSS classes for layout grids (known as “Div Soup”), HTML5 introduced tags that explicitly described the meaning of the content they wrapped:

• <header> and <footer>
• <nav>: For primary navigation links.
• <main>: For the dominant content of the page.
• <article>: For self-contained, syndicatable content (like a blog post).
• <section>: For a generic thematic grouping of content.
• <aside>: For tangentially related content (like a sidebar).

These semantic tags don’t inherently look any different than a <div> in the browser, but they revolutionized web accessibility. Screen readers and search engines can now mathematically understand the hierarchy and purpose of a page’s layout.

Interactive Semantic Structure Visualizer

Below, explore the difference between a legacy “Div Soup” layout and a modern Semantic HTML5 structure. Hover over or tap the wireframe sections to see the correct HTML5 tag that should be used to define that region.