Is figure figcaption appropriate for image galleries? - html

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.)

Related

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

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.

Can HTML5 figure elements be used inside nav tag?

I'm looking to update a very old HTML page to make use of HTML5 semantic elements. The page contains 30 images which each contain a caption. The image / caption blocks then link off to other pages.
Currently the markup is:
<div id="wrapper">
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
<div class="item">
<a>
<img/>
<p></p>
</a>
</div>
</div>
This can be though of as an identification page where you select the item which looks most like what you are interested in and it takes you to more details.
I'm struggling to identify how this would look using HTML5 elements. I think it could be argued this content is actually a navigation block even though it is the main thing on the page?
In which case, how does this look?
<nav>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
<a>
<figure>
<img/>
<figcaption></figcaption>
</figure>
</a>
</nav>
This the main content on the page which currently ranks very well so I'm keen not to make any changes which damage this.
Yes, they can. But this specific use-case seems like a misuse of the <nav> element, which is normally reserved for site-wide navigation and/or intra-page navigation. Not every list of links should be marked up with a <nav>.
"It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links..."
— Mozilla HTML ELement Reference: Nav Element
Similarly, not every image should be marked up with a <figure> element. The usage notes state:
"Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow"
— Mozilla HTML Element Reference: Figure Element
It's important to remember that nearly all HTML elements have semantic meaning, including most of the elements that existed before HTML5. Sometimes the most semantic way to mark up content doesn't use any of the newer elements.
In the context you describe, where the main body of the page is a list of images with text that link to other pages, it may be most semantic to use a simple list of links with text and images:
<ul class="list">
<li class="list-item">
<a href="#">
<span>Item 1 Name</span>
<img src="#" alt="item 1 image description">
</a>
</li>
<li class="list-item">
<a href="#">
<span>Item 2 Name</span>
<img src="#" alt="item 2 image description">
</a>
</li>
<li class="list-item">
<a href="#">
<span>Item 3 Name</span>
<img src="#" alt="item 3 image description">
</a>
</li>
</ul>

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.

Will CSS rtl have any adverse language effects?

I'm using the CSS direction property to set the horizontal visual order of <div> and <figcaption> tags, within a <figure> tag:
<figure>
<div>
<img src... />
</div>
<figcaption>Some text...</figcaption>
</figure>
In certain circumstances, I'd like the <figcaption> to appear before the <div> and its child <img>. In these cases, I'm using the following declaration:
figure {
direction: rtl;
}
In all tested browsers this results in a perfectly legible <figcaption> that appears to the left of the <img>.
My question is, will this potentially have a negative effect on how the text is rendered in other browsers? I'm imagining the <figcaption> content potentially rendering in right-to-left. I know I could easily set the <figcaption> itself to ltr, but I wonder if this is strictly necessary.

HTML5 multiple <figcaption> inside <figure>

I would like to know if a figure element can contain more than one figcaption child?
I read something somewhere (sorry, now I can't find it) that seemed to suggest it couldn't- yet I am sure that a figure can contain more than one img, so that seems illogical.
What if I have two related images side by side, for which I want separate captions?
You can nest the img plus its figcaption into multiple figure tags. To add more semantics to the code you can add an ARIA role attribute.
<figure role="group">
<figcaption>Caption for the whole group of images</figcaption>
<figure>
<img src="picture1.jpg" alt="Description of picture 1">
<figcaption>Caption for Picture 1</figcaption>
</figure>
<figure>
<img src="picture2.jpg" alt="Description of picture 2">
<figcaption>Caption for Picture 2</figcaption>
</figure>
</figure>
In HTML5 figure is a sectioning root. It may have sectioning root or flow content as content. A figcaption is flow content, and may only have flow content as content. So, a figcaption may not have a figure as content.
A figure may have another figure as content, however. Keep in mind that a figcaption must be the first or last child of a figure.
So code might look like this:
<figure>
<img>
<figure>
<figcaption></figcaption>
</figure>
<figcaption></figcaption>
</figure>
or
<figure>
<figcaption></figcaption>
<img>
<figure>
<figcaption></figcaption>
</figure>
</figure>
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
For what I can see, you can only use it once within figure: http://www.w3schools.com/tags/tag_figcaption.asp