HTML Best Practice - Nesting <img>

I’m trying to set myself up with good habits, so I’m wondering: Do I want to nest img tags? Or is that a case-by-case basis sort of thing?

The below code comes from the HTML: Elements course and I wasn’t sure if nesting the img tag mattered as far as readability goes.

<div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>
  </div>

this is fine, yes

an alternative would be to use <figure> instead of <div>

<figure>
  <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="Brown bear in the wild" />
  <figcaption>A good looking brown bear in the wild</figcaption>
</figure>

this has to do with semantic HTML, which should be covered later on

nesting does improve readability, so this is good practice indeed (imo)

2 Likes