Skip to content
Chapter 05 of 07 · 2 lessons · ~18 min

Forms and Page Structure

Forms let visitors contact you; semantic tags give your page a clear structure. You'll build a contact form and organize a full page the way professionals do.

YOUR PROGRESS0%
/ Lessons in this chapter
10
HTML Forms: Inputs, Labels and Buttons How to build a contact form that's easy to use. Coming soon
11
Semantic HTML Tags Explained How to use tags that describe what your content is, not just how it looks. Coming soon

Chapter practice task

Build a semantic contact page with a working form layout

  1. Create contact.html with a form: name, email, project type (select) and message.
  2. Give every input a <label> and the right type, and mark the required fields.
  3. Wrap your menu in <nav>, the top area in <header> and the copyright in <footer>.
  4. Put the unique content of each page inside one <main>.
  5. Test the form with the keyboard only, using Tab and Enter.

By the end of this chapter

  • You can build accessible forms with labels and built-in validation
  • You know the difference between <section>, <article> and <div>
  • Your pages now have a clear, semantic structure

Quick answers for this chapter

Why doesn’t my form send email?

HTML can’t send email by itself. You need a server script or a form service to receive the data.

Do semantic tags change how the page looks?

Not really. They change what the page means to browsers, screen readers and search engines.

Should I use a placeholder instead of a label?

No. Placeholders disappear as you type. Always use a visible label.