Understanding HTML: History, Purpose, and Usage

HTML (HyperText Markup Language) is the foundational language used to structure content on the web. It is currently standardized by the WHATWG—the Web Hypertext Application Technology Working Group—an organization formed by contributors from major browser vendors including Google, Mozilla, Apple, and Microsoft.

A Brief History of HTML Standards

Originally, the W3C (World Wide Web Consortium) was responsible for defining the HTML standard. However, over time, the W3C's push toward XHTML—a stricter, XML-based version of HTML—proved problematic. Developers were required to follow more rigid rules, which led to frustration and incompatibility across browsers.

Recognizing this, browser vendors began to push back. They collaborated to form WHATWG and introduced a more pragmatic approach to web standards, culminating in what we now call HTML5. On May 28, 2019, W3C officially acknowledged WHATWG’s version of HTML as the authoritative standard.

HTML Versions Timeline

  • HTML 1.0 — 1993
  • HTML 2.0 — 1995
  • HTML 3.2 — January 1997
  • HTML 4.01 — December 1997
  • HTML5 — Introduced in the late 2000s, officially recognized in 2019

HTML5 is more than just a markup language—it represents a suite of technologies that includes HTML itself, along with APIs and standards like WebGL, SVG, and more.

How HTML Is Delivered to the Browser

HTML content can be served to the browser in several ways:

  • Server-side rendering: HTML is generated dynamically by backend frameworks such as Laravel, Rails, Node.js, Next.js, or Django, based on request parameters or session data.
  • Client-side rendering: JavaScript frameworks like React.js, Vue.js, and Angular generate HTML in the browser on the fly.
  • Static files: HTML can be written in plain .html or .htm files and served directly by a web server.

The Role of Tags in HTML

HTML documents are structured using tags, which wrap content and assign semantic meaning to it. For example:

  • A paragraph is created using the <p> tag

Code Block Loading...

  • An unordered list is created using the <ul> tag, with each item wrapped in <li>:

Code Block Loading...

When a browser receives an HTML page, it interprets these tags and renders the content according to predefined rules. Some visual styles—like blue underlined links or bulleted lists—are built-in defaults.

HTML’s Purpose: Meaning Over Appearance

It’s important to understand that HTML is not a presentational language. Its primary role is to define the structure and meaning of content. Visual styling is handled separately using CSS (Cascading Style Sheets), which allows developers to control how elements appear across different devices and screen sizes.

HTML Page Structure

Let’s walk through the anatomy of a properly structured HTML page.

1. Document Type Declaration

Every HTML document begins with a DOCTYPE declaration, which tells the browser what type of document it’s dealing with and which version of HTML to expect. For modern HTML, this is the standard declaration:

Code Block Loading...

2. The <html> Element

Immediately following the DOCTYPE, the document begins with the <html> tag:

Code Block Loading...

The <html> element wraps the entire content of the page. It has an opening tag (<html>) and a closing tag (</html>), like most HTML elements.

3. Tag Pairs and Self-Closing Tags

HTML elements typically come in pairs:

Code Block Loading...

However, some tags are self-closing, meaning they don’t wrap any content and don’t require a closing tag. Examples include <br>, <img>, and <hr>.

4. Inside the <html> Element

The <html> element contains two main sections:

Code Block Loading...

The <head> Section

The <head> contains metadata and resources that help the browser render the page correctly. This includes:

  • <title> — The page title shown in the browser tab
  • <meta> — Metadata like character encoding and viewport settings
  • <link> — External stylesheets
  • <style> — Internal CSS
  • <script> — JavaScript files or inline scripts

These elements are not directly visible on the page but are essential for proper rendering and SEO.

The <body> Section

The <body> contains the visible content of the page—everything users see and interact with, such as:

  • Headings (<h1> to <h6>)
  • Paragraphs (<p>)
  • Lists (<ul>, <ol>, <li>)
  • Images (<img>)
  • Links (<a>)
  • Buttons, forms, and more

