HTML/CSS - 19

HTML/CSS - 19: SEO & Performance Optimization

A good webpage should be easy for people to use, easy for search engines to understand, and quick to load.

SEO stands for Search Engine Optimization. It includes practices that help search engines understand what a page is about. Performance focuses on making pages load and respond efficiently.

In this lesson, you will improve a simple page using a clear title, useful meta information, semantic HTML, descriptive image text, and a few lightweight performance habits.

Your challenge: Improve the page so it has a clear purpose, useful metadata, meaningful structure, and an efficiently loaded image.

✦ HTML Editor

▶ Live Output

What should you notice?

Some important SEO information does not appear directly inside the visible page. It belongs inside the <head>.

Write a useful page title: The <title> should describe the page clearly. A title such as My Page says very little.

A more useful fictional example could be: <title>Beginner Stargazing Guide | Night Sky Notes</title>

The goal is to make the title understandable, not to fill it with repeated search terms.

Add a meta description: A description can briefly explain what the page contains.

For example: <meta name="description" content="A beginner-friendly guide to spotting simple constellations in the night sky.">

Search engines may use this information when understanding or presenting the page, although they can choose to show different text.

Use meaningful page structure: Semantic elements such as <header>, <main>, <section>, and <footer> help describe the organisation of the content.

A clear heading structure also helps. The page should usually have a clear main heading that explains what the page is about, followed by useful section headings where needed.

Optimize images thoughtfully: Images should have useful alt text when they communicate information. They should also be displayed at sensible sizes instead of loading unnecessarily large files for tiny spaces.

For images farther down the page, you can try: loading="lazy"

This tells the browser that it can delay loading the image until it is closer to being needed.

For example: <img src="space-waffles.webp" alt="Waffles floating against a starry background" loading="lazy">

Performance is more than short code: Removing unnecessary code can help, but performance also depends on things such as image size, fonts, scripts, stylesheets, and how many resources a page needs to download.

Experiment: Give the page a fictional topic of your own. Then rewrite the <title>, meta description, <h1>, and first paragraph so they all clearly describe the same topic without simply repeating identical wording.

Good SEO habit: Write for people first. Clear titles, useful content, sensible headings, descriptive links, and accessible HTML are better foundations than trying to force search terms into every sentence.

Good performance habit: Only load what the page actually needs. Keep images appropriately sized, avoid unnecessary scripts, and reuse CSS instead of repeating the same styles many times.

👀 Show Solution

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

  <meta
    name="description"
    content="A beginner-friendly fictional guide to observing the night sky.">

  <title>Beginner Stargazing Guide | Night Sky Notes</title>

</head>

<body>

  <header>
    <h1>A Beginner's Guide to Stargazing</h1>
    <p>
      Learn a few simple ways to begin exploring the night sky.
    </p>
  </header>

  <main>

    <section>

      <h2>Start with a Dark Location</h2>

      <p>
        Give your eyes time to adjust and choose a place
        away from bright lights when possible.
      </p>

    </section>

    <section>

      <h2>A View from Space</h2>

      <img
        src="space-waffles.webp"
        alt="Waffles floating against a starry background"
        loading="lazy"
        width="600">

    </section>

  </main>

  <footer>
    <p>End of the beginner stargazing guide.</p>
  </footer>

</body>
</html>

This example gives the page a specific topic and keeps the title, description, main heading, and content consistent with that topic.

It also uses semantic HTML and includes descriptive alt text and lazy loading on the example image. These practices can improve page clarity and efficiency, but no single HTML tag can guarantee search rankings or fast performance by itself.