In this lesson, you'll learn about HTML attribute, the additional information you can add to HTML elements to enhance their functionality and control their behavior. Understanding attributes is essential for creating more dynamic and interactive web pages.

What Are HTML Attributes?

HTML attributes are special words used within the opening tag of an HTML element to control its behavior or provide additional information about that element. Attributes modify the default functionality of HTML elements, allowing you to customize and enhance your web pages.

Syntax of HTML Attributes

The general syntax for adding an attribute to an HTML element is as follows:

<tagname attribute="value">Content</tagname>

• <tagname>: The HTML element you are using.
• attribute: The name of the attribute you want to add.
• "value": The value assigned to the attribute, enclosed in quotes.
• Content: The content inside the HTML element.

Example:

<a href="https://techgrind.io">Visit TechGrind.io</a>

In this example:

• <a> is the anchor tag.
• href="https://techgrind.io" is the attribute that specifies the URL.
• Visit TechGrind.io is the clickable text.

Rules and Characteristics of HTML Attributes

• Placement: Attributes are always included within the opening tag of an HTML element.

  <element attribute="value">Content</element>

• Syntax: Consist of a name and a value, separated by an equals sign (=).

• Quotation Marks: Attribute values are typically enclosed in double quotes (").

• Case-Insensitive: Attribute names are not case-sensitive, but it's a common practice to use lowercase.

• Multiple Attributes: An element can have multiple attributes, separated by spaces.

  <img src="image.jpg" alt="Description" width="200" />

• Valid Attribute Names: Use valid attribute names as defined by HTML standards (e.g., href, src, alt).

• No Spaces in Attribute Names: Do not include spaces in attribute names; use hyphens (-) if necessary.

• Self-Closing Tags: For self-closing tags, include attributes within the single tag.

  <img src="image.jpg" alt="Description" />

Examples of HTML Attributes

Let's explore some common HTML attributes with examples.

1. href Attribute

The href attribute specifies the URL of the page the link goes to. It is used within the <a> (anchor) tag to create hyperlinks.

Syntax:

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

Here, href is the attribute name and URL is an attribute value.

Example: Creating a Link to TechGrind.io

Explanation:

• <a>: The anchor tag used to create hyperlinks.
• href="https://techgrind.io": Specifies the destination URL.
• Visit TechGrind.io: The clickable text that users will see.

2. src Attribute

The src attribute specifies the path to the image you want to embed. It is used within the <img> tag to display images.

Syntax:

<img src="imageURL" />

Here, src is an attribute, and imageURL is an attribute value.

Example: Embedding TechGrind.io Logo

Explanation:

• <img>: The image tag used to embed images.
• src="https://www.techgrind.io/_next/static/media/logo.7506de7c.svg": Specifies the image source URL.
• alt="TechGrind.io Logo": Provides alternative text for the image.

3. alt Attribute

The alt attribute provides alternative text for an image if it cannot be displayed. It enhances accessibility by describing the image to users who cannot see it.

Syntax:

<img src="imageURL" alt="description" />

Here, alt is an attribute and description is an attribute value. So, whenever image is not loading, or there is some error in URL, alt text will appear on the web page.

Example: Alternative Text for TechGrind.io Banner

Explanation:

• alt="Banner of TechGrind.io": Describes the image content as image URL is not valid.

4. title Attribute

The title attribute provides additional information about an element. When users hover over the element, the title text appears as a tooltip.

Syntax:

<tagname title="additional information">Content</tagname>

Here, title is an attribute and additional information is an attribute value.

Example: Adding a Tooltip to a Link

Explanation:

• title="Click to visit TechGrind.io": Displays a tooltip with additional information when the user hovers over the link.