Back to Worked Examples
Foundation Web Documents

HTML Page Structure

Problem Statement

Create a properly structured HTML page for a "Pet Care Tips" website. The page should include a main heading, a paragraph of introduction text, a subheading, and an unordered list of tips. Use semantic HTML elements where appropriate.

Step-by-Step Solution

1

Start with the HTML document structure

Every HTML page begins with the document type declaration and the basic structure elements. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pet Care Tips</title>
</head>
<body>

</body>
</html>

Key Point: The <!DOCTYPE html> tells the browser this is an HTML5 document. The lang="en" attribute helps screen readers and search engines.

2

Add the main heading using <h1>

The main heading should use the <h1> tag. There should only be one <h1> per page. 

<body>
    <h1>Pet Care Tips</h1>
</body>
3

Add a paragraph of introduction text

Use the <p> tag for paragraphs of text. 

<body>
    <h1>Pet Care Tips</h1>
    <p>Welcome to our guide for keeping your pets happy and healthy.
       Follow these simple tips to ensure your furry friends thrive.</p>
</body>
4

Add a subheading using <h2>

Subheadings use <h2> through <h6> in order of importance. 

<h2>Essential Tips</h2>
5

Create the unordered list

Use <ul> for an unordered (bulleted) list and <li> for each list item. 

<ul>
    <li>Provide fresh water daily</li>
    <li>Schedule regular vet check-ups</li>
    <li>Give your pet plenty of exercise</li>
    <li>Keep their living area clean</li>
</ul>

Complete Solution 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pet Care Tips</title>
</head>
<body>
    <h1>Pet Care Tips</h1>

    <p>Welcome to our guide for keeping your pets happy and healthy.
       Follow these simple tips to ensure your furry friends thrive.</p>

    <h2>Essential Tips</h2>

    <ul>
        <li>Provide fresh water daily</li>
        <li>Schedule regular vet check-ups</li>
        <li>Give your pet plenty of exercise</li>
        <li>Keep their living area clean</li>
    </ul>
</body>
</html>

Common Mistakes to Avoid

  • ✗ Using multiple <h1> tags - there should only be one per page
  • ✗ Forgetting to close tags - every opening tag needs a closing tag (except self-closing ones)
  • ✗ Skipping heading levels (e.g., going from <h1> to <h3>)
  • ✗ Placing <li> elements outside of <ul> or <ol>