HTML Exercise: Build a Structured Blog Article

A blog article needs a clear title, a friendly opening, and sections that take the reader through the subject. Semantic HTML is like putting labels on the parts of a story. 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

Use article for the whole self-contained post and section for meaningful subtopics. Pictures can sit in figures with captions where helpful.

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

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<article>
    <header>
        <h1>Why Do Leaves Change Color?</h1>
    </header>
    <section>
        <h2>Sunlight</h2>
        <p>Days grow shorter.</p>
    </section>
    <section>
        <h2>Pigments</h2>
        <p>Other colors become visible.</p>
    </section>
</article>

Let’s Understand the Example

• Article marks a piece that could make sense on its own, such as a news post or recipe.
• Header introduces a page or section, often with a title and navigation.
• An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.

You should see a readable heading and its related content. The heading level tells readers how the ideas fit together, not merely how large the letters look.

What Should You See?

The page should display “Why Do Leaves Change Color?” 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 conclusion section that follows naturally from the two existing parts.
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 a separate article element for each paragraph of one story.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A blog article needs a clear title, a friendly opening, and sections that take the reader through the subject.
• Article marks a piece that could make sense on its own, such as a news post or recipe.
• Use article for the whole self-contained post and section for meaningful subtopics. Pictures can sit in figures with captions where helpful.