Semantic HTML & Form Inputs

Course progress

Lesson 1 of 9 – Overview Lesson 2 of 9 – Semantic layout Lesson 3 of 9 – Text-like inputs Lesson 4 of 9 – Checkboxes & radios Lesson 5 of 9 – Numbers & output Lesson 6 of 9 – Dates & times Lesson 7 of 9 – Color & files Lesson 8 of 9 – Select, textarea & datalist Lesson 9 of 9 – Final example & checklist

1 Welcome & tutorial overview
2 Semantic HTML layout
3 Text-like form inputs
4 Checkboxes & radio buttons
5 Numbers, ranges & output
6 Dates & times
7 Color & file inputs
8 Select, textarea & datalist
9 Putting it all together

Step 1

Welcome & how this tutorial works

This page is both a tutorial and a working example of semantic HTML and form inputs. You'll move through lessons using the navigation on the left or the buttons below each section.

What you'll learn

Each lesson focuses on one idea:

How semantic elements like <header>, <main>, <nav>, <article> and <aside> structure a page.
How different form input types behave and why you'd use them.
How to connect labels to inputs for accessibility.
How to progressively combine everything into one well-structured form.

Try your first mini form

Interactive example: basic contact snippet

This simple form uses semantic markup: a heading, labels, inputs, and a submit button.

Step 2

Semantic HTML layout

Semantic elements describe the role of each region on the page. They help screen readers, search engines, and other tools understand your layout.

Core semantic building blocks

On this page you'll find:

<header> – site-level heading and introduction.
<nav> – the lesson navigation.
<main> – the central content of this document.
<article> – each lesson you're reading now.
<section> – themed sub-sections within each lesson.
<aside> – side notes and summaries.
<footer> – page-level footer.

Visual semantic demo

The block below represents a tiny web page laid out with semantic elements:

<article> – main story or content
Contains headings, paragraphs, and <section>s.

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Skip links, focus & `tabindex`

Semantic layout is only half the story. Keyboard users also need a predictable focus order so they can reach the main content quickly. That’s where skip links and tabindex come in.

Skip link pattern

A skip link is a simple anchor placed right at the top of the page, before your header and navigation:

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<header>...</header>
<main id="main-content">
  ...
</main>

On this tutorial page, try pressing Tab from the very top: the first thing you land on is the “Skip to main content” link that jumps you straight into the tutorial.

Three useful `tabindex` values

No tabindex at all – default behaviour. Interactive elements like links, buttons, and form fields are focusable in the natural order. Structural elements like <div> and <main> are not focusable.
tabindex="0" – makes an element focusable and places it in the normal tab order, alongside links and buttons.
tabindex="-1" – makes an element focusable programmatically (for example via a skip link or script), but it is skipped when users press Tab.

In practice, you rarely need anything else. A good mental model:

0 = “Put me in the queue.”
-1 = “Don’t put me in the queue, but let me be called to the front when needed.”

Why this page uses `tabindex="-1"` on <main>

Some browsers will only move focus to a non-interactive element if it is explicitly focusable. By adding tabindex="-1" to <main>, we make it a reliable focus target for the skip link and any scripts that call .focus(), without adding an extra Tab stop for keyboard users.

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<main id="main-content" tabindex="-1">
  ...
</main>

This pattern is also useful for:

Error summaries at the top of a form (“There were 3 problems…”).
Dialog and modal containers when they open.
Any landmark or section you want to jump to and announce via screen readers.

Quick check: semantic layout quiz

Which element should wrap the main, unique content of a page and normally only appear once?

<nav> <main> <aside>

Correct! <main> represents the dominant content of the document and should occur once.

Not quite. <nav> is for navigation and <aside> is for related content. The main content belongs in <main>.

Why semantics matter for forms

A well-structured page makes your forms easier to find and understand. For example:

A “Contact” <section> inside an <article> might contain your email form.
An <aside> could hold help text or shortcuts.
A clear heading hierarchy (<h1>, <h2>, <h3>…) guides users through the form flow.

Step 3

Text-like form inputs

Text inputs are the workhorses of most forms. HTML offers several specialised types that improve validation and on-screen keyboards.

Types covered in this lesson

type="text" type="email" type="password" type="url" type="tel" type="search"

Interactive example: profile details

Try typing in each field

Notice how email and URL fields validate automatically when you submit, and how mobile browsers select appropriate keyboards.

Quick check: choose the right type

You're collecting an email for a newsletter signup. Which input type should you use?

<input type="text"> <input type="email"> <input type="password">

Exactly. type="email" gives you built-in format checking and better on-screen keyboards.

Close, but type="email" is designed specifically for email addresses and improves validation and UX.

Step 4

Checkboxes & radio buttons

