HTML Project: Build a Webpage
A personal webpage is a complete page that presents one person with the elements of this course. The page below gathers structure, text, media, a form, and meaning in one document.
The header and navigation
A header opens the page with the name of the person. A nav element inside holds links to the parts of the page.
<header>
<h1>Maya Chen</h1>
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>A small skills table
A table presents facts in rows and columns. Header cells name each column for the reader.
<table>
<tr><th>Skill</th><th>Level</th></tr>
<tr><td>HTML</td><td>Confident</td></tr>
</table>A contact form
A label names each field, and a button sends the form. The pairing of label and field keeps the form accessible.
<form>
<label for="n">Name</label>
<input type="text" id="n" name="n">
<button type="submit">Send</button>
</form>Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maya Chen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Maya Chen</h1>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>I build small websites and bake on Sundays.</p>
<h2>Hobbies</h2>
<ul>
<li>Reading maps</li>
<li>Baking bread</li>
<li>Trail walks</li>
</ul>
</section>
<section id="skills">
<h2>Skills</h2>
<table>
<caption>Skill levels</caption>
<tr><th>Skill</th><th>Level</th></tr>
<tr><td>HTML</td><td>Confident</td></tr>
<tr><td>CSS</td><td>Growing</td></tr>
</table>
<figure>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='30' cy='30' r='25' fill='orange'/></svg>" alt="An orange circle">
<figcaption>My lucky orange.</figcaption>
</figure>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="cname">Name</label>
<input type="text" id="cname" name="cname">
<label for="cemail">Email</label>
<input type="email" id="cemail" name="cemail">
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Maya Chen</p>
</footer>
</body>
</html>Key points
- Personal webpage: a complete page that presents one person
- One document can hold every part when each element does its own job
- Semantic elements: elements whose names state what their content is
- Header: the top region of a page, holding its name and navigation
- Footer: the bottom region of a page, holding closing facts
In this example, one complete document presents a person named Maya Chen. The header holds her name and a nav with three links. The main element holds three sections with a paragraph, a list, a table, and a figure. The contact section holds a form with two labelled fields and a send button. The footer closes the page with a copyright line written through an entity.
Note
A complete document starts with the doctype line and ends with the closing html tag
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which element wraps the main content of a personal page?