A Guide to HTML and Images: How to Link & Insert

Author:

A Guide to HTML and Images: How to Link & Insert

Nowadays, the website’s visual appearance is what draws the viewer’s attention before the content. Visitors will be driven off by a visually unappealing mundane website lacking graphics or illustrations. Perhaps this is why web developers spend time searching for and integrating images into web pages. So, let’s have a look at how developers can use HTML to link to and insert engaging images.

How to Insert an Image in HTML?

The simplest way one can easily insert images on a website is through the image tag or <img> in HTML. The syntax of <img> is as follows:

< img src = "url" alt = "alternatetext" >

Here,

  • The src stands for ‘source,’ which refers to the URL of the uploaded image.
  • The alt stands for ‘alternate text,’ which is included by developers to entail what the image is about.

Example 

<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image's content so that users who can't see it can understand what it's about</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>

Output 

The image of the provided source.

Adding images through the image tag <img> is the easiest and simplest way to add images in HTML.

When adding images in the <img> tag, make sure the provided URL is the appropriate one and ensure that the URL is correct and that the alt text is included underneath the image so that users can get a sense of what the image is about.

How to Link to an Image in HTML?

Earlier, we saw an example of how to upload images directly to HTML. We’ll take a different method, looking at how an image can be submitted to HTML via a link.

The linking approach is usually used to cite the source of the borrowed image to its original owner.  

Adding links is also a similarly easier task; all you will have to do is add the appropriate link and follow the following syntax:

<a href="the link of the website">

<img src=”URL” alt=”Image Description” height=” ” width=” ”>

Here, 

  • The href attribute in the <a> or anchor tag indicates the link’s target address.
  • The src attribute refers to the image’s link or URL.
  • The alt attribute describes the image.
  • The height and width parameters are used to display the images in the right proportions.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image as link</title>
   </head>
   <body>
      The following image works as a link:<br>
      <a href="https://www.squarespace.com/">
         <img alt="An image from Squarespace" src="https://media-www.sqspcdn.com/images/pages/homepage-refresh-2021/hero/sock/background/background-1440.jpg"
         width=150" height="70">
      </a>
   </body>
</html>

Output

The image of the given URL

Conclusion

Adding images is vital to improving the appearance and aesthetics of a website. Through HTML, developers can easily add images to a website without any hurdles in neat quality with customised image dimensions and descriptions.

Try out the sample provided above, and get an understanding of how to link and insert images using HTML. 

Learn basic HTML for free

If you want to learn some basic HTML for free, try our 5 Day Coding Challenge. After just one hour a day over five days, you will learn the basics of HTML, CSS and JavaScript. You will have built your first ever web page by the end of this short free course. 

Coding the Future: Developer Spotlight - Melissa Buckingham

In March 2023, Melissa Buckingham joined Level 5 Diploma in Web Application Development programme, delivered at North East Surrey College of Technology (NESCOT) by Jonathan Jacobsen using the Code Institute learning platform. The course equips learners with full-stack software development skills, making them ready to enter the digital workforce in various roles. We asked Melissa’s […]

Code Institute’s €250,000 Spring Scholarship Fund - Education for All

The world is full of opportunities, and with technologies advancing and AI becoming the keyword for work success, there really hasn’t been a time more suited to people who want and need to upskill for the future of work. However, many of us know that upskilling can be expensive. To combat this, Code Institute has […]

Coding the Future: Developer Spotlight - Emma Hewson

In October 2022, Emma Hewson joined Code Institute’s Level 5 Diploma in Web Application Development programme, which is run in association with Cardiff and Vale College and is funded via the Welsh Government’s Personal Learning Accounts (PLA) initiative. The course aims to equip learners in full-stack software development, preparing them to enter the digital workforce […]