HTML Exercise: Build a Well-Structured Homepage

A homepage should tell visitors where they are and what they can do next. Give it a clear main heading, a small introduction, and navigation to real pages. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

Start with semantic structure: header for site introduction, main for unique content, and footer for closing information. Styling can be added after this works.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

<!doctype html>
<html lang="en">
    <head><meta charset="utf-8"><title>My Homepage</title>
    </head>
    <body>
        <header>
            <h1>My School Club</h1>
        </header>
        <main>
            <p>We meet every Thursday.</p>
        </main>
        <footer>
            <p>Contact the club teacher.</p>
        </footer>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• A meta element gives the browser short information about the document. Different attributes control different hints.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.
• Charset tells the browser how to decode the page text; UTF-8 is the usual choice.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “My Homepage”. The page itself shows “My School Club” as a heading; those two labels are allowed to be different.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Add an About section and a link to a second page.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Using div for every part and losing the difference between navigation and the main story.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A homepage should tell visitors where they are and what they can do next.
• The html element holds the complete page and usually names its language.
• Start with semantic structure: header for site introduction, main for unique content, and footer for closing information. Styling can be added after this works.