Guidance for making an HTML link within a paragraph element

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>

And 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.
Here’s how that 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? The opening tag of the anchor is placed immediately to the left of the word(s) I am turning into a link.
The closing tag is immediately to the right.

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!

3 Likes

This one helped. Thanks a lot.

1 Like

That was so easy. it was really helpful. thanks

1 Like