FAQ: Learn HTML Elements - Common HTML Elements - Linking At Will

This community-built FAQ covers the “Linking At Will” exercise in Codecademy’s lessons on HTML.

Here are the most popular questions on the exercise Linking At Will:

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about HTML in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

As the image is a link now as per the exercise. should it open now? little confused. Help

At Linking at Will, the exercise asks to add an image element to the index.html, but the link is to a webpage, not an image. When I click solution to try to see how it’s done, nothing would show up.

2 Likes

We have this element coded in the page…

<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" />

That is a picture of a brown bear. We can make it into a link to the Wikipedia article by wrapping that element in an anchor tag…

    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" />
    </a>

See how the image is now in the place of what might normally be link text? An anchor tag will transform any element into a link. I wrote on separate lines but the entire thing can be written on one line, if we prefer.

For now, ignore the target attribute, as that should come up in another lesson. That lets our link open in a new window so we don’t lose our place in the exercise.

3 Likes

Does anyone else have issues remembering what all of the commands mean? I can’t recall what the target=’_blank’ actually means or does.
Could just google it of course… ha.:expressionless:

Hey,

A red prickly pear fruit

The src attribute above has the “#” in it. what does that mean, why use it in place of a complete link?

It generally indicates an example URL. In reality, it points to the location bar, or, ‘top of page’. It returns that last requested URL. This is not another request, though. Just the last response. Bear that in mind while you think this through. The response document is already in client memory.

<a href="#">Back to Top of page</a>

We as publishers can tack on page fragments, which is what the hash really is about. Note that CSS denotes the hash symbol as an ID. That means any element with an ID attrbute is a hash designate.

<div id="foo"></div>

<a href="#foo">foo</a>
2 Likes

Why is there a back-slash before the end of the img tag?
I thought the img tag was portrayed like this not

See example from lesson below.

<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>

We could give you the short answer, but this posted in several topics already, so let’s start with some dry, technical reading…

XHTML

I have done what was asked in for this exercise I believe and inputted this piece of code.

href="./index.html" target=_blank>

However the link is not an image but some small icon like a small page. Is this is a fault in my coding or something else?

I’ve removed the opening and closing tags to allow it to be pasted.

Thanks for your time

Yes same thing happened to me. So confused as to why it would tell us to put it in the index but then when u hit solution it has put everything under the media file. not the index. thats where it confused me. Help! can you tell me why it told us to put it in index but then put it in media?!

6 Likes

Hi, is there any way to link text and when you click the text this trigger a click event on a element?
So, let’s say i want to tap to click here and then a click will be triggered to a pardot form …

There are ways, yes; however, that is beyond the scope of these lessons. When you find your way into the JavaScript unit and sufficiently progressed, events will be introduced. Focus upon mastering HTML, and then CSS before taking a segue down this path.

I’m sorry, but I’m not satisfied with this explanation. The instructions for the Linking At Will lesson indicate to alter the index.html link, not the image tag further along in the body. And where did that amazonaws.com link come from? There’s nothing like that in the instructions, just the same wikipedia URL from earlier.

I think I understand the concepts here, it’s just that this puzzle doesn’t make sense to me.

I know I have a long ways to go, so forgive me if the answer is staring me in the face. I’m just getting frustrated.

Line 40 of the HTML.

I’m a bit confused because it mentions to alter the index not the image of the bear?

Please point that out with a link to the exercise. Thanks.

what does the “#” inside stand for?

By itself it means the root fragment, as in the top of the document. In a link within the page, clicking that will scroll to the top of the page.

<a href="#">Back to top of page</a>

After you click that, look at the location bar and you’ll see it in the URL.

The octothorpe is commonly referred to as the hash symbol. (Twitter users refer to it as hashtag.) Clearly it represents an anchor to which we can link.

www.example.com/index.html#fragment

where fragment is an id somewhere in the page.

<div id="fragment">

</div>

We’re told not to write URLs with hashes in them because they are global variables and there is the risk of a collision if some other API is imported that uses the same name for a global object of its own. That’s for another discussion further down the road. For now we can see (and use) it for what it is.

<a href="#fragment">Jump to page fragment</a>

is perfectly fine to use in the document context, just not in URLs linking to this page. It’s within the intent of interlinking page elements and providing in-page navigation. Long articles usually have several headings. A menu at the top or down the side will have links to all those headings, as an example of direct access to other sections. Fragment identifiers are the perfect tool.

The workaround for collision problem is to use fragment names that would never show up as variable names, such as goofyText, random words camelCased together, or hashes which are 32 byte random hex strings. That requires a framework though, with a database. Again, another discussion for way later.