Common tags — h1, p, ul, a, img, div

The 6 tags you'll use 90% of the time. Change the tag name, see the rendering change.

index.html v3.1

<h1>This is a heading</h1>
<p>This is a paragraph of text. Paragraphs have margin above and below.</p>
<ul>
  <li>First list item</li>
  <li>Second list item</li>
</ul>
<a href="https://example.com">This is a link</a>
<div>This is a div — a generic container.</div>

Live preview updates as you type

🧠 How it works

h1-h6 — headings (h1 is largest, h6 smallest). Browsers add margin by default. p — paragraph. Block element, has margin. ul — unordered list (bullets). ol — ordered list (numbers). li — list item (must be inside ul/ol). a — anchor (link). href is the URL. target='_blank' opens in a new tab. img — image. src is the URL, alt is the description (required for accessibility). div — generic block container. span — generic inline container. Use them when no semantic tag fits.

✏️ Try these changes

Change h1 to h6
→ text becomes much smaller
Change <ul> to <ol>
→ bullets become numbers
Add target="_blank" to the <a>
→ link opens in a new tab
Add <img src="https://placekitten.com/200/100" alt="kitten">
→ image appears

Next lab →

Forms — input, label, button