What is the <figure> tag for?

Question

I found several tutorials that recommend to wrap images or logos in <figure>. What I have seen so far is that it adds some kind of margin around the image and changes the display property from inline-block to block (apparently), but in terms of SEO and even HTML architecture, what is the benefit of using <figure>?

from W3schools:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure> 

http://www.w3schools.com/Tags/tag_figure.asp

Thanks

Answer 1

First off, avoid using W3Schools please. Main reason being is that they post a lot of inaccurate information. A better place that's been evolving for web development can be found on the Mozilla Developer Network (MDN).

Specifically on their <figure> page.

A <figure> is basically just another HTML5 element that's tailored to be more semantic to the structure of the HTML that's created. It's the same reason why we have <article>, <section>, <aside>, and <nav> tags were created, so that the content is better understood by developers and bots alike when reading the source of a page instead of having <div> thrown around everywhere to make it all confusing.

Answer 2

AFAIK, <figure> tag in HTML5 is a combination of HTML <img> + <pre> tag for code snippet.

Quoted from MDN

Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.