HTML Text Markup Exercise: Format a Knowledge Article

A readable knowledge article has a clear title, a brief introduction, useful subheadings, and lists only when the content calls for a list. 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 strong for genuinely important warnings, code for code terms, and paragraphs for ordinary explanations. Avoid visual tricks as a substitute for meaning.

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>
    <h1>What Makes Rain?</h1>
    <p>Rain starts when water vapor cools.</p>
    <h2>Three things to remember</h2>
    <ul>
        <li>Water evaporates.</li>
        <li>Clouds form.</li>
        <li>Droplets fall.</li>
    </ul>
</article>

Let’s Understand the Example

• Article marks a piece that could make sense on its own, such as a news post or recipe.
• 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 “What Makes Rain?” 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. Write one extra section with a heading and a short explanatory paragraph.
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

• Adding headings to every sentence and making the reading order hard to follow.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A readable knowledge article has a clear title, a brief introduction, useful subheadings, and lists only when the content calls for a list.
• Article marks a piece that could make sense on its own, such as a news post or recipe.
• Use strong for genuinely important warnings, code for code terms, and paragraphs for ordinary explanations. Avoid visual tricks as a substitute for meaning.