proper use of <figure> and <figcaption> for seo - html

I want to know how to properly use these two tags.
can I nest text tags like p tag or h1 tag inside figcaption or figcaption will lose its effect ??
<figcaption> <h2> some title </h2> </figcaption> //good or bad ??
in one scenario I have a card which has image on its right side and some information on left means image and title of image are not inside same div ... in this case what is the best way to add figure,figcaption ??
<div class="d-flex">
<div class="img-container"> <img src="someSrc" alt="someAlt" /></div>
<div class="info-container"> <h2 class="name">some name</h2> </div>
</div>

You can check this W3 link which provides a simple explanation of concerned element - https://www.w3schools.com/tags/tag_figure.asp
For your first question, I don't see any issue if you are to put additional text elements inside the figcaption element. Some folks even, define their own CSS style for figcaption.

Related

The article tag and the img

I understand that the article tag is "an independent item section of content"
www.w3.org/wiki/HTML/Elements/article
I have a page only with a blog post. That blog has an img and a caption on top of the text (it is an img that illustrates what I tell in the text of the blog). Should the img and caption be inside or outside the article tag?
The img:
<img src="1.png">
<div>Caption of the image</div>
The blog post simplified:
<article>
<h1>Title of the post</h1>
<div>Last Updated: 2016-01-07</div>
<div>
<p>This is the body of the post</p>
</div>
<p>Author of the post</p>
</article>
You may want to check both figure and figcaption tags.
example from the docs:
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
And if the figure is related to the article, then I'd put it inside the article tag.
I noticed this already has an accepted answer, but I thought it could use a bit more info regarding your question:
Should the img and caption be inside or outside the article tag?
In terms of semantic HTML, the image and caption content can be nested inside the <article> tag since the permitted content for <article> is flow content, which both <img> and <figure> are defined as flow content.
The <article> element indicates self-contained content, meaning that if you removed all the other HTML except the <article> element, the content would still make sense to a reader. Semantic Sectioning - MDN
Have a look at the code snippet below for one valid way to markup a blog post with <article> and add a nested <img> or even better like #rafaelbiten suggested, a <figure>.
<article>
<h1>Title of the post</h1>
<p>Author of the post</p>
<p>Last Updated: 2016-01-07</p>
<figure>
<img src="1.png" alt="Some alt text">
<figcaption>Caption of the image</figcaption>
</figure>
<p>This is the body of the post</p>
</article>
You can use img tag in article if the image is related to article.

Can i put logo inside the figure?

Can i put logo nested with anchor inside the <figure> ? Is it right?
Here is the code
<header>
<div class="row">
<figure class="col-sm-5"> <img src="images/logo.gif" class="img-responsive" height="60" width="330" alt="site-logo"> </figure>
<div class="col-sm-7">
<div class="well">
<div class="row">
<div class="col-xs-9"><nav></nav></div>
<figure class="col-xs-3"> <img src="images/helpline.gif" class="img-responsive" height="60" width="120" alt="helpline-image"> </figure>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
Yes you can.
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. 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.
Reference : MDN
I know this is old, but please do not place your logo in an <h2>; it is not the place for it and can mess up your accessibility, your dom heading structure, and your SEO performance. Doing something because you can, does not make it the right solution below are some links about how to use heading tags. If you want it to look like an <h2>, then style it in your CSS.
W3 Schools
MDN
SEO and Headers Article
For better SEO, put your logo inside H2 tag.
<h2>
<a href="#">
<img src="logo.gif" alt="stackoverflow-logo"/>
</a>
</h2>
Give proper name for alternate text tag alt, instead of site logo, give your companyname-logo

Is figure figcaption appropriate for image galleries?

Can I use figure element like this:
<ul>
<li>
<figure>
<img src="url">
<figcaption>
<div>
<p> yo this is my naked wife check out more pix here </p>
</div>
</figcaption>
</figure>
</li>
<li>
etc.
?
This is a possible use of the figure element, yes.
(Note that your img needs an alt attribute. And you might want to omit the div, as you could target the figcaption or p directly.)

How to semantically improve this html snippet

Consider the following piece of markup:
<a href="/description/item1">
<img src="item1.jpg">
<footer>
<section>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</section>
<section class="details">
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</section>
</footer>
</a>
DEMO
Anyway, I have always difficulties with semantics. I think that the above snippet doesn't use the elements like section/footer correct (please correct me if I'm wrong!) So I can rewrite it as:
<a href="/description/item1">
<img src="item1.jpg">
<header>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
</header>
<footer>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</footer>
</a>
But then again, shouldn't the anchor be (or be wrapped with) an article and is footer correct here, it is just content about the image ? Can someone help me with this piece of code and guide me through the process to make it semantically correct/better ? Any advice or documentation would be appreciated!
As suggested by Rich Bradshaw, I would use the figure and figcaption tags for your problem:
<a href="/description/item1">
<figure>
<img src="http://p1.pichost.me/i/34/1573266.jpg" />
<figcaption>
<h2 class="title">Bar Foo</h2>
<h3 class="subtitle">The end of the world</h3>
<h4 class="name">Painted by Someone</h4>
<h5 class="id">123243552345</h5>
</figcaption>
</figure>
</a>
figure
The tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
While the content of the element is related to the main flow,
its position is independent of the main flow, and if removed it should
not affect the flow of the document.
figcaption
The tag defines a caption for a element.
The element can be placed as the first or last child of
the element.
> But pay attention, those are HTML 5 tags and consequently just supported in HTML 5 browsers.

How to put header banner image in HTML5

I'm just starting with HTML5 and CSS3. My design includes a header banner in top. That is, the logo and banner images all in one banner.
Now, in HTML5, how do I code it?
<header>
<figure></figure>
</header>
or
<header>
<div>Image Header Banner</div>
</header>
From your description, you wouldn't use <figure> here as you just need to add a logo/images.
The <figure> element is used when you need to group images with a caption.
From w3.org
The figure element represents a unit of content, optionally with a
caption, that is self-contained, that is typically referenced as a
single unit from the main flow of the document, and that can be moved
away from the main flow of the document without affecting the
document’s meaning.
Instead you could place images using the <img /> tag within your <header>
<header>
<img />
<img />
</header>
or wrapped in a <div> container - depending on what you need.
Also, check out this article about the <figure> element, in particular at the end of the article says this:
It may not always be appropriate to use the <figure> element, though.
For example, a graphic banner should not be marked up with <figure>.
Instead, simply use the <img> element.
<header>
<figure>
<img src="image" alt="Logo" />
</figure>
</header>