Tags vs Elements in HTML

You might hear the terms tag and element used interchangeably—but they’re not quite the same. Let’s break down the difference.

What Is an HTML Element?

An element is the complete structure that includes:

  • A starting tag
  • The content inside (which could be text or other elements)
  • A closing tag

For example, this is a complete <p> element:

Code Block Loading...

Here:

  • <p> is the starting tag
  • A paragraph of text is the content
  • </p> is the closing tag

Together, they form the <p> element.

What Is a Tag?

A tag is just one part of an element. It can be:

  • A starting tag like <p>
  • A closing tag like </p>

Some elements don’t have closing tags at all. These are called self-closing elements, and they don’t contain any content. Examples include:

Code Block Loading...

A Note on Terminology

In casual writing or conversation, you might see tag and element used interchangeably. That’s okay—unless we’re being specific about the starting tag or closing tag, in which case the distinction matters.

Understanding HTML Attributes

HTML elements can include attributes—extra bits of information added to the starting tag to modify behavior or provide metadata.

Attribute Syntax

Attributes follow a simple key="value" format. For example:

Code Block Loading...

You can use either double quotes or single quotes around the value, but double quotes are the standard convention in HTML.

Multiple Attributes

You can include multiple attributes in a single tag:

Code Block Loading...

Some attributes are boolean, meaning they don’t require a value—just the presence of the key is enough. For example:

Code Block Loading...

Here, defer is a boolean attribute that tells the browser to delay script execution until after the page loads.

Common Attributes: class and id

Two of the most frequently used attributes are:

  • class — Used to group elements for styling or scripting. Multiple elements can share the same class.
  • id — A unique identifier for a single element. Each id must be unique within the page.

Example with multiple classes:

Code Block Loading...

Using hyphens (-) to separate words in class names is a common convention, but not a requirement.

Specialized vs General Attributes

Some attributes are tag-specific and only apply to certain elements (e.g., src for <img> or <script>). Others, like id, class, and style, are general-purpose and can be used across many elements.

For example, the style attribute allows you to apply inline CSS directly:

Code Block Loading...

HTML Is Case-Insensitive

HTML is a case-insensitive language, which means that tag names can be written in uppercase, lowercase, or a mix of both—and the browser will interpret them the same way.

In the early days of the web, writing tags in uppercase was common:

Code Block Loading...

However, the modern convention is to use lowercase for all tag names:

Code Block Loading...

While both versions are technically valid, using lowercase is now the standard practice. It improves readability and aligns with best practices recommended by HTML specifications and style guides.

Whitespace in HTML: What You Need to Know

Whitespace in HTML is important—but it doesn’t always behave the way you might expect.

Whitespace Is Collapsed by Default

In HTML, multiple spaces, tabs, or line breaks are collapsed into a single space when rendered by the browser. For example, all of the following produce the same visual output:

Code Block Loading...

This behavior is controlled by the browser’s default CSS rendering rules.

Controlling Whitespace with CSS

If you want to preserve or customize whitespace behavior, use the white-space CSS property. It allows you to control how spaces, tabs, and line breaks are handled. For example:

Code Block Loading...

You can learn more about this in the CSS specification.

Writing Clean, Readable HTML

Even though whitespace is collapsed, it’s still important for code readability. Use formatting that makes your HTML easy to scan and maintain. For example:

Code Block Loading...

For nested elements, consistent indentation (2 or 4 spaces) improves clarity:

Code Block Loading...

Adding Extra Space the Right Way

If you need extra spacing, don’t rely on adding more spaces in your HTML. Instead, use CSS for layout and spacing. Trying to force space with raw HTML can be frustrating and unreliable.

In rare cases, you can use the &nbsp; entity (non-breaking space):

Code Block Loading...

But use it sparingly—CSS is the preferred method for controlling visual presentation.