HTML Attributes

HTML attributes are additional information that we provide within an HTML element to tell the browser how that element should appear or behave.

Each tag in HTML has a specific purpose, and an attribute is a way to customize or modify that purpose.

The href Attribute

Example:

<a href="https://htmlonlinecompiler.net">Visit HTML Online Compiler</a>
  • <a> – HTML tag (anchor tag)
  • href – attribute name
  • “https://htmlonlinecompiler.net” – attribute value

The src Attribute

The tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed,

Example 1:

<img src="logo.png">

Example 2:

<img src="logo.png" alt="Company Logo" width="150" height="100">
  • src gives the image location
  • alt provides fallback text
  • width and height control image size

Example 3:

<a href="https://htmlonlinecompiler.net" target="_blank" title="Open HTML Tutorial"> Learn HTML Online </a>
  • href defines the link URL
  • target=”_blank” opens the link in a new tab
  • title shows a tooltip text when hovered

The alt Attribute

The alt Attribute alt attribute in HTML is used with the tag to provide alternative text (alternate description) for an image.

The word “alt” stands for “alternative”, and this text appears when the image fails to load or when a screen reader is used by a visually impaired user.

So basically, the alt attribute describes what the image is about it gives meaning to an image even if it’s not visible.

Example 1:

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

The alt attribute is always written inside the <img> tag, and its value should be a short, meaningful description of the image.

Example 2:

<img src="nature.jpg" alt="Beautiful green landscape with mountains">

If the image loads successfully, you’ll see the picture. If the image fails to load, the browser will display this text instead: “Beautiful green landscape with mountains”

The src and alt attributes are both used in the <img> tag, but they serve completely different purposes. The src (source) attribute tells the browser where the image file is located it defines the path or URL of the image that should be displayed on the webpage. Without src, the browser won’t know which image to load. On the other hand, the alt (alternative text) attribute provides a text description of the image. This text is shown when the image fails to load or when a visually impaired user uses a screen reader. While src controls what image appears, the alt attribute ensures accessibility and SEO by describing what the image represents. In short, src displays the image, and alt explains it.

Leave a Comment