2020-07-24 09:13:46 -07:00
---
id: 5dfb6a35eacea3f48c6300b4
2021-10-21 10:07:52 -07:00
title: Step 23
2020-07-24 09:13:46 -07:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-23
2020-07-24 09:13:46 -07:00
---
2020-11-27 19:02:05 +01:00
# --description--
2020-07-24 09:13:46 -07:00
2022-01-05 20:02:16 +03:00
A figure caption (`figcaption` ) element is used to add a caption to describe the image contained within the `figure` element. For example, `<figcaption>A cute cat</figcaption>` adds the caption `A cute cat` .
2020-07-24 09:13:46 -07:00
After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.`
2020-11-27 19:02:05 +01:00
# --hints--
The Lasagna `img` element should be nested in the `figure` element.
```js
assert(
document.querySelector('figure > img') & &
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
2021-09-21 23:46:55 +09:00
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
2020-11-27 19:02:05 +01:00
);
```
Your `figcaption` element should have an opening tag. Opening tags have the following syntax: `<elementName>` .
```js
assert(document.querySelector('figcaption'));
2020-07-24 09:13:46 -07:00
```
2020-11-27 19:02:05 +01:00
Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/< \/figcaption \>/));
```
The `figcaption` element should be nested in the `figure` element.
```js
assert(
document.querySelector('figure > figcaption') & &
document.querySelector('figure > figcaption')
);
```
The lasagna `img` element should be nested in the `figure` element.
```js
assert(
document.querySelector('figure > img') & &
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
2021-09-21 23:46:55 +09:00
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
2020-11-27 19:02:05 +01:00
);
```
The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order.
```js
assert(
document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG'
);
```
Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo.
```js
assert(
document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i)
);
```
2020-07-24 09:13:46 -07:00
2020-11-27 19:02:05 +01:00
# --seed--
2020-07-24 09:13:46 -07:00
2020-11-27 19:02:05 +01:00
## --seed-contents--
2020-07-24 09:13:46 -07:00
```html
< html >
< body >
< h1 > CatPhotoApp< / h1 >
< main >
< section >
< h2 > Cat Photos< / h2 >
<!-- TODO: Add link to cat photos -->
2020-07-24 23:16:42 -07:00
< p > Click here to view more < a target = "_blank" href = "https://freecatphotoapp.com" > cat photos< / a > .< / p >
2021-09-21 23:46:55 +09:00
< a href = "https://freecatphotoapp.com" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2020-07-24 09:13:46 -07:00
< / section >
< section >
< h2 > Cat Lists< / h2 >
< h3 > Things cats love:< / h3 >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
2020-11-27 19:02:05 +01:00
--fcc-editable-region--
2022-03-30 06:35:13 -07:00
< figure >
2021-09-21 23:46:55 +09:00
< img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt = "A slice of lasagna on a plate." >
2020-07-24 09:13:46 -07:00
< / figure >
2022-03-30 06:35:13 -07:00
--fcc-editable-region--
2020-07-24 09:13:46 -07:00
< / section >
< / main >
< / body >
< / html >
```
