How can I add a text description of each image below the image?

Question

I am currently displaying images on my website that are also links to different pages.

How can I add a text description below each of the clickable links?

The code I have written is below.

Thank you for your help!

             <section>
                <ul class="film_strip">
                    <a href="drawing.html"><li><img src="Img\drawing.png" width="130" height="130" alt="Learn to draw" /></li></a>
                    <a href="art.html"><li><img src="Img\art.png" width="130" height="130" alt="art Design and creation" /></li></a>
                    <a href="design.html"><li><img src="Img\designart.png" width="130" height="130" alt="design" /></li></a>
                </ul>
            </section>

.film_strip li {
    float: left;
    list-style-type: none;
  }

.film_strip li img {
    float: left;
    background: #DEE0E3;
    padding: 10px;
    margin: 5px;
    border: 1px solid #AAA;
    color: #3C3C3D;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
  }

Also note that your HTML is invalid. `ul` can only have `li` as direct children — Paulie_D, Apr 22 '21 at 19:49

score 1 · Answer 1 · answered Apr 22 '21 at 21:03

The question asks how to display a description below the link. The link is the img.

First to note a couple of errors in the given code:

An unordered list (ul) element only has list (li) elements as its children, so the anchor (a) element must be nested inside the li
The CSS for the imgs has 4 settings which apply to text. img elements do not themselves have children so the styling of text is not relevant to them.

Then to note one possible infelicity - the use of float. Although it works, the li elements rest next to each other on a line, float was not originally intended for this purpose. Using inline-block is probably preferable. See Advantages of using display:inline-block vs float:left in CSS for discussion of this.

Now we can add text after the link, that is, after the closing tag. This snippet puts the text in a div (as that gives flexibility if the description actually contains other element types) and the text-related CSS that was given for the img is moved to this div.

.film_strip li {
  display: inline-block;
  list-style-type: none;
}

.film_strip li img {
  float: left;
  background: #DEE0E3;
  padding: 10px;
  margin: 5px;
  border: 1px solid #AAA;
}

.film_strip li div {
  color: #3C3C3D;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

<section>
  <ul class="film_strip">
    <li>
      <a href="drawing.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="Learn to draw" /></a>
      <div>Drawing</div>
    </li>
    <li>
      <a href="art.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="art Design and creation" /></a>
      <div>Art</div>
    </li>
    <li>
      <a href="design.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="design" /></a>
      <div>Design</div>
    </li>
  </ul>
</section>

Dr Manish Lataa-Manohar Joshi · Answer 2 · 2021-04-22T20:04:36.000

 <section>
          <ul class="film_strip" style="list-style:none;">
                <li><a href="drawing.html"><img src="https://picsum.photos/id/237/200/300" width="130" height="130" alt="Learn to draw" /></a><br>Description 1</li>
                <li><a href="art.html"><img src="https://picsum.photos/id/238/200/300" width="130" height="130" alt="art Design and creation" /></a><br>Description 2</li>
                <li><a href="design.html"><img src="https://picsum.photos/id/239/200/300" width="130" height="130" alt="design" /></a><br>Description 3</li>
         </ul>
  </section>

How can I add a text description of each image below the image?

2 Answers2