The Big Picture

Markdown is how notes are written. A web page needs stricter labels so a browser knows what is a heading, a link, or the page at all.

HTML is those labels. It does not “think.” It wraps text and files so Chrome, Safari, or your phone can draw a page. These Aspi 101 pages are HTML files. Cursor writes them. A browser shows them.

The House Analogy

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

People inside doing work→JavaScript — skip this for now

A door with a sign→An <a> link

A window→An <img> image

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.

Key Terms

Tag

A label in angle brackets: <p>. Most come in pairs: <p>…</p>.

Element

Opening tag + content + 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.

A Page Is a File

A website is not a mysterious object in the cloud. At the smallest: a folder with an index.html file. Double-click it (or drag it into Chrome). The browser draws whatever the tags say.

In Cursor, open the folder, edit a heading, save, refresh the browser. That loop is enough to learn.

This is the title

This is a paragraph.

Some tags are empty — they do not wrap text. An image is like that: <img src="photo.jpg" alt="…">. No </img>. Angle brackets are not decoration. <p> is a tag. Writing “p” in a sentence is just the letter p.

The Skeleton

index.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. 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>.

Tags You Actually Need

Tag	Job	Markdown cousin
`<h1>`–`<h3>`	Headings	`#` `##` `###`
`<p>`	A paragraph	A blank line
`<strong>`	Bold	`bold`
`<em>`	Italic	`italic`
`<ul>` + `<li>`	Bullet list	`- item`
`<a>`	A link	`[text](url)`
`<img>`	An image	`![alt](file)`
`<code>`	Inline code	backticks

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

Links and Images

Links

link

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

href = where it goes. The text between the tags = what you click. Relative links stay on your site: href="/101/markdown/".

Images

image

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

src = the file. alt = a text description — required for accessibility, useful when the image fails, and the words machines can read. A missing image is almost always a wrong path.

Just Enough CSS

HTML is the rooms. CSS is the paint. You will see class="lede" on a tag, and a style that says what .lede looks like.

You do not need to write CSS to understand a page. When a page “looks wrong,” check 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 that HTML cannot explain.

HTML vs Markdown

	Markdown	HTML
Best at	Notes, READMEs, skills	Web pages
Forgiving	Yes	Less — close your tags
Looks like	`# Title`	`<h1>Title</h1>`
Where	Obsidian, GitHub, `SKILL.md`	Browsers, this site

A skill is Markdown. This 101 page is HTML. 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.

Where You'll See It

goaspi.com/101/… is an index.html in a folder. “View Page Source” is the HTML the server sent. Inspect (right-click) shows the skeleton live — you cannot break the live site from Inspect. You can break your own file in Cursor. GitHub is the undo button.

Common Mistakes

Mistake	Better
Forgetting `</p>` or `</h1>`	Close what you open
Visible text in `<head>`	Visible stuff goes in `<body>`
Five `<h1>`s	One `<h1>`, then `<h2>`
Wrong `href` / `src`	Check the folder; leading `/` vs relative
Editing in Inspect and expecting it to save	Edit the file in Cursor, then refresh

Cheat Sheet

Title → <h1>. Section → <h2>. Paragraph → <p>. Link → <a href="url">text</a>. Image → <img src="file" alt="…">. Preview → open in a browser, refresh after save. Notes instead of a page → Markdown 101.

Glossary

HTML = structure of a web page. Tag = label in angle brackets. Element = opening + content + closing. Attribute = extra data (href, src, alt). Head = metadata. Body = the visible page. CSS = how it looks. Browser = reads HTML and draws.