Reference

🧱 HTML Cheat Sheet

Every brick you have learned, in one place. Print me out!

The pattern

<tag attribute="extra info"> content </tag>
 ↑opening tag                          ↑closing tag (has a /)

The skeleton (every page starts like this)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Shows in the browser TAB</title>
    <style> /* CSS goes here */ </style>
  </head>
  <body>
    ...everything people SEE goes here...
    <script> /* JavaScript goes here, at the end */ </script>
  </body>
</html>

Content bricks

Tag	What it does	Learned in
`<h1>...<h6>`	Headlines, biggest to smallest. One `<h1>` per page.	L1, L3
`<p>`	A paragraph of normal text.	L1
`<strong>`	Bold, important words.	L3
`<ul> + <li>`	Bullet list + its items (bricks inside bricks).	L3
`<ol> + <li>`	Numbered list + its items.	L3
`<img src="..." alt="...">`	A picture. No closing tag! `src`=which picture, `alt`=words if it can't be seen.	L3
`<a href="...">`	A link. `href`=where to go (a URL or a file next door).	L4
`<button>`	A clickable button (give it an `id` so JS can find it).	L8
`<div>`	A plain box for grouping bricks. Name it with `class="..."`.	L6

Meaningful boxes (semantic tags)

Same as <div>, but their NAMES tell everyone (humans and AIs!) what the box is for:

Tag	What it's for
`<header>`	The top of the page — usually the hero section
`<main>`	The main content in the middle
`<section>`	One chapter of the page (features, reviews...)
`<footer>`	The bottom strip — small print and links

Attributes you know

Attribute	Meaning
`src="..."`	Which file/picture to load (on `<img>`, `<script>`)
`alt="..."`	Backup words for a picture
`href="..."`	Where a link goes (on `<a>`)
`class="..."`	A group name — many bricks can share it (CSS: `.name`)
`id="..."`	A unique name — only ONE brick has it (CSS: `#name`, JS: `getElementById`)

How to make and open a page

Create a file that ends in .html (like myshop.html) in a text editor.
Write your tags and content, then save (⌘S).
Open the file in a browser (double-click it, or drag it onto the browser).
Changed something? Save again, then press refresh (⌘R) in the browser.