Tribute Page - Build a Tribute Page

Curriculum Help
1

Tell us what’s happening:

How do I add images with the # key to link to the #main? This is the second question and I don’t understand how to accomplish this. Thanks

Your code so far

<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<!doctype html>
<Html lang="en">

<main id="main"> <h1 id="title">The Greatest</h1></main>

<div id=img-div><img id="image>" </img></div>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Welcome to the community :smiley:

Firstly your doctype declaration should be at the very top of your HTML file, sometimes not having it at the top can cause problems later.

You should also use the <head></head> tags for anything that isn’t going to appear on the page, such as stylesheet links and meta data.
Use the <body></body> tags to contain all your content.
Both of these tags should go inside the <html></html> tags.

Boiler plate example:

<!doctype html>
<html>
  <head>
    where your stylesheet link and meta data go
  </head>
  <body>
    where your content goes
  </body>
</html>

For your original quetion:
Just as the . is placed before a class name in the CSS file, a # is placed before the id name in the CSS and HTML file, when you wish to reference or link them.

for example:
(this is an example, not the answer)

<a href="#someName">This will go to the Example bookmark heading</a>
<h1 id="someName">Example bookmark</h1>

The above example is known as a bookmark, its used to link to an element on the same page, this means when the link is clicked, the page will jump to the ‘Example bookmark’ heading

You can read more about it and play with examples in this link:
HTML Links - Create Bookmark (w3schools.com)

I believe your problem may be more to do with your boiler plate than your original question.

    1. Your tribute page should have a main element with a corresponding id of main, which contains all other elements

You can place the main tag inside the body, and place ALL other elements inside of main

<body>
  <main>
    All other element tags, divs, headings, sections, images, everything
  </main>
</body>