Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
Hi Everyone! The parts of my code that have astrisks around the element in my code in HTML are the elements I have questions about.
In the case , which is the only image element of my code, the instructions state that I should have an ‘img’ element with an id of ‘image’. The code fails to pass the test when the ‘img’ element is a descendant of <div id="img">, but when I move the image element in to the <div id="img-div"> container, it passes. This does not make sense to me and was wondering if someone could explain why?

The second case has to do with a similar issue, when the <label class="tribute-link">.....<a href="some link" id="tribute-link" target="_blank"> is within the <div id="tribute-link"> container, it fails 3 of the tests:

*Failed: You should have an a element with an id of tribute-link.

  • Failed:Your #tribute-link should have an href attribute and value.

  • Failed:Your #tribute-link should have a target attribute set to _blank.

Moving it out of the div passes the test but this does not make sense to me. I think I would want this label within the appropriate div. If someone could explain why that would be extremely helpful to understanding what is happening.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="tribute" />
    <title> Tribute to Twenty one pilots</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
  <div class="top-of-page">
      <h1 class="page-title" id="title">Twenty One pilots</h1>
      <h2 class="sub-title">A duo of many <span class="emphasize">talents</span><h2> </div>
  <main id="main">
    <div id="img-div">
        **<img id="image" src="https://tinyurl.com/mrxdsp6n" alt="Tyler Joseph and Josh Dunn posing for their album trenches" />**
      <div id="image">
      </div>
      <div id="img-caption"><p name="img-caption" id="img-caption">Tyler Joseph and Josh Dunn posing for their album trenches</p></div>
    </div>
    <div id="tribute-info">
      <ul >
        <li>hi</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    **<label class="tribute-link">To learn more about Twenty one Pilots visit the <a href="https://en.wikipedia.org/wiki/Twenty_One_Pilots" id="tribute-link" target="_blank">Wikipedia</a></label>**
    <div id="tribute-link"> </div>
  </main>
</body>
<html>

/* file: styles.css */
*{
  background-color: #fbeeac;
}
.page-title{
  text-align: center;
  font-family: Futura, Calibri, sans-serif;
  font-size: 52px;
  margin: 0;
}

.sub-title{
  text-align: center;
  font-family: Futura, Calibri, sans-serif;
  margin: 0;
  padding: 1rem;
  font-weight: normal;
  font-size: 16px;
}

#img-div{
  margin: auto;
  padding: auto;
  width: 50%;
  text-align: center;
  font-family: Futura, Calibri, sans-serif;
}

img{
  height: auto;
  display: block;
  margin: auto;
  padding: auto;
  width: 50%;
  max-width: 100%;
}

.emphasize{
  font-style: italic;
  font-weight: bold;
}

.tribute-link{

  font-family: Futura, Calibri, sans-serif;
  margin: 0;
  padding: 1rem;
  font-weight: normal;
  font-size: 16px;

}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

ids are meant to be unique
For eg. here you have id=“tribute-link” in the anchor tag and also in the div.
This is going to mess up the test.

same issue with your img

That helped me a lot thank you. It really helped me to understand the usage of ids better.

1 Like