Attributes are integral to HTML elements as they provide supplementary information or instructions about an element. By defining the element's behavior, appearance, or functionality, attributes enhance its overall functionality. Attributes are specified within the opening tag of an element and consist of a name and a value.

Basic Syntax

Attributes are specified only within the triangle brackets of the opening tag of an element. The syntax for defining an attribute is as follows:

Key Points

• Attributes can be optional or required: Depending on the element, specific attributes may be required to function correctly, while others are optional and provide additional customization options;
• Attributes are enclosed in quotes: Attribute values are enclosed in either double quotes ("...") or single quotes ('...'). This helps to distinguish them from the element's name and aids in readability;
• Each tag has its own set of attributes: Different HTML elements support different attributes. Understanding the specific attributes applicable to each element is essential to utilize them effectively;
• Multiple attributes can be used: It is possible to include multiple attributes in a single element by separating them with a space. This allows for more extensive customization and control over the element's behavior.

Example Usage

Let's explore a few examples of HTML elements with attributes to understand how they impact the elements' behavior:

Line-by-line code explanation:

1. input element;
   • type="text" specifies that the input field should accept plain text input from the user;
   • placeholder="name" provides a hint or an example of the expected input in the input field. We expect a user name.
2. img element;
   • alt="Forest" provides alternative text for an image. If the image weren't loaded, a user would see the text "Forest";
   • src="..." specifies an image's source URL (Uniform Resource Locator). It is located by this link (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+example+img.png) on the internet.
3. a element;
   • target="_blank" specifies that when a user clicks on the link, the destination URL should open in a new browser tab;
   • href="https://www.google.com/" destination link.
4. button element.
   • type="reset" provides a button behavior that, when clicked, resets the form fields to their initial values if the button is specified within the form element.

Note

We will further delve into the details of each element's attributes in this course. For now, it is crucial to comprehend the concept of attributes, their application, and the fact that each element possesses its unique set of attributes. These attributes play a significant role in altering the element's appearance, purpose, and functionality.

Sum up

HTML element typically consists of a tag, attributes, and content.

• Tag defines the element type (e.g., p, img, etc.);
• Attribute provides additional information about the element (e.g., src, alt, etc.);
• Content is anything between the opening and closing tags of the element.