Do the links in HTML always have to be text?

Question

In the context of this exercise, do the links in the HTML always have to be text, or can we make other content into a link?

Answer

You can make other types of content of a page into a link, other than just text.

For most content, including text, you can simply turn them into a clickable link by wrapping them between the opening and closing <a></a> tags. Whatever content is inside of the tags will become a clickable link.

For example, this will turn an image into a clickable link.

<a href="http://www.codecademy.com">
  <img src="www.example.com/image.svg">
</a>

You can also make other HTML elements, such as <p> or <div>, into clickable links. For example,

<a href="http://www.codecademy.com">
  <div>Codecademy</div>
</a>

Feel free to experiment with other types of content and see if they can become links!

10 Likes

I must say, this took me over 2 hours to get right but i did it. I almost quit but I think I misunderstood the directions and hints.

10 Likes

ok I may be doing this completely wrong I am actually trying to ask for help - not reply - but I can’t see how to ask a question in here. I am already stuck on literally the first topic. trying to get Alejandra’s website to have a web lin using href - when I do it with the anchor - the whole paragraph becomes a link not just ’ with 25 years experience’
tragically I can’t even work out how to create a screen shot of my work ! help!!!

1 Like

Although I can’t see your work, it sounds like you are including your paragraph within your anchor tags. Here’s what can do what I think is happening:
Possibility 1: <a href = "link"> <p> paragraph text </p> </a> looks like this →

paragraph text

Possibility 2: <p> paragraph text before anchor <a href = "link"> the rest of the paragraph text </a></p> looks like this →

paragraph text before anchor the rest of the paragraph text

A possible solution would involve going back through your code and making sure that the text that you want to be used as a hyperlink, and only that text, is included within this element: <a href = "link"> desired text only</a>. This looks like this →
desired text only


This element needs to be enclosed within your <p></p> (paragraph) element. Therefore a final example including all of these steps could be constructed like this <p>If you would like to know more about "lorem ipsum" please click on this <a href = "https://www.lipsum.com/">link.<a></p>
This would look like the following:

If you would like to know more about "lorem ipsum" please click on this link.


I hope this helps!

3 Likes

thank you so much for coming back to me! in fact I went on a couple of pages to where the css thing was and in there I could actually see what they had done and therefore what was wrong with my version - it was possibility 2 (ithink) - I had not closed off the text I wanted - I had assumed (from the notes) that I only needed the at the end of the whole paragraph not a stand alone > at the end of the href - if that makes sense - anyway -

I am not sure how to save and show the working that I did - because am sure I will need to ask again. is there a way of screen shotting within the system or do I have to literally screen shot, save as an image, blah blah - find it in computer and somehow up load it from my files? or is there an easier way?

thanks again for your response

Kate

3 Likes

Of course, I’m happy to help! I think I understand what you’re saying, but yeah anchor elements can get cluttered pretty quickly. As for sharing your work, sometimes Codecademy provides the opportunity to share your code as a git link, however it doesn’t always do that. If you have a github account, you could upload your work to a repository and copy the link to that repository. However, the simplest way would probably just be copying and pasting your HTML/CSS/JavaScript code into a comment. If you do that, you just have to make sure that you include all of your code within the ‘back-tick’ characters: " ` ". You can also highlight the copied code, and select the code symbol in the menu above that is next to the bolder quote icon.

I hope that helps. Good luck!

1 Like

you can try
with 25 years experience

1 Like

Just copy the example code’s format from the first part of the lesson - the href goes into the first part of the anchor and the goes after the word experience: the

paragraph tag goes around all of this. bang boom bam, resume city.


i read all the comments and still dont undersatnd :frowning: help someone ?

took me 15-20 min to get instructions to my head, hope this helps

3 Likes

When you copy the value for the href attribute, you included the fullstop punctuation mark that should not be in the html file name.

The correct attribute value should be "/resume.html" instead of "/resume.html."

One way to make sure that the file names you are linking to are correct is to check the folder icon on the top left of your editor (top left of the black window). Within you can see all the files that is needed for the lesson.

1 Like

me to i have recently started to look into full stack development as a career path and coming from zero knowledge in the coding world it takes a minute to take in even just the very basics but keep at i am 37 now and have set my self a time line of 3 years to get to where i want to be fingers crossed but i have to say i am loving it so far

3 Likes

This is fun! :slight_smile: Thank you for sharing this

1 Like

As addition to @jephos249 answer, you could also turn a whole block of content into a clickable link. For example, as you can find in ecommerce websites,

<a href="#">
    <!-- Replace the # symbol with the product's page link -->
    <div>
      <div>
        <img src="/product.jpg" alt="Product">
      </div>
      <div>
        <h4>Product title</h4>
        <div>$12</div>
        <p>Product's short description.</p>
      </div>
      <div>
        <button>Add to favorites</button>
        <button>Add to cart</button>
        <button>Buy now !</button>
      </div>
    </div>
  </a>

I hope this sheds some more clarity on the subject! Happy coding to you’ll!

4 Likes

Its kinda advanced knowledge, will take time to understand. Anyways, thanks for sharing extra knowledge that makes us stand out.

Keep Sharing, Keep Learning.

2 Likes

thanks dude! It was helpful of course!

took me a good while also, wasnt sure where my anchors supposed to go, but i got it in the end!

I discovered that you can share your code snippets using Gist. On the Codeacademy lesson page click on the Tools menu on the top right. You should see a side bar popup on the right. At the bottom of this side bar is the Option to Share Code.

It took me a bit of time to figure out the answer, Only issue that I always have is that I’m reading to fast to figure out, what’s the problem is. but I Finally Managed. I have to read more carefully.

1 Like