Links and Images in HTML

on


Links in HTML

In HTML, Links (Hyperlink) are created using the  <a>  (anchor) tag. It is used to navigate to other web pages, files, email addresses, or locations within the same page.

Syntax :

<a href="URL">Link Text</a>

Here 'URL' is the path or address of any webpages. 'Link Text' is the text that describes your link.


Common Attributes used in <a> tag :

href : It is used to specify the destination URL or address.  

Example:  


<a href="https://www.example.com">Visit Example</a>


target : It is used to Specify where to open the linked document.

   _self  (default): It opens the web document in the same tab.

   _blank : It opens the web document in a new tab or window.

 Example:  


<!-- Opens google in a new tab -->
<a href="https://www.google.com" target="_blank">Open in new tab</a>


<!-- Opens google in the same tab -->
<a href="https://www.example.com" target="_self">Open in same tab</a>


rel : It is used to secify the relationship between the current page and the linked page.  

  Common values:  noopener,  noreferrer,  nofollow etc.

Example:  


<a href="..." target="_blank" rel="noopener noreferrer">Link</a>


title : It is used to add extra information (tooltip) when hovering over the link.

Example:  


<a href="..." title="More info">Link</a>


download : It is used to prompt the user to download the linked file instead of navigating to it.

Example:  


<a href="file.pdf" download>Download PDF</a>


hreflang : It is used to specify the language of the linked document.

Example: 


<a href="..." hreflang="en">English Page</a>


type : It is used to specify the MIME type of the linked document.

Example:  


<a href="file.pdf" type="application/pdf">PDF</a>

Usage Examples


<!- Basic link -->

<a href="https://www.wikipedia.org">Visit Wikipedia</a>


<!- Open link in a new tab -->

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">
Wikipedia in new tab</a>


<!- Link to an email address -->

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


<!- Link to a section within the same page -->

<a href="#section1">Go to Section 1</a>


<!- Download a file -->

<a href="brochure.pdf" download>Download Brochure</a>



Best Practices

  •  We Use descriptive link text (avoid "click here").
  •  We always use  rel="noopener noreferrer"  with  target="_blank"  for security.
  •  We always use valid link not the broken link.
  •  We use the  title  attribute for additional context if needed.
  •  We use meaningful link text for better accessibility


Note :   

The  <a>  tag is essential for navigation in HTML. We use its attributes to control link behavior, improve accessibility, and enhance user experience.


Image Tag in HTML

In HTML, The  <img>  tag is used to display images on a web page. It is a self-closing tag, meaning it does not require a closing tag. The  <img>  tag requires at least the  src (source) and  alt (alternative text) attributes.

Syntax

 <img src="image_url" alt="description"> 

Here  'src' specifies the path or URL to the image file and 'alt' provides alternative text if the image cannot be displayed (important for accessibility and SEO).


Example


<img src="logo.png" alt="Company Logo">

<img src="https://www.example.com/photo.jpg" alt="A beautiful landscape">
 


Common Attributes used in <img> tag :

width  and  height : It is used to set the size of the image (in pixels or percentage).

Example : 


<img src="logo.png" alt="Logo" width="100" height="50">

   

title : It is used to show a tooltip when the mouse hovers over the image.

Example :


<img src="logo.png" alt="Logo" title="Our Company Logo">

 

loading : It is used to control the image loading behavior ( lazy  for lazy loading). 

Example : 


<img src="large-photo.jpg" alt="Photo" loading="lazy">


Usage of <img> tag :

  • image tag is used to display logos, photos, icons, and other images on web pages.
  • It Use relative paths for images in your project folder, or absolute URLs for images hosted online.


Best Practices :

  • We always use the  alt  attribute  for accessibility and SEO.
  • We use optimized images (small file size) for faster loading.
  • We specify  width  and  height  to help browsers reserve space and avoid layout shifts.
  • We store images in a dedicated folder (e.g.,  images/ ).
  • We use appropriate file formats (i.e -  .jpg ,  .png ,  .svg ,  .webp ).
  • We use descriptive file names for images.

Note :

  • The  <img>  tag does not have a closing tag.  
  • Browsers will display the image at the location of the <img> tag in your HTML.



Comments

Post a Comment