Semantic HTML & Accessibility

Give page regions meaningful names

Semantic HTML uses elements that describe a region’s purpose. A page header belongs in <header>, primary links in <nav>, the unique page content in <main>, a grouped topic in <section>, and closing information in <footer>. A <div> is a generic container with no built-in meaning. Use it when you need grouping for layout and no semantic element fits.

As you hand-build your studio page, map its visual regions to meaningful elements before styling. A navigation landmark lets screen-reader users jump to links; a main landmark helps them skip repeated content. Clear structure also gives search engines better clues about what the page contains.

<header><h1>Studio name</h1></header>
<nav aria-label="Main navigation"><a href="#work">Work</a></nav>
<main><section id="work"><h2>Selected work</h2></section></main>
<footer><p>Contact details</p></footer>

Make headings a useful outline

Use one clear <h1> to identify the page’s main subject, then organise subsections with <h2> and nested topics with <h3>. Do not choose a heading level just because it looks the right size; CSS controls appearance. A logical order helps someone listening with a screen reader understand how topics relate and navigate between them.

For your product or portfolio sections, give each meaningful group an appropriate heading. Do not skip levels just to get a smaller default font.

Write useful image alternatives

An image’s alt text communicates its information to people who cannot see it. Describe the image’s relevant purpose, not every visual detail. For a decorative image that adds no information, use an empty alt value so assistive technology can skip it. If an image is the only content inside a link, its alternative should communicate the link’s purpose.

<img src="ceramic-cup.jpg" alt="Blue ceramic cup on a wooden shelf">

Check the page you build

Use landmarks, headings and alternatives deliberately in the quest’s index page. Then inspect the outline: can someone tell what the page is about, find navigation, and understand the sections without relying on visual position alone? Semantic markup helps accessibility and can improve search interpretation, but it does not automatically make a page accessible. Clear link text, keyboard access and readable content still matter.

Native controls give behaviour as well as meaning

A link with href navigates somewhere; a button performs an action. A clickable div does neither automatically. Use native controls so keyboard focus and activation work without recreating them. A quantity input needs a label:

<label for="practice-quantity">Quantity</label>
<input id="practice-quantity" type="number" min="0" value="0">
<button type="button">Update preview</button>

The label's for and the input's id must match; a placeholder disappears and is not a replacement for a label. IDs must be unique. A button inside a form defaults to submitting it, so use type="button" for an unrelated action.

A before/after meaning check

A div containing the word Work does not create navigation. Replacing it with <a href="#work">Work</a> makes it a real link; its target must exist. Similarly, a bold paragraph is not a section heading—use h2 for a subsection and style it with CSS. Semantics express purpose, not merely appearance.

Test without the pointer

Reload your local page and use Tab/Shift+Tab to move forward/backward. Each interactive control should receive focus in a sensible order with a visible indicator. Activate a link with Enter and a button with Enter or Space. Do not remove outlines without supplying an equally visible focus treatment.

Try reading the page headings and link labels in order without looking at layout. “Click here” repeated across a page gives less information than a specific destination label. A product image needs an alternative that conveys relevant product information; a decorative flourish can use alt="".

Before assessment, show meaningful landmarks, useful headings, working links, labelled inputs if present and a keyboard route through the page. This does not replace a complete accessibility audit, but it turns semantic vocabulary into an actual usable product.