# HTML for Complete Beginners

A practical guide to HTML — written for someone who has never looked at a web page’s source and does not want to become a front-end developer.

---

## Table of Contents

1. [The Big Picture](#the-big-picture)
2. [Key Terms (Plain English)](#key-terms-plain-english)
3. [A Page Is Just a File](#a-page-is-just-a-file)
4. [Tags](#tags)
5. [The Skeleton](#the-skeleton)
6. [The Tags You Actually Need](#the-tags-you-actually-need)
7. [Links and Images](#links-and-images)
8. [Just Enough CSS](#just-enough-css)
9. [HTML vs. Markdown](#html-vs-markdown)
10. [Where You'll See It](#where-youll-see-it)
11. [Common Mistakes and How to Avoid Them](#common-mistakes-and-how-to-avoid-them)
12. [Quick Reference Cheat Sheet](#quick-reference-cheat-sheet)
13. [Glossary](#glossary)

---

## The Big Picture

### What problem does HTML solve?

[Markdown](https://goaspi.com/101/markdown/) is how notes and READMEs are written. A **web page** needs a stricter set of instructions so a browser — Chrome, Safari, your phone — knows what is a heading, what is a link, and what is the page at all.

**HTML** (HyperText Markup Language) is that set of instructions. It is not a programming language. It does not “think.” It is labels around text and files, so the browser can draw a page.

These Aspi 101 pages are HTML files. Cursor writes them. A browser shows them. You do not have to memorize every tag. You need to recognize the shape so a page that “broke” is readable, not magic.

It is designed for:

- **Web pages** — anything with a URL
- **Structure** — heading, paragraph, list, link, image
- **Talking to a browser** — not to Word, not to Notion

### The house analogy

| Real world | HTML equivalent |
|---|---|
| The lot and the address | The file + the URL |
| The frame of the house | HTML — rooms, doors, what exists |
| Paint, furniture, lighting | **CSS** — how it looks |
| The people inside doing work | **JavaScript** — behavior (skip this for now) |
| A door with a sign | An `<a>` link |
| A window | An `<img>` image |
| The blueprint’s room names | Tags: `<h1>`, `<p>`, `<ul>` |

HTML = what is on the page. CSS = how it looks. You can ship a page with almost no CSS. You cannot ship a page with no HTML.

### What makes HTML different

1. **The browser reads tags, not toolbar buttons.** `<h1>Hello</h1>` is a title because of the tags, not because it is bold in your editor.
2. **Unclosed tags cause weird layouts.** Markdown is forgiving. HTML is less so. Close what you open.
3. **It is still text.** Open `index.html` in Cursor and you can read it. Same idea as a `.md` file, different labels.
4. **A page is a file (or a set of files).** Putting it on the internet is a separate step. This guide is the language. “Going live” is later.

---

## Key Terms (Plain English)

### HTML
The labels a browser uses to draw a page. Stands for HyperText Markup Language — ignore the expansion. Think “the structure of a page.”

### Tag
A label in angle brackets: `<p>`. Most tags come in pairs: `<p>…</p>`.

### Element
A complete piece: the opening tag, the content, the closing tag. `<h1>Aspi 101</h1>` is one element.

### Attribute
Extra info inside the opening tag. `href` on a link, `src` on an image.

### `index.html`
The default file a browser looks for in a folder. The “front door” of a site or a guide.

### CSS
The look: colors, spacing, fonts. Usually a `<style>` block or a `.css` file. Not required to understand HTML.

### Browser
The app that reads HTML and draws the page. Not Cursor. Cursor edits the file; the browser shows it.

---

## A Page Is Just a File

A website is not a mysterious object in the cloud. At the smallest: a folder with an `index.html` file.

```
my-page/
└── index.html
```

Double-click that file (or drag it into Chrome). The browser draws whatever the tags say. No server required for a first look.

In [Cursor](https://goaspi.com/101/cursor/), open the folder, open `index.html`, edit a heading, save, refresh the browser. That loop is enough to learn.

---

## Tags

A tag is a label in angle brackets.

```html
<h1>This is the title</h1>
<p>This is a paragraph.</p>
```

- `<h1>` = start of a top heading
- `</h1>` = end of that heading
- The slash marks the close

Some tags are empty — they do not wrap text. An image is like that:

```html
<img src="photo.jpg" alt="The product on a white background">
```

No `</img>`. The information lives in the attributes (`src`, `alt`).

**Angle brackets are not decoration.** `<p>` is a tag. Writing `p` in a sentence is just the letter p.

---

## The Skeleton

Almost every page has the same bones:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Aspi 101</title>
</head>
<body>
  <h1>Hello</h1>
  <p>This is the page.</p>
</body>
</html>
```

| Piece | Job |
|---|---|
| `<!DOCTYPE html>` | “This is a modern HTML file.” Put it first. |
| `<html>` | The whole document. |
| `<head>` | Stuff *about* the page — title, fonts, styles. Not visible as body text. |
| `<title>` | The tab name in the browser. |
| `<body>` | What you actually see. |

If your heading is in `<head>`, you will not see it on the page. Visible content goes in `<body>`.

---

## The Tags You Actually Need

You can read (and write) most pages with a handful:

| Tag | Job | Markdown cousin |
|---|---|---|
| `<h1>`–`<h3>` | Headings, biggest to smaller | `#` `##` `###` |
| `<p>` | A paragraph | A blank line |
| `<strong>` | Strong / bold | `**bold**` |
| `<em>` | Emphasis / italic | `*italic*` |
| `<ul>` + `<li>` | Bullet list | `- item` |
| `<ol>` + `<li>` | Numbered list | `1. item` |
| `<a>` | A link | `[text](url)` |
| `<img>` | An image | `![alt](file)` |
| `<code>` | Inline code | `` `code` `` |
| `<pre>` | A preformatted block (often code) | fenced ``` blocks |
| `<table>`, `<tr>`, `<th>`, `<td>` | Tables | Markdown tables |
| `<section>` | A chunk of the page | A `##` section |

Lists nest: the `<ul>` wraps the items, each item is `<li>`.

```html
<ul>
  <li>Markdown</li>
  <li>HTML</li>
  <li>Skills</li>
</ul>
```

One `<h1>` per page is the usual habit — the name of this page. Then `<h2>` for sections, `<h3>` for subsections. Same idea as Markdown headings.

---

## Links and Images

### Links

```html
<a href="https://goaspi.com/101/">All 101 Guides</a>
```

- `href` = where it goes (the URL)
- The text between the tags = what you click

Relative links stay on your site: `href="/101/markdown/"` goes to the Markdown guide on the same domain.

### Images

```html
<img src="/favicon.png" alt="Aspi logo">
```

- `src` = the file or URL
- `alt` = a text description. Required for accessibility, useful when the image fails to load, and the words machines can read.

If the image is missing, check the path. `src="photo.jpg"` means “a file named photo.jpg next to this HTML file.” A leading `/` means “from the root of the site.”

---

## Just Enough CSS

HTML is the rooms. CSS is the paint.

You will see it as a `<style>` block in `<head>`, or as `class="…"` on tags:

```html
<p class="lede">Visual, animated beginner guides.</p>
```

```css
.lede { color: #b9b0a4; font-size: 1.15rem; }
```

A **class** is a name you stick on an element so CSS can target it. You do not need to write CSS to understand a page. When a page “looks wrong,” look at the HTML structure first (wrong tag, unclosed tag, content in the head). When it “looks ugly but the words are right,” that is CSS.

Skip JavaScript until a page is clearly doing something on click or load that HTML cannot explain. Most 101 pages are HTML + CSS.

---

## HTML vs. Markdown

| | Markdown | HTML |
|---|---|---|
| **Best at** | Notes, READMEs, skills, docs | Web pages |
| **Forgiving** | Yes | Less — close your tags |
| **Looks like** | `# Title` | `<h1>Title</h1>` |
| **Where** | Obsidian, GitHub, `SKILL.md` | Browsers, this site |
| **You write it when** | Thinking and documenting | Shipping a page |

A [skill](https://goaspi.com/101/skills/) is Markdown. This 101 *page* is HTML. Cursor can write both. Do not convert your vault to HTML. Do not write a landing page in Markdown and expect a browser to style it like this site.

Some tools turn Markdown *into* HTML for you (GitHub READMEs, many blogs). That is fine. You are still looking at HTML in the browser; Markdown was the source.

---

## Where You'll See It

| Place | What you are looking at |
|---|---|
| `goaspi.com/101/…` | An `index.html` file in a folder |
| “View Page Source” in a browser | The HTML the server sent |
| Cursor, on these guides | The same file, editable |
| An email “made with HTML” | Tags inside an email client — same idea, messier |
| A React / Next app | HTML generated from other files — still HTML in the browser |

Inspect a page when you are curious: right-click → Inspect. You will see the skeleton live. You cannot break the live site from Inspect. You *can* break your own file in Cursor — [GitHub](https://goaspi.com/101/github/) is the undo button.

---

## Common Mistakes and How to Avoid Them

| Mistake | What happens | Better |
|---|---|---|
| Forgetting `</p>` or `</h1>` | The rest of the page inherits the wrong style | Close what you open |
| Putting visible text in `<head>` | It does not show | Visible stuff goes in `<body>` |
| Using `<h1>` five times | No clear page title | One `<h1>`, then `<h2>` |
| `href` or `src` pointed at the wrong path | Dead link / broken image | Check the folder; leading `/` vs relative |
| Treating HTML as Markdown | Tags show up as text, or layout dies | Different language, different file |
| Editing in the browser Inspect and expecting it to save | Refresh wipes it | Edit the file in Cursor, then refresh |
| Huge paste from the internet | Unknown scripts, broken layout | Start from the skeleton above |

---

## Quick Reference Cheat Sheet

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab name</title>
</head>
<body>
  <h1>Page title</h1>
  <p>A paragraph with a <a href="/101/">link</a>.</p>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
  <img src="photo.jpg" alt="What the photo is">
</body>
</html>
```

| I want to… | Write |
|---|---|
| A title | `<h1>…</h1>` |
| A section heading | `<h2>…</h2>` |
| A paragraph | `<p>…</p>` |
| A link | `<a href="url">text</a>` |
| An image | `<img src="file" alt="…">` |
| Bold | `<strong>…</strong>` |
| A bullet | `<ul><li>…</li></ul>` |
| Preview | Open the file in a browser, refresh after save |
| Edit | [Cursor 101](https://goaspi.com/101/cursor/) |
| Notes instead of a page | [Markdown 101](https://goaspi.com/101/markdown/) |

---

## Glossary

| Term | Definition |
|---|---|
| **HTML** | The structure language of a web page |
| **Tag** | A label in `<angle brackets>` |
| **Element** | Opening tag + content + closing tag |
| **Attribute** | Extra data on a tag (`href`, `src`, `alt`, `class`) |
| **`index.html`** | Default page file in a folder |
| **`<head>`** | Metadata — title, styles — not the visible article |
| **`<body>`** | The visible page |
| **CSS** | How the page looks |
| **Class** | A name on an element so CSS can style it |
| **Browser** | Reads HTML and draws the page |
| **Source** | The HTML text itself |

---

The browser is just reading labels. Open `index.html`, change an `<h1>`, refresh. That is HTML.

More Aspi 101: [Markdown](https://goaspi.com/101/markdown/) · [Skills](https://goaspi.com/101/skills/) · [Cursor](https://goaspi.com/101/cursor/) · [CLI, API & MCP](https://goaspi.com/101/how-programs-talk/) · [All 101 Guides](https://goaspi.com/101/).