A contact page should offer at least one clear way to reach the site owner. If it has a form, visible labels and helpful instructions matter more than fancy styling.
What You Need to Know
The form action needs a working server handler. A map embed is optional and can raise privacy and loading concerns; a readable address is often enough.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<main>
<h1>Contact Us</h1>
<address>Email: [email protected]</address>
<form action="/contact" method="post">
<label for="message">Your message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</main>Let’s Understand the Example
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.
- Address contains contact details for the nearest relevant page or article author.
- Action names the destination where the browser sends a form submission. A real server handler must exist there.
- Method controls how a form submits; GET makes values part of the URL, while POST sends them in the request body.
- For links a label to the input whose id matches, so clicking the label can focus the control.
The browser can submit values with keys such as message. A control without a name normally contributes no entry. Whether the submission produces a result depends on the action URL and the server behind it.
What Should You See?
The page should display “Contact Us” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.
Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.
Try It Yourself
- Add an email contact option and test the form with empty required fields.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Publishing a form that looks complete but has no working submission endpoint.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- A contact page should offer at least one clear way to reach the site owner.
- Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
- The form action needs a working server handler. A map embed is optional and can raise privacy and loading concerns; a readable address is often enough.