Skip to main content

Day 81 of 100DaysOfSpec, the img element, contd.

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading 4.7 Embedded content

UAs = User agents = Browsers, etc.

img element, contd.

Semantics of an img element, as determined by how src and alt attributes are set:

  • src is set, alt is an empty string: image is decorative or redundant with its surrounding contents. If the UA does a request and finds the image source is not available, it can choose not to render this image (and can give the user notice that it didn’t render). I suppose that would be a “broken image” icon.

  • src is set, alt is a non-empty string: this image is an important part of content. The alt value should be a descriptor useful enough that the user would know what should have displayed there, if the image didn’t load—or if a user was browsing with a screen reader.

  • src is set, alt is not: “no textual equivalent of the image available.” If the image isn’t available in this case, the UA can choose to show that there’s an image here not being rendered. It can also try and grab caption information for the end user: if the img is a descendent of a figure and the only text info in that figure is the contents of figcaption, the UA can use the figcaption contents as this image’s caption.

  • If neither src nor alt are set, the img element doesn’t represent anything.

  • If the src is not set, but alt is, the elements represents the alt attribute’s text.

  • alt attribute doesn’t store “advisory information”, as you might with the title attribute.

  • If you try to add any content to an img element, it will be ignored.

  • Setting usemap on the element shows that the image has an image map.

  • ismap set on a descendent of an a element (which in turn has its href attribute set), shows that the “element provides access to a server-side image map.” Is boolean and should only be used on elements that match this context.

IDL dimension attributes:

  • width and height return as rendered dimensions if the image is being rendered visually; intrinsic width and height if it’s not be rendered to a “visual medium”; 0 if the image is unavailable.
  • naturalWidth and naturalHeight return the intrinsic dimensions if the image is available, otherwise 0. I’m a bit shaky on what intrinsic actually means. Where is this grabbed from? Attributes set directly on the element? Something else?

Some conditions here for when the complete attribute would return true.


My blog uses Webmentions. Responses from Mastodon and other sites that send Webmentions will show up here.

No Webmentions have been sent to this post yet.