Semantic HTML and accessible forms

Semantic HTML means picking the element that describes what the content is, not how it looks. Browsers, search engines and screen readers all read that meaning, and screening questions check whether you know it.

Page structure elements

A typical page uses <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>. Use one <main> per page. Use headings in order, one <h1> for the page topic, then <h2> for sections. Do not skip from <h2> to <h4> just because the smaller text looks better; change the size with CSS instead.

Buttons and links

A link goes somewhere; a button does something. Use <a href> for navigation and <button> for actions such as opening a menu. A clickable <div> cannot be reached with the Tab key and is not announced as a control, so it fails keyboard users. Remember that a <button> inside a form submits it unless you set type="button".

Forms that work for everyone

Every input needs a visible label linked to it:

<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">

The for value must match the input's id. Placeholder text is not a label, because it disappears as soon as the user types. Pick the right type: email, tel, url and date give better mobile keyboards and basic validation for free. Group related radio buttons inside <fieldset> with a <legend> so the question is read with each option.

Images and alt text

• Informative image: describe what it shows in context, for example alt="Bar chart of sales rising each quarter".
• Decorative image: use alt="" so screen readers skip it.
• Image inside a link: describe where the link goes, not the picture.
• Never start with "image of"; the screen reader already says it is an image.

Quick checklist

1. Can you reach and use every control with Tab, Enter and Space?
2. Does every input have a linked label?
3. Do headings form a sensible outline?
4. Does every image have a suitable alt, empty or descriptive?