画像のマークアップはp要素かfigure要素か、使い分けと違い
コンテンツ内でimg要素を使用して画像を表示する時には一般的にp要素でマークアップされると思います。HTML5からfigure要素が加わり挿絵・図表・写真・コードなどに、よりセマンティックな（文章構造を正確に伝えられる）マークアップができるようになっています。
迷いがちなp要素とfigure要素の使い分けを考えてみました。
sponsored link
p要素は文章（またはその一部）を示す
p要素は段落であることを示します。段落は文章のひとかたまり、もしくは一部のこと。特定の意味をもたないdivで画像を囲んではいけないとよく言われるのは、そういった意味合いからなのかなと思います。
段落（だんらく、英語：paragraph）とは文章における1ブロックのことであり、通常は複数の文によって構成される。
- 中略 -
日本語においては意味段落（いみだんらく）と形式段落（けいしきだんらく）が存在する。意味段落はその段落がひとつの意味を持った塊であることを示し、形式段落はその段落がその意味を表す段落のすべてではないが表記上段落にしている場合を示す。通常は複数の形式段落をまとめて意味段落とする。
ややこしいのが、alt属性とtitle属性。
alt属性はその画像が読み込めない時に表示されるものなので、その画像が何を表していたのかという説明をする必要があります。ただし、すでに出てきている内容だった場合は文章が重複してしまうのでalt=""のように空にしておいていいようです。（声に出して続けて読んだみて違和感を感じるようなら空にしておく感じでしょうか）
title属性は画像の補足をするためのものです。もう少し画像で説明を加えたいという場合に使用するといいと思います。
alt属性は代替テキストと呼ばれ、画像を閲覧することができない環境でも、情報をテキストや音声で得ることが、出来るようにするための属性です。
- 中略 -
「title属性」はつけたものに対する説明（助言的情報）を書くのが正しい使い方のです。 「title」なのに助言っていうのは変な感じですねwwリンクの説明にも、画像の説明にも使えます。なので、画像にはalt属性もtitle属性も同時に使うことが出来ます。
figure要素は注釈であることを示す
figure要素は挿絵、図表、写真、コードなどに注釈を付けるために使用されます。キャプション（見出しや説明）にはfigcaption要素を使用します。
注釈（ちゅうしゃく、旧表記：註釈）とは、既述の文章や専門用語についての補足・説明・解説のこと。
figure要素の使い方にはひとつ注意点があります。それは文章からfigure要素の部分を取り除いても文脈に問題がない。なおかつ文章から参照される性質のものであること。
figure要素は、イラスト・図表・写真・ソースコードなどのフローコンテンツのうち、自己完結しており、かつメインコンテンツから参照されるものを表します。
- 中略 -
「自己完結」とは、figure要素だけを抜き出して別のページに移しても不自然にならず、元のメインコンテンツに影響を与えない状態を指します。
文章の一部ではなく、「これも読んでおけば理解がさらに深まるよ」といった参照や補足として使用するのがfigure要素ということですね。
文章の一部か、補足か
img要素をマークアップする時に、どちらを使えばいいのかという基準と考え方をシンプルにまとめてみます。
- 文章の一部であり、その画像がないと説明がうまくできない場合はp要素でマークアップする（alt属性は文章と重複するなら空でOK）
- 画像がなくても意味は通るが、補足として画像を使いたい場合はfigure要素でマークアップする（参照なので本筋とは少し離れるかもといったニュアンス？）
参考にしたエントリー