MP Web Studio
HTMLFoundation track
99 / 120

LESSON 99 OF 120

Build: a complete contact section

Integrate a heading, contact details and an accessible form.

Official sourceWHATWG HTML — contact formReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Integrate a heading, contact details and an accessible form. Semantic structure should describe meaning, not visual appearance.

Correct example
<section id="contact"><h2>Contact</h2><p>Email <a href="mailto:studio@example.com">studio@example.com</a></p><form><label for="contact-email">Your email</label><input id="contact-email" type="email" name="email" required autocomplete="email"><button type="submit">Send request</button></form></section>

The section#contact groups one theme. Its h2 names it, the mailto link offers direct contact, the label is connected through for and id, and the input declares its type, name, required state and autocomplete. The button explicitly submits the form.

Common mistake
<section id="contact"><p>Write to us</p><a href="mailto:">Email</a><form><input type="email"><button>Send</button></form></section>

The h2 and label are missing, mailto has no address, the input lacks id, name, required and autocomplete, and the button does not declare the submit type.

STEP 2 · APPLY

Your exercise

Complete the example. Integrate a heading, contact details and an accessible form.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The contact section has a visible h2.
  • The email address uses a mailto link with a value.
  • The form has a fully configured email field.
  • Form fields are labelled.
  • The button declares type="submit".
Explain the solution logic

Add the h2 and mailto link with an address, then create matching label for and input id values. Complete type="email", name, required and autocomplete="email", and set the button to type="submit".