HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs (2024)

There will be times where you will want to nest links inside paragraphs or turn an image into a link. But how do you go about doing that in HTML?

In this article, I will show you how to nest links inside paragraphs and how to turn an image into a link using code examples.

If you want to include links inside your paragraphs, then you can nest anchor tags inside the paragraph tags.

In this first example we have the text "I love freeCodeCamp".

<p>I love freeCodeCamp</p>

If I wanted to turn the word freeCodeCamp into a link, then I would wrap it inside a set of anchor tags.

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

We can also add the target="_blank" attribute to have that link open up in a new tab.

How to turn an image into a link

In HTML, we can use the <img> element to add images on the page. In this example, we are adding an image of five cats.

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/>

HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs (1)

If we wanted to make that image a clickable link, then we can place it inside a set of anchor tags.

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

We can also add the target="_blank" attribute to have that link open up in a new tab.

<a target="_blank" href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /></a>

When you hover your mouse over the image, you will see the cursor pointer indicating that it is a link directing you to an article about cats.

Conclusion

In this article we learned how to nest anchor tags inside paragraphs and how to turn images into links.

To add links inside paragraphs, we can nest anchor tags inside paragraph tags.

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

To turn an image into a link, we can nest an img element inside anchor tags.

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

I hope you enjoyed this article and best of luck on your programming journey.

HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs (2024)

FAQs

How do you add a link inside a paragraph in HTML? ›

If you want to include links inside your paragraphs, then you can nest anchor tags inside the paragraph tags. In this first example we have the text "I love freeCodeCamp". If I wanted to turn the word freeCodeCamp into a link, then I would wrap it inside a set of anchor tags.

Read On ›

How do I combine an image and a link in HTML? ›

We can make elements like images into links by nesting them within an <a> element. It defines a hyperlink that is used to link from one page to another. If the <a> tag has no href attribute, then it will be only a placeholder for a hyperlink.

Discover More Details ›

How to nest a link in a paragraph? ›

To add a link within a paragraph, you can use HTML anchor tags. This will create a hyperlink within the paragraph that directs the user to the SheCodes website. You can replace the URL in the href attribute with the link you want to use.

How to convert an image to a link in HTML? ›

When creating a clickable image in HTML, the href tag, makes your image into a hyperlink. Adding a destination link after the href tag will take your visitors to that destination when clicked on the image.

See Details ›

How do you make a link inside a link in HTML? ›

To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to.

Find Out More ›

How do you put a link within text? ›

To include a link in any text message, just type or paste the full URL into your text. Most messaging platforms automatically turn the URL into a link allowing contacts to click and access the linked page.

Tell Me More ›

How do I turn a picture into a link? ›

To find the URL of an image on a website, right-click on the image and select Copy Image Link. This way, it's possible to share the URL on social media, email, and other platforms or open it in a new tab to save the image.

Show Me More ›

How to nest an image element? ›

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).

Explore More ›

Can you nest paragraphs in HTML? ›

All html elements can be nested.

How do I nest a link in an image? ›

Insert the Code

Put the anchor tag <a href=””> before the image url, and </a> after. Paste the destination URL you want to add within the quotation marks for <a href=””>. Make sure you put “http://” before the link.

Show Me More ›

How do I add a clickable image in HTML? ›

To make an image clickable in HTML, you can use the anchor ( <a> ) tag around the image ( <img> ) tag. Here's an example: <a href="https://example.com"> <img src="path/to/your/image.

Read The Full Story ›

How do I display an image as a link in HTML? ›

The <a> tag is used to create a hyperlink. Placing an <img> tag inside an <a> tag displays a clickable image that leads to another page. The <a> tag has an attribute, href . The href attribute's value specifies the location of the webpage we want to link.

See Details ›

How do I pass an image to a URL in HTML? ›

There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Get More Info Here ›

How do you link something in a paragraph? ›

Putting these two parts together.. Within a paragraph, choose where you want to add a link and add the following.. Simply place speech marks (double quotes) around your link text, and then write a colon (:) followed by the link URL you wish to place. e.g.

How do I make a section clickable in HTML? ›

To make the rows, sections, columns, or divs clickable, just change the HTML tag from <div> to <a> in the setup area. Then add the link, in the link area. Hope that helps.

How do you embed a link in HTML? ›

Use this code to add a Link to a page:

<a href=“http://Internet URL goes here.”> ...
Code example: <a href=http://www.example.com>Example</a>
<img src=“image name goes here” align=“Use left, right or center”>
Code example: <img src= “house.jpg” align=“center”>
<a href=“mailto:[email protected]”>E-mail Us</a>

More items...

View Details ›