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
Related
I'm currently trying to design a web page. I don't have much experience with HTML and are therefore finding it difficult to get my page looking how i'd planned. I would like to have four square images, two top with two directly below but im struggling to align these. I've tried to research this but all i seem to be able to find are examples with text wrap.
any help appreciated, thanks.
Are your images of the same size ?
Without more information on what you want/have on your page, it's kind of hard to know what you need.
But here's an simple example : http://codepen.io/cecileledoux/pen/mWJyGV
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
<section>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" />
</figure>
</section>
section{
margin-bottom: 20px;
text-align: center;
}
figure{
display: inline-block;
}
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.
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.
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.)
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>