quick question about HTML5 article and figure element - html

Question

I have a section where there is a image of a site and a paragraph thats referencing to that site. I am wondering what would be the correct way, in your opinion how I should wrap these 2 HTML objects.
I have originally thought this would just work(ignore .img-wrap and the h2):
<section class="featured">
<h1> Featured Project </h1>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</section><!-- .featured -->
But what if my client adds multiple paragraphs? It will be styled with a background color and margin so it wouldn't look right.
Wouldn't figure and figcaption be appropriate? I can't really tell when I read on it on HTML5Doctor.
<section class="featured">
<h1> Featured Project </h1>
<figure>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<figcaption>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</figcaption>
</figure>
</section><!-- .featured -->
Or maybe just wrap the paragraph?

Answer 1

It's hard to say what the best practice here would be since you haven't given us enough context. I doubt that what you're showing us here really is a good candidate for a <section>, since it seems more like the bulk of an article, especially with that <h1> thrown in there.
As far as using that <figcaption> around paragraphs of content, well, that's not really what it's intended for. Think about a newspaper or magazine article with an image or two to spice it up. The image isn't described in the body of the content, but the image content is related to the article. The captions on the image are brief descriptions of what the image is showing, usually to clarify who or what you're looking at.
For your situation, something like the following might be most appropriate:
<article id="featured">
<h1>Featured Project</h1>
<figure>
<img src="image.jpg" alt="A brief caption about the image.">
<figcaption>A brief caption about the image.</figcaption>
</figure>
<p>
Lorem ipsum, your articlus can goeth here.
</p>
</article>
There's no need for you to wrap the entire article inside of a <figcaption> wrapped inside a <figure>, just to show an image. You don't have to use <figure> at all, and if you do, a <figcaption> is quite possibly unnecessary. Don't get caught up with trying to use HTML5 elements just for the sake of using them. If you don't think there's a compelling reason to use them, your time is probably better spent just getting things built and iterating over them later to make semantic improvements to the markup.