Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

My question doesn’t necessarily have anything to do with my code but it does have to do with my project. I just wanted to ask what is the purpose of adding a <figcaption> to my code? Because when I inspect the demo project they provide for you I see figure elements surrounding the img-caption. But since the test didn’t require me to add <figcaption> elements in my project I thought it wasn’t important. But now that I’m doing it on my own I wanted to know what the <figcaption> is. Thank you! :blush:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="styles.css">
</head>

<body>
<main id="main">
  <h1 id="title">Mother Teresa</h1>
    <p>The women who dedicated her life to the sick and hungry</p>
   <div id="img-div">
     <img id="image" src="https://image.khaleejtimes.com/?uuid=c8fd60ae-7853-414f-9f71-cf7807893d2d&function=cropresize&type=preview&source=false&q=75&crop_w=0.99999&crop_h=0.795&x=0&y=0&width=1200&height=675">
     <div id="img-caption">Mother Teresa was the founder of the Order of the Missionaries of Charity, a Roman Catholic congregation of women dedicated to helping the poor.</div>
     </img> 
   </div>
  
  <div id="tribute-info">Tribute Info
    <a id="tribute-link" href="https://google.com" target="_blank"><a/>
  </div>
</main>
</body>
</html>

/* file: styles.css */
#image {
max-width:100%;
height: auto%;
display: block;
}

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

h1 {
  color: #000000;
  font-size: 40px;
  text-align: center;

}

p {
 color: #000000;
 font-size: 14px;
 text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

if you’ve ever looked at a textbook with images, usually the images have a caption underneath that describes something about that image. Like a photo of a dollar coin may be accompanied with a caption that says something like when that coin was made.

so figcaptions are identical to that. They ‘caption’ the images and figures to describe them to your audience.

1 Like
3

Ohh ok,
are they mandatory to add tho?
Thank you for your definition it was really helpful :grin:

4

nothing is mandatory.
But if you think about whatever figure you are using, try to ask yourself: “is there something I should mention to my readers about this figure”? If you have something to say, and it is not relevant to the main contents of your page, then add it.

1 Like
5

Ohh ok thank you so much for your help! :grin:

1 Like