HTML Attributes


We will learn about HTML Attributes and how to use them with examples. Every HTML element has attributes that offer more information about that element. It accepts two arguments, a name and a value, that specify the attributes of the element and are inserted inside the element tag.

The name argument takes the name of the property that we want to assign to the element, and the value parameter takes the value of the property or the extent of the property names that may be aligned over the element. Every name has some significance that must be expressed in quotation marks.

Syntax

Attributes Supported: It is a global attribute that is supported by all tags.

Please see the HTML Characteristics Complete Reference section for a detailed explanation of all the attributes.

The following are some of the most regularly used HTML attributes.


HTML src attribute

To insert an image into a webpage, we must use the <img> tag and the src attribute. Inside the double quotation, we must give the image's address as the attribute's value.

Example

Preview

HTML alt attribute

This is an alternative tag used to show or display anything if the primary attribute, the <img> tag, fails to display the image assigned to it. This may also be used to describe the image to a developer who is working on the code.

Example

Preview

HTML width and height attribute

This property is used to change an image's width and height.

Example

Preview

HTML title attribute

The title property is used to describe an element when the mouse is hovered over it. The behavior varies depending on the element, but the value is normally displayed when loading or hovering the mouse pointer over it.

Example

Preview

HTML href attribute

This property specifies a link to any URL. This property is used in along with the <a> tag. The link included inside the href property is connected to the content contained within the <a> element. If we click on the text, it will take us to the linked web page.

By default, the link opens in the same tag, but by using the target attribute and changing its value to "_blank," we can be routed to a different tab or window depending on the browser's the link will open in another tab.

Example

Preview

HTML style attribute

This property is used to apply CSS effects to HTML components such as altering font size, changing font family, coloring, and so on.

Example

Preview

HTML lang attribute

The lang attribute specifies the language. Declaring a language can be useful for accessibility software and search engines.

Example

Preview

FAQs

Yes, it is possible to create custom attributes in HTML. However, it is not recommended because custom attributes are not recognized by the HTML specification and can cause issues with validation and accessibility. It is better to use data-* attributes if you need to add custom data to an element. Data attributes are valid HTML and can be accessed using JavaScript.

HTML attributes are generally not case sensitive. This means that whether you use upper case or lowercase letters when writing your attribute names, the browser will treat them the same way. However, there are a few exceptions to this rule, such as the "class" and "id" attributes, which are case sensitive. It is generally recommended to use lowercase letters for all attribute names to avoid confusion and errors.

Yes, almost all HTML elements have attributes. Attributes provide additional information about an element and can be used to modify its behavior or appearance. For example, the "src" attribute is used to specify the source of an image or a video, the "href" attribute is used to specify the URL of a link, and the "class" attribute is used to specify one or more classes for an element.