Is it good practice to use <label> for non-input/non-interactive elements?

Question

When labeling a non-input element with no interactivity, such as a preview <img>, is it better (or correct) to use <span> instead of <label>?

e.g.:

<span>Image preview:</span>
<img id="preview">

or this:

<label for="preview">Image preview:</label>
<img id="preview">

Answer 1

The <label> tag defines a label for an <input> element.

So use <span>instead.

The for attribute associates the label with a control element, as defined in the description of label in the HTML 4.01 spec. This implies, among other things, that when the label element receives focus (e.g. by being clicked on), it passes the focus on to its associated control. The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. (The association may not be as obvious as in visual rendering.

HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. This is described in the technical document H44: Using label elements to associate text labels with form controls, which also explains that the implicit association (by nesting e.g. input inside label) is not as widely supported as the explicit association via for and id attributes,

Answer 2

I know this is old and has been answered and accepted - and my solution is the same as one of the comments (@Quentin) - but for the sake of increasing awareness and educating codes to use the semantically correct element - the figure and associated figcaption is the best tool for the job as described here.

Here is a link to documentation and the fugure elements is fully supported as a html5 element across all browesers (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure).

All parts of the figure element can be styled - and the figcaption can either be the first-child or the last-child of hte figure elements (- placing it before or after the image)

figure {
  text-align: center;
}

figcaption {
  margin-bottom: 4px;
  color: blue;
  font-weight: bold
}

figure img {
  border: solid 1px blue;
  border-radius: 8px;
}

<figure>
  <figcaption>Image preview:</figcaption>
  <img id="preview" src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" alt="fluffy-kitten" height="100" />
</figure>