Use checkboxes when users can pick zero, one, or many options. Use radio buttons when they must pick exactly one.

Checkboxes – multiple selection

Newsletter topics (`checkbox`)

Tick as many topics as you like. Each box is independent.

Radio buttons – pick exactly one

Preferred contact method (`radio`)

Radio buttons share the same name so only one can be active at a time.

Group related checkboxes or radios with <fieldset> and <legend>. Screen readers announce the legend before each item, which gives users vital context.

Step 5

Numbers, ranges & the <output> element

Numeric inputs enforce number-only values and can expose stepper controls. Range sliders let users choose values along a continuum. The <output> element displays live results.

Number & range input types

type="number" type="range"

Interactive example: ticket calculator with <output>

Adjust the values and watch the output update

This example uses native form behaviour plus a tiny inline script on oninput to keep the <output> elements in sync.

Other numeric helpers

Combine numeric inputs with attributes like min, max, and step to gently constrain values. For accessibility, avoid extremely small steps that require many key presses.

The <output> element is ideal when you want to display a calculated value inside your form. Associate it with inputs using the for attribute, and update it as values change.

Step 6

Date & time input types

HTML provides specialised inputs for picking dates and times. These help users avoid format mistakes and allow browsers to show date-pickers or calendar widgets.

Date & time family

type="date" type="time" type="month" type="week"

And also:

type="datetime-local"

Interactive example: schedule a meeting

Try choosing different date/time values

Browsers that support these types show native pickers. Fallback is a plain text field where users can still type values.

Step 7

Color & file inputs

Some input types interact with the operating system directly—picking colours or selecting files from disk.

Color picker

Theme colour chooser (`color`)

Choose a colour to represent your personal highlight colour. Browsers will show a native colour picker.

File uploads

Upload a profile image (`file`)

File inputs open a native file picker. Use the accept attribute to hint which file types are allowed.

Button-like input types

Several input types act like buttons:

type="button" type="submit" type="reset" type="image"

In modern projects, the <button> element is often preferred for clickable controls, but button-like <input> elements are still common in older codebases and HTML forms generated by frameworks.

The hidden input above (type="hidden") doesn't appear visually, but it still sends data with the form submission—useful for IDs, tokens, and other metadata.

Step 8

Select, textarea & datalist

Use these elements when you need multi-line input, drop-down lists, or free text with suggested values.

Drop-downs with <select>

Choose a project type (`<select>`)

Select menus are ideal when you have a known, finite set of options.

Multi-line text with <textarea>

Project summary (`<textarea>`)

Textareas are ideal for free-form, multi-line responses.

Suggested values with <datalist>

Favourite language (`datalist` + `text`)

Start typing to see suggested values. Users can still enter something else if they prefer.

Quick check: select vs textarea vs datalist

You have a short, fixed list of roles (e.g. “Designer, Developer, Manager”). Which element is usually the best fit?

<textarea> <select> <input> with <datalist>

Yes! A <select> is ideal for a small, fixed list where the user must pick one of the known options.

Not quite. A short, fixed list of roles is best represented by a <select> — it keeps the control compact and makes the choices clear.

Use <select> for compact, predefined options; use <textarea> for richer text; and add <datalist> when you want suggestions without limiting users to a finite set.

Step 9

Putting it all together

Let's combine semantic layout, a variety of input types, and good accessibility practices into one mini form.

Semantic contact form example

Contact & project brief

This form mixes many of the elements you've seen so far. It lives inside a <section> in the main content area of an <article>. This is a dummy form, and does not collect your information.

Full name Required field. Email

Project type

Content-focused site Form-heavy site Web app

Approximate budget (in £) Ideal launch date Project details Send me occasional updates about front-end tutorials.

Checklist: semantic & accessible forms

Use semantic layout: <header>, <main>, <article>, <section>, <nav>, <aside>, <footer>.
Always associate <label> with inputs via for/id.
Pick the most specific type for each input: email, url, tel, date, number, etc.
Use <fieldset> and <legend> to group related controls.
Prefer progressive enhancement: the form should still work with basic HTML+CSS.
Test with keyboard only (Tab, Shift+Tab, Space, Enter) to ensure all controls are reachable and usable.

Semantic HTML cheat sheet

<header>: Introductory content for a page or section—titles, logos, primary actions.
<nav>: Section with major navigation links. On this page, it's the lesson list.
<main>: The main content of the page. There should only be one per document.
<article>: Self-contained piece of content that could stand alone (like each lesson).
<section>: Thematic grouping of content within an article—each with its own heading.
<aside>: Content related to, but separate from, the main flow—glossaries, tips, ads.
<footer>: Closing content for a page or section—copyright, related links, meta info.

Combine these structural elements with well-labelled form controls and you'll have layouts that are easier to navigate, maintain, and enhance over time.