In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes standard attributes and creates DOM properties from them. So when an element has an id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is non-standard.
When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value. Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.
For instance, if the tag is <body id=”page”>, then the DOM object has body.id=”page”.
But the attribute-property mapping is not one-to-one! In this chapter, we’ll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
An attribute is used to provide extra or additional information about an element. all HTML elements can have attributes. Attributes provide additional information about an element.
It takes two parameters: a name and a value. These define the properties of the element and is placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element. Every name has some value that must be written within quotes.
HTML attributes are special words that provide additional information about the elements or attributes that are the modifier of the HTML element. Each element or tag can have attributes, which define the behavior of that element. Attributes should always be applied with the start tags. The Attribute should always be applied with its name and value pair. The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only. You can add multiple attributes in one HTML element, but need to give space between two attributes.
Here are some important attributes
src Attribute: If we want to insert an image into a webpage, then we need to use the <img> tag and the src attribute. We will need to specify the address of the image as the attribute’s value inside the double quote.
alt Attribute: As the name goes this is an alternate tag that is used to show or display something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be used to describe the image to a developer who is actually sitting at the coding end.
The width and height Attribute: This attribute is used to adjust the width and height of an image.
The id Attribute: This attribute is used to provide a unique identification to an element. Situations may arise when we will need to access a particular element that may have a similar name to the others. In that case, we provide different ids to various elements so that they can be uniquely accessed. The properties extending the use of id is generally used in CSS, which we will be learning later.
The title Attribute: The title attribute is used to explain an element on hovering the mouse over it. The behavior differs with various elements but generally, the value is displayed while loading or hovering the mouse pointer over it.
The href Attribute: This attribute is used to specify a link to any address. This attribute is used along with the <a> tag. The link put inside the href attribute gets linked to the text displayed inside the<a> tag.
On clicking on the text we will be redirected to the link. By default, the link gets opened in the same tag but by using the target attribute and setting its value to “_blank”, we will be redirected to another tab or another window based on the browser’s configuration.
The style Attribute: This attribute is used to provide various CSS(Cascading Style Sheets) effects to the HTML elements such as increasing font-size, changing font-family, coloring, etc. For a detailed explanation refer HTML | Style Tag. The program below shows a few names and values that go along the style attribute.
The lang attribute: The language is declared with the lang attribute. Declaring a language is can be important for accessibility applications and search engines.
