HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>HTML Images Example</title>

  <style>

    img { max-width: 100%; height: auto; border-radius: 8px; }

    figure { margin: 24px 0; max-width: 420px; }

    figcaption { margin-top: 8px; color: #475569; font-size: 0.9rem; }

    section { margin-bottom: 2rem; }

  </style>

</head>

<body>

  <h1>HTML Images Example</h1>



  <section>

    <h2>Basic Image</h2>

    <img src="https://placehold.co/400x260/059669/white?text=Landscape"

      alt="A beautiful green landscape" width="400">

  </section>



  <section>

    <h2>Responsive Picture</h2>

    <picture>

      <source srcset="https://placehold.co/320x200/f97316/white?text=Small"

        media="(max-width: 600px)">

      <img src="https://placehold.co/500x320/2563eb/white?text=Large"

        alt="A beautiful landscape">

    </picture>

  </section>



  <section>

    <h2>Figure with Caption</h2>

    <figure>

      <img src="https://placehold.co/400x240/7c3aed/white?text=Chart"

        alt="Sales chart for Q1">

      <figcaption>Figure 1: Sales growth in Q1.</figcaption>

    </figure>

  </section>



  <section>

    <h2>Lazy Loading</h2>

    <img src="https://placehold.co/500x320/dc2626/white?text=Lazy"

      alt="A high-resolution image" loading="lazy">

  </section>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Images — Complete Example