如何为整个figure元素添加href，实现图片及标题点击跳转？

Got it, let's get this sorted so clicking either the album image or its caption opens a new page. There are two solid approaches, with the first being the most semantic and recommended:

Approach 1: Wrap the Entire <figure> in an <a> Tag (Semantic & Simple) #

This is the best method because it keeps your HTML semantic—search engines and screen readers will immediately understand that the entire figure is a clickable link.

Modified HTML #

<!-- Replace "your-target-page.html" with your actual destination URL -->
<a href="your-target-page.html" target="_blank">
  <figure>
    <img src='image.png' height="250" width="250" alt="Album cover">
    <figcaption>Album name goes here <br>Year goes here </figcaption>
  </figure>
</a>

• target="_blank" makes sure the link opens in a new tab/window, which matches your request.
• Added alt text to the image for accessibility—always a good practice for screen readers!

Updated CSS #

I also fixed your border styles (you forgot to specify a border type like solid—without it, borders won't actually show up) and added a bit of padding for better visual spacing:

/* Style the link to align with your figure's layout */
a {
  text-decoration: none; /* Remove default underline (optional tweak) */
  display: inline-block; /* Matches the figure's display property to keep spacing consistent */
}

figure {
  display: inline-block;
  border: 1px solid #ccc; /* Added border style for visibility */
  margin: 20px;
}

figure img {
  vertical-align: top;
}

figure figcaption {
  border: 1px solid #ccc; /* Added border style for visibility */
  text-align: center;
  padding: 8px; /* Optional: improves text spacing inside the caption */
}

Approach 2: Use JavaScript (If You Can't Wrap <figure> in <a>) #

If for some reason you can't wrap the figure in an anchor tag (e.g., existing layout constraints), you can add click handlers to both the image and caption with JavaScript.

Modified HTML #

Add a shared class to both elements so we can target them easily:

<figure>
  <img src='image.png' height="250" width="250" alt="Album cover" class="album-link">
  <figcaption class="album-link">Album name goes here <br>Year goes here </figcaption>
</figure>

JavaScript Code #

// Select all elements with the "album-link" class
const clickableItems = document.querySelectorAll('.album-link');

// Add click event to each element
clickableItems.forEach(item => {
  item.addEventListener('click', () => {
    // Replace with your target URL
    window.open('your-target-page.html', '_blank');
  });
  // Show pointer cursor to let users know the element is clickable
  item.style.cursor = 'pointer';
});

Quick Note #

Stick with Approach 1 if you can—it's cleaner, more accessible, and doesn't require extra JavaScript.

内容的提问来源于stack exchange，提问作者mohammad al nesef