Attributes

HTML attributes are used to define the characteristics of an HTML element. They are placed within the element's opening tag and consist of two parts: the name and the value.

• Name: Specifies the property for that element.
• Value: Sets the value of that property for the element.

Types of HTML Attributes

There are three main types of HTML attributes:

1. Core Attributes: These are basic attributes that can be applied to most HTML elements. Examples include id, class, and style.
2. Internationalization Attributes: These attributes help adapt the document to different languages and regions. Examples include lang and dir.
3. Generic Attributes: These attributes provide additional information about an element but don't necessarily affect its appearance or behavior. Examples include data-* attributes for storing custom data private to the page or application.

Core attributes are some of the most widely used attributes in HTML. Four commonly used core attributes are:

• id
• class
• title
• style

ID Attribute

The id attribute is used to assign a unique identifier to an HTML element. Each element with an ID has its own unique identity, similar to how each individual has a unique identity.

Multiple elements should not have the same ID within the same HTML document.

Example:

<p id="html">This is an HTML tutorial</p>

<p id="python">This is a Python tutorial</p>

In this example, the id attribute helps distinguish between the two paragraphs by assigning them different values: "html" and "python".

Class Attribute

The class attribute is used to associate an HTML element with a particular class, typically for styling with CSS or manipulation using JavaScript.

Unlike the id attribute, the class attribute does not need to be unique. Multiple elements can share the same class.

Example:

<p class="tutorial">HTML Tutorial</p>

<p class="tutorial">CSS Tutorial</p>

Title Attribute

The title attribute provides additional information about an element and is often displayed as a tooltip when the mouse hovers over the element.

Example:

<h4 title="hello, motto">Title attribute</h4>

When the user hovers over the heading, the value of the title attribute can appear as a tooltip.

Style Attribute

The style attribute allows for inline styling of HTML elements. It is used with CSS properties to directly style individual elements within the HTML code.

Example:

<p style="color: blue;">
This paragraph has inline styling.
</p>

Case Sensitivity

HTML attribute names are generally case-insensitive in HTML documents. For example, attribute names such as title and TITLE are treated equivalently by HTML parsers.

However, as a best practice, attribute names should be written in lowercase. Lowercase attributes improve consistency and follow modern HTML coding conventions.