HTML Link and Image

In HTML links are use for connecting pages and can connect external resource or other website as well. Image is use for show graphics into the web pages. Let’s learn these important elements of HTML.


HTML Links / Anchor

In HTML, the <a> (anchor) element is used to create links. It consists of several attributes, primarily the href attribute, which specifies the destination of the link.

Example

<a href="https://www.hmtmcse.com" target="_blank">Click to go www.hmtmcse.com</a>

Here

  • <a> : This is the anchor element used to define a hyperlink.

  • href : The href attribute specifies the URL or destination where the link will take the user when clicked.

  • Click to go www.hmtmcse.com : This is the visible text or content of the link that users interact with to navigate.

  • target : Specifies where to open the linked document (e.g., in a new tab or the same window).

    • _self : Default value. Opens the linked document in the same frame or window where the link was clicked.

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

    • _parent : Opens the linked document in the parent frame of the frame containing the link

    • _top : Opens the linked document in the full body of the window, canceling any frames.


Link to an Email Address

It can create a link that opens the user’s default email client with a pre-filled email by using the mailto: protocol within the anchor (<a>) tag’s href attribute.

Example

<!--Simple mail to-->
<a href="mailto:hmtmcse.com@gmail.com">Send Email</a>

<!--Adding Subject and Body to the Email-->
<a href="mailto:hmtmcse.com@gmail.com?subject=Help Me&body=Some Message">
    Send with Subject & Body
</a>

<!--Add Multiple Recipients-->
<a href="mailto:hmtmcse.com@gmail.com,hmtmcse@gmail.com">Send Email Multiple Recipients</a>

Here

  • mailto : Protocol followed by the email address to which the email will be sent.


Link to a Phone Number

To create a clickable link that prompts the user to call a phone number when clicked on a mobile device or using a compatible web browser, you can use the tel: protocol within an anchor (<a>) tag’s href attribute.

Example

<a href="tel:+8801707788790">Call Us</a>


HTML URL Types

In HTML, when defining URLs for links and images, you can use various URL types based on the context and where the resources are located.

  • Absolute URLs (Image, Anchor) : Complete web addresses specifying the protocol (http/https) and the full domain.

Example:

<a href="https://www.hmtmcse.com" >Click to go www.hmtmcse.com</a>


  • Relative URLs (Image, Anchor) : URLs that specify the path relative to the current page or the root directory of the website.

Example:

<a href="/about.html">About Us</a>


  • Anchor Links (Internal Links, Anchor Only) : Links within the same page to specific sections using anchor IDs.

Example:

<a href="#section2">Jump to Section 2</a>


HTML Image

The <img> element is used to insert images into a webpage. It doesn’t have a closing tag because it’s an empty element, meaning it doesn’t contain any content.

Example:

<img src="image.jpg" alt="Description of the image" title="Title of the Image">

Here

  • src : Specifies the URL or path to the image.

  • alt : Provides alternative text for the image. It used then the image is missing

  • title : Optional attribute providing a tooltip or additional information about the image when hovered over.

  • width & height : Optional attributes to set the image’s dimensions in pixels.

Share