01 · HTML Basics

HTML = HyperText Markup Language. It's not a programming language — it's the structure of a page. You describe what things are (a heading, a list, a table), and the browser draws them.

Why the name "HTML"? HyperText = text with links that jump you elsewhere ("hyper" = beyond — text that leaps beyond a straight line, instead of reading top-to-bottom like a book). Markup = the old printing tradition of "marking up" a manuscript with instructions before it was typeset — your tags are exactly those marks. Language = a fixed set of rules. So HTML = "text-with-links, marked up with tags." Once you see the name, you never forget what it does.

1. Tags — the building blocks

A tag wraps content and gives it meaning. Most tags come in an open + close pair, and the closing tag has a slash.

Every pair: open tag, content, close tag.

Gotcha you hit A global Find & Replace of li → tr also changed the letters li inside words: "Library" became "trbrary", "Rowling" became "Rowtrng". Find & Replace is a chainsaw, not a scalpel. Search for <li> (with brackets) or turn on Match Whole Word.

2. The page skeleton

Every HTML file starts with the same bones:

<!DOCTYPE html>
<html>
  <head>
    <title>City Library</title>
  </head>
  <body>
    <h1>City Central Library</h1>
  </body>
</html>

<head> = invisible metadata. <body> = visible content.

Gotcha you hit You once put a visible <p> paragraph inside <title>. Nothing showed up, because <title> lives in the invisible <head>. Rule of thumb: if you want to see it, it goes in <body>.

3. Common tags

Tag	What it is
`<h1>` … `<h6>`	Headings, biggest to smallest
`<p>`	A paragraph of text
`<ul>` / `<li>`	Unordered (bulleted) list + list items
`<ol>` / `<li>`	Ordered (numbered) list — browser numbers it for you
`<a href="...">`	A link to another page
`<!-- ... -->`	A comment — ignored by the browser, notes for you

Don't number lists by hand With <ol>, never type "1." "2." yourself — the browser does it. Add or remove an item and everything renumbers automatically.

4. Attributes

Extra info tucked inside the opening tag, written as name="value".

<a href="members.html">Members</a>

Here href is the attribute name and "members.html" is its value — the page the link points to. Attributes are how one tag does many different jobs.

Why <a> and href? <a> stands for anchor — it anchors one spot to another, like dropping an anchor that ties you to a place. href = hypertext reference — literally "the reference (address) this link points to." The names are abbreviations of what they do.

5. Tables

Three tags nest together to make rows and columns:

<table> — the whole grid (outer box)
<tr> — one table row
<th> — a header cell (bold) · <td> — a data cell

Header row uses <th>; data rows use <td>.

The golden rule of tables Every row must have the same number of cells. That's what keeps the columns lined up. 4 headers → 4 data cells in every row.

6. Forms

Forms collect input from the user. The key players:

Tag	Job
`<form>`	Wraps all the fields together
`<input>`	One field. Self-closing — no `</input>`!
`<label>`	The caption next to a field
`<button>`	Submits the form

The type attribute changes what an input accepts: type="text" type="email" type="number"

Linking a label to its input

A label's for must match the input's id. Same value on both sides = linked.

Now clicking the word "Email" jumps the cursor into the box — and screen readers know they belong together.

<form>
  <label for="fullname">Full Name</label>
  <input type="text" id="fullname">
  <button>Register</button>
</form>

Why bother linking? Click the caption word and the cursor jumps into the field — bigger click target, and it's how screen-reader users navigate the form. Free accessibility for one attribute.

← Back to contents · Next: CSS Basics →