<span> vs <figure> vs <area>

Question

I'm wondering what the difference is between 'span' and the new HTML5 tags 'figure' and 'area'.

What is the intended purpose of each, and what are the appropriate uses? For example, I frequently use a 'span' with a background image rather than an 'img' tag to prevent the image from being selectable; what is the best element to accomplish this?

Answer 1

<span> is an inline element, used essentially like an inline div. It is a "generic wrapper for phrasing content that by itself does not represent anything." (W3C spec)

<figure> is used alongside the <figcaption> element to mark up something that "can be moved away from the main flow of the document without affecting the document’s meaning." (W3C spec)

<area> is for making image maps, and is used inside a <map> element.

In your case, I'd recommend using a div instead, or even an img tag with a transparent png as the content with a background image. You could use an img tag with user-select:none; with the usual prefixes instead to stop an image being selectable.

Answer 2

The <span> tag is used for text or other inline elements. It's mainly used to be formatted using CSS.

The <figure> tag specifies flow content like images, diagrams, photos, code, etc.

The <area> tag defines an area inside an image-map.