Links: the thing that made it a web

The <a> tag turns isolated documents into a web, and its href decides where you land.

• Absolute URL for another site, relative path for your own pages
• mailto: opens email, tel: dials a phone, #section-id jumps within the page
• target="_blank" opens a new tab — reserve it for external links
• Write link text that describes the destination; never "Click here"

Images and the attribute everyone skips

<img> is self-closing — there is no </img> — and alt is the attribute beginners drop first and regret most.

• src points at the file; alt describes it
• A screen reader reads alt aloud, a search engine indexes it, and if the image 404s the alt shows in its place
• Good alt describes the content ("Golden retriever playing fetch"), not the medium
• Set width and height so the browser reserves space and the page doesn't jump
• Formats: .jpg photos · .png logos and transparency · .svg icons · .webp smallest at best quality

Text, lists, and tables

Text-level tags make prose precise, lists carry meaning, and tables are for data — never layout.

• <sub> and <sup> for chemistry and maths, <mark> to highlight, <small> for fine print
• <blockquote> and <q> quote; <pre> keeps whitespace; <code> for snippets; <abbr> expands on hover
• <ul> when order carries no meaning, <ol> when it does
• A nested list goes inside the parent <li>, not beside it
• <caption> names a table; <thead>/<tbody>/<tfoot> divide it; <th> marks header cells
• colspan/rowspan stretch a cell — a spanned cell means one fewer <td> in that row

Grouping: div and span

Neither <div> nor <span> means anything on its own — they are empty boxes you style.

• <div> is block-level: it starts on a new line and fills the width
• <span> is inline: it wraps a phrase without breaking the sentence
• Block versus inline is the rule for the whole language, not just these two tags
• Knowing which is which explains why some elements stack and others sit side by side