HTML
About and contact
Build the skeletons for the about and contact pages.
About section
The about page tells the magazine's story. On the home page this appears as a <section> holding an <h2> heading and an <article>. The article is written with <h3> and <p>.
To carry contact details, an <address> is added inside the article. address only carries contact information, so it can also appear in content, not just in the footer.
Contact form
The contact section holds a <form>. Inside the form, each field is a pair of <label> and <input>. The label is paired with the input via the for and id attributes.
For long messages a <textarea> is used. To hint at the message field, you write the placeholder attribute, not content inside the tag. The form is submitted with a <button type="submit">.
Exercise Add about and contact sections to main
After the existing section inside main, add two new <section> tags. The first holds <h2>About</h2> and an <article>; the article carries <h3>, <p> and <address>. The second holds <h2>Contact</h2> and a <form>; the form holds three fields (label for= + input id=), a <textarea> (with placeholder) and a submit <button>.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cheese Magazine</title>
</head>
<body>
<header>
<nav>
<a href="/">Cheese Magazine</a>
<a href="/articles">Articles</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Cheese Magazine</h1>
<p>Articles, recipes and maker stories about cheese culture.</p>
<section>
<h2>Latest articles</h2>
<article>
<h3>Ezine cheese</h3>
<p>We examined the production stages of Thrace's white cheese.</p>
</article>
<article>
<h3>Van herb cheese</h3>
<p>We met the herbs used in Eastern Anatolia's herb cheese.</p>
</article>
</section>
<section>
<h2>About</h2>
<article>
<h3>Our story</h3>
<p>Cheese Magazine has been sharing local makers' stories since 2018.</p>
<address>
Cheese Magazine, Brooklyn, NY
</address>
</article>
</section>
<section>
<h2>Contact</h2>
<form action="/contact" method="post">
<label for="name">Your name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Your message</label>
<textarea id="message" name="message" placeholder="Write your message here"></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<address>
Cheese Magazine, Brooklyn, NY
</address>
<p>(c) 2026 Cheese Magazine</p>
</footer>
</body>
</html>
Test yourself
-
How are a label and an input paired in a contact form?
- <label>Ad</label><input>
- <label name="ad">Ad</label><input name="ad">
- <label id="ad">Ad</label><input id="ad">
- <label for="ad">Ad</label><input id="ad">
Show answer
<label for="ad">Ad</label><input id="ad"> — Correct. label for and input id share the same value, so screen readers link them.
-
Complete the label and input pairing
<label for="name">Your name</label><input type="text" id="____" name="name" required>
Show answer
<label for="name">Your name</label><input type="text" id="name" name="name" required>
-
Match the form element to its role
- label
- Field name
- input
- Single-line data
- textarea
- Multi-line text
- button
- Submit form
Next lesson: Project final - Site skeleton
