HTML Learning Exercise: Build a Personal Introduction Page

A personal introduction page is an easy first project because you already know the content. Start with your name, then add a short paragraph and a small list of interests. 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

Focus on good reading order: one main heading, smaller section headings, and real list elements. You do not need special fonts or animation to make useful HTML.

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

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>Hi, I'm Alex</h1>
    <p>I like football, photography, and coding.</p>
    <h2>Things I want to learn</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
</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.
• A p groups a paragraph of related text. Start another paragraph for a new thought.

You should see distinct list items. Ask whether their order carries meaning: if the order matters, use an ordered list; otherwise use an unordered list.

What Should You See?

The page should display “Hi, I'm Alex” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

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 a favorite book or activity section and check that the heading levels make sense.
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 multiple h1 headings just to make every sentence large.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A personal introduction page is an easy first project because you already know the content.
• Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
• Focus on good reading order: one main heading, smaller section headings, and real list elements. You do not need special fonts or animation to make useful HTML.