Satyapriya Mahato
Links and Images

Links and Images

Detailed explanation about the a tag and Images

Satyapriya Mahato's photo
Satyapriya Mahato
·

4 min read

Table of contents

Introduction

In this blog, we are going to discuss a little more about the link tag, <a> tag, and images-related tags like the <picture> tag, <img> tag, and all. We will also discuss a little bit of the history of these tags and how they came into existence.

<a> tag

In VS Code, if we type a:, then we will get all the options to use the <a> tag.

Specifies the URL of the page the link goes to. The target value of the link tag is:

  • _self - Default. Opens the document in the same window/tab as it was clicked.

  • _blank - Opens the document in a new window or tab.

  • _parent - Opens the document in the parent frame.

  • _top - Opens the document in the full body of the window.

To know more about these, you can check this explanation on Stack Overflow.

_blank:

This is the most popularly used attribute that opens the linked document in a new window or tab. Others are not used nowadays.

mail

<a> tag provides you the option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.

<a href = "mailto: abc@example.com">Send Email</a>

tel

Using this, we can provide a telephone number and specify a link which upon click opens up the dialer to call to that just like the mailto. Below is an example of that.

<a href="tel:+918340542779">call</a>

Images

<img> tag

The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

<img src="" alt="" srcset="" height="" width="">

  • src - Specifies the path to the image.

  • alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Other attributes:

  • sizes - Specifies image sizes for different page layouts.

  • srcset - Specifies a list of image files to use in different situations.

<picture> tag

Picture tag boosts the functionality of images in many ways depending upon the media sizes. The <picture> tag gives web developers more flexibility in specifying image resources. Below is the implementation of the picture tag.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Image map

By image map, we can target specific positions on our with coordinates and performs different tasks by using those coordinates. To create an image map we can simply go to this website to generate an image map of any image on a certain portion of that image.

In this image, we are mapping the face of the child and the adult by just clicking on that specific position of the image. Select more area we can simply click on add new area to do so as shown in the below image then we can generate map.

After that, if we click on show the code we will get the code as shown in the figure that we can copy and use to perform a variety of tasks.

Conclusion

In conclusion, the <a> tag, link tag, and images-related tags are essential for any web developer to know. The <a> tag provides us with the option to specify links, email addresses, and telephone numbers. The link tag specifies the URL of the page the link goes to and has various target values such as self, blank, parent, and top. Images play an essential role in web design, and the <img> tag is used to embed images in an HTML page. The <picture> tag is used to specify image resources, and it contains one or more <source> tags and one <img> tag. Finally, an image map can be used to target specific positions on an image and perform various tasks. By knowing these tags, web developers can design more interactive and engaging web pages. In the next blog, we will learn about tables till then

HTML5linksimages