Images and Media

Add images and media with accessible alt text and sensible structure.

Why this matters

This lesson helps you build a strong foundation in HTML. The goal is not to memorize words. The goal is to understand what problem this topic solves and how to use it in a real project.

Core idea

HTML work is about structure, meaning, accessibility, and browser-friendly markup. In Images and Media, focus on the main pattern first. Once the pattern is clear, the details become easier to remember.

How to think about it

1. Ask what the page, program, or system needs to do.
2. Choose the smallest piece that solves that need.
3. Write it clearly, then test it with one simple example.
4. Improve names, structure, and spacing after the idea works.

Example

<header>
  <h1>Kanbritech Academy</h1>
  <nav aria-label="Main navigation">
    <a href="#courses">Courses</a>
  </nav>
</header>

Good habit

Write the plain HTML first, then check whether each tag describes the content accurately.

Common mistakes

• Trying to learn too many new ideas at the same time.
• Copying code without changing it and checking the result.
• Ignoring names, structure, and readability until the project becomes confusing.

Practice task

Open the live example for this topic, change the text, adjust one visual detail, and refresh the lesson. Then write one sentence explaining what changed and why.