What Is HTML?

Course 1 · Ch 1
What HTML Is — Document Structure
The doctype, the html/head/body skeleton, and what every single web page is actually built from

HTML (HyperText Markup Language) is not a programming language — it has no logic, no calculations, no conditionals. It's a markup language: plain text wrapped in tags that describe what each piece of content is (a heading, a paragraph, a link) rather than how it should look. That separation — structure in HTML, appearance in CSS, behaviour in JavaScript — is the foundation everything else in web development builds on.

The Minimal Valid HTML Document

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, world!</h1> </body> </html>

Every single web page, no matter how complex, is built around this same skeleton. Breaking it down piece by piece:

<!DOCTYPE html>
Tells the browser "interpret this as modern HTML5" — without it, browsers fall back to older, inconsistent rendering quirks from decades ago. Must always be the very first line.
<html>...</html>
The root element — everything else in the document lives inside this single pair of tags.
<head>...</head>
Metadata about the page — title, character encoding, linked stylesheets/scripts. Nothing inside <head> is visible on the page itself.
<title>...</title>
The text shown in the browser tab and used as the default bookmark name — required inside <head>.
<body>...</body>
Everything the visitor actually sees and interacts with lives here — every heading, paragraph, image, button, and link.
head vs body, in one sentence
If a piece of content is meant to be visible on the page, it goes in <body>. If it's information aboutthe page itself — title, character set, links to CSS files — it goes in <head>.

Tags — Opening, Closing, and Self-Closing

Most HTML elements come in pairs: an opening tag and a matching closing tag, with content between them.

<p>This is a paragraph.</p>

Some elements never contain content and don't need a closing tag at all — these are void elements, and Chapter 5 (images) and Chapter 7 (forms) both use several of them.

<img src="photo.jpg" alt="A description"> <br> <hr>

Attributes — Adding Information to a Tag

Attributes live inside the opening tag, as name="value" pairs, and add extra information or behaviour to an element. The src and alt in the <img> example above are both attributes.

id="..."
A unique identifier for one specific element — used by CSS and JavaScript to target it precisely. Must be unique within the whole page.
class="..."
A label that can be shared across many elements — the primary way CSS targets groups of similar elements (full coverage in the CSS courses).
lang="..."
Declares the document's (or an element's) language — affects screen readers, spell-check, and search engines. Usually set once on <html> itself: <html lang="en">.
Always quote attribute values
<img src=photo.jpg> often works in practice, but it's technically invalid and breaks the moment the value contains a space or special character. <img src="photo.jpg"> always works correctly — quoting consistently from the start avoids a class of bug that only shows up later.

Nesting and Indentation

Elements can contain other elements — and consistent indentation, while not required by the browser at all, makes a document's structure genuinely readable to a human looking at the source.

<body> <h1>Page Title</h1> <p>Some text with <strong>emphasis</strong> inside it.</p> </body>

Chapter 1 Quick Reference

  • <!DOCTYPE html> — always the first line, triggers modern rendering
  • <html> — the root element containing everything else
  • <head> — metadata, not visible on the page; <body> — everything visible
  • <title> — required inside <head>, shown in the browser tab
  • Opening/closing tag pairs wrap content; void elements (img, br, hr) never do
  • Attributes — name="value" pairs inside the opening tag; always quote the value
  • id — unique per page; class — shareable across many elements
  • Next chapter: text basics — headings, paragraphs, and text formatting tags