Guidance for making an HTML link within a paragraph element

[hbar1st]

Many people struggle with making an html link for the first time when that link is enclosed within a paragraph element. (Such as in step 12 of the cat photo app).

This post is meant to guide you by giving you some tips of how this is done.

To begin, we are presented with some plain text in a paragraph element such as below:

<p>This is some boring text without any links.</p>

Let us now try to turn the word -links- into a clickable link by using an anchor element.
Here goes:

<p>This is some boring text without any <a href="https://www.google.com">links</a>.</p>

I’ve just turned the word links into a clickable word that will take the user to the google search site. I did that by creating an anchor opening tag to the immediate right of the word links, and by creating a closing anchor tag to the immediate right of the word links. This is what the step means by ‘wrapping’.

Here’s how this text would look like in the preview pane (or in a browser)

This is some boring text without any links.

Notice how the period (dot) is not part of my link?

Also take note of the way the anchor tags both start with < and end with >
The opening anchor tag also has a valid href attribute value.
(Many people mistype their link URL, so always double-check)

Finally, some people try to add their links at the end of the paragraph like this:

<p>This is some boring text without any links. <a href="https://www.google.com">links</a></p>

This is wrong because it looks like this in preview:

This is some boring text without any links. links

And does not complete the objective of making the original word links into a link.

So that’s all there is to this. Super easy and simple.

Final note: (for step 14)
If you want to make an element into a link instead of some words, do the exact same thing but treat the element the same as I treated the word “links”.

hope this helps!

More references if you need additional help here:
https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/578789/3

[malienaxalemah]

This one helped. Thanks a lot.

[ogutugadapo]

That was so easy. it was really helpful. thanks

[MrLewistribe]

Wow. Amazing. It did it for me. It simplified the instruction. Actually the challenge was understanding the question. Thank you.

[AFont4]

Thank you, your explanation was helpful.

[clixer]

Thank you so much. This would help for future reference.