Image // feature recommendation Public discussion

The Image feature provides the user with the ability to insert a self-contained image, that can be referenced from edited content.

The image is usually accompanied with a caption.

UI / UX

• UI: A feature providing the user with a way to set the properties of a new image, usually represented as a button with the “Image” icon that opens a dialog with form fields to edit image properties
• Title: “Image”
• Keystroke: –

HTML Markup

The <figure> element MUST be used to represent the Image feature as it is the standard way to express self-contained non-textual additional content^[1].

The <figure> element SHOULD have a class attribute which value is set to image to identify that the element is being used for representing image and to allow styling that particular use-case.

The <img> element MUST be used to represent the image itself as it is the standard way to express an image in HTML^[2].

The <img> element MUST have at least the following attributes:

• The src attribute with a valid URL pointing to the image^[3].
• The alt attribute that contains the textual alternative for the image, if any, or is empty, if the image conveys the information that could be derived from its context or caption^[4].

The caption, if it is present, MUST be represented by the <figcaption> element^[5].

Example:

<figure class="image">
	<img src="http://c.cksource.com/a/1/img/sample.jpg" alt="Saturn V carrying Apollo 11">
	<figcaption>Figure 1: Beginning of Apollo 11 mission</figcaption>
</figure>

References

1. The <figure> element definition in the HTML5 standard.
2. The <img> element definition in the HTML5 standard.
3. The definition of a valid URL in the HTML5 standard.
4. [Requirements for providing text to act as an alternative for images section in the HTML5 standard](https://www.w3.org/TR/html5/semantics-embedded-content.html#alt-text).
5. The <figcaption> element definition in the HTML5 standard.