What is HTML, really?

Why this matters

HTML (HyperText MarkupText wrapped in tags that say what each piece of content is, rather than how it should look. Language) is the first thing the browser receives and the skeleton every other technology hangs on. CSS styles HTML elements; JavaScript reads and changes them; screen readers and search engines read their meaning. If the HTML is muddled, everything built on top of it is harder.

Markup describes meaning, not looks

HTML is a markup language, not a programming language. It has no loops or variables. Instead, you wrap pieces of content in tags that say what each piece is:

<h1>Trail Running Club</h1>
<p>We meet every Saturday at 8am.</p>

The <h1> says "this is the main heading of the page". It does not say "make this big and bold". Browsers do show headings large by default, but that is just a default style that you will replace with CSS. Choose tags by meaning, then style them however you like.

Elements, tags and nesting

An elementA piece of an HTML document, usually an opening tag, some content and a closing tag. is usually an opening tag, some content and a closing tag:

<p>This is a <strong>very</strong> short paragraph.</p>

• <p> opens the paragraph and </p> closes it.
• <strong> is nested inside the paragraph and closed before the paragraph closes. Elements nest like boxes inside boxes; they never overlap.
• A few elements are voidDescribes an element such as meta, img, br or input that has no content and no closing tag. (empty) and have no closing tag, such as <meta>, <img>, <br> and <input>.

Tag names are not case-sensitive, but lowercase is the universal convention.

The minimal valid document

Every HTML page should start from this skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trail Running Club</title>
</head>
<body>
  <h1>Trail Running Club</h1>
  <p>We meet every Saturday at 8am.</p>
</body>
</html>

Line by line:

• <!DOCTYPE html> tells the browser to use modern standards mode. Without it, browsers fall back to "quirks modeA rendering mode that imitates old browser bugs, used when a page has no doctype.", which imitates old browser bugs and makes CSS behave strangely.
• <html lang="en"> is the root element. The lang attribute tells screen readers which pronunciation to use and helps translation tools.
• <head> holds information about the page that is not shown in the page itself.
• <meta charset="utf-8"> declares the character encoding so accented letters, symbols and non-Latin scripts display correctly. Put it first in the head.
• <meta name="viewport" ...> makes phones show the page at its real width instead of a zoomed-out desktop view. You will rely on it in Module 4.
• <title> is the text in the browser tab, in bookmarks and in search results. Every page needs a short, specific title.
• <body> holds everything the visitor actually sees.

Browsers forgive, but do not rely on it

If you forget a closing tag or leave out <head>, the browser quietly repairs the document using rules defined in the HTML standard. That forgiveness is why broken HTML often looks fine. But the repaired tree may not be what you meant, and CSS or JavaScript that targets it can misbehave. The W3C Markup Validation ServiceA free checker at validator.w3.org that lists every HTML error in a document with line numbers. (validator.w3.org) checks your document and lists every error, with line numbers. Running it is a habit worth building now.

Worked example: inspecting the DOM

Save the skeleton above as index.html and open it in your browser (double-click the file, or drag it into a browser window). Now right-click the heading and choose Inspect. The Elements panel shows the DOM tree the browser built: html with head and body inside, and your heading and paragraph inside body.

Delete the <!DOCTYPE html> line, reload, and type document.compatMode into the Console tab. It now says "BackCompat" (quirks mode). Put the doctype back, reload, and it says "CSS1Compat" (standards mode). That one line changes how the whole page is interpreted.

Comments

Notes for humans go inside comments, which browsers ignore:

<!-- Navigation goes here once we have more pages -->

Anyone can read comments with "View source", so never put passwords or private notes in them.

Common mistakes

• Choosing tags for their look. Using <h3> because it is "the right size" breaks the outline of the page; pick the right level and adjust the size with CSS.
• Overlapping tags such as <p><strong>text</p></strong>. Close the inner element first.
• Missing doctype or charset, which leads to quirks mode or garbled characters.
• Content in the head. Visible content belongs in <body>.
• A generic title like "Untitled" or "Home". Titles are what people see in tabs and search results.

Quick recap

• HTML marks up meaning: you choose tags for what content is, not how it looks.
• Elements nest; void elements like <meta> and <img> have no closing tag.
• Every page starts with a doctype, <html lang>, a head with charset, viewport and title, and a body.
• Validate with validator.w3.org; inspect the DOM with developer tools.

Try it

Open the Do tab. The starter document works in the browser but is missing several required parts. Turn it into a valid, minimal document.