HTML attributes can change the color, size, and different functionalities of HTML elements. Thus, HTML attributes can do this if you wish to change the font or shape and size of a text for an image element. An attribute is utilized to characterize the character of an HTML element and is put inside the element’s initial tag.
The name and value are the two main components of the attributes. The “name” defines the property you need to set. Whereas the “value” is what you believe the property’s worth should be set and generally put inside citations.
The names and values attribute case-obtuse. The World Wide Web Consortium (W3C) suggests lowercase attributes/attribute values in their HTML 4 proposal.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = “left”>This is left aligned</p>
<p align = “center”>This is center aligned</p>
<p align = “right”>This is right aligned</p>
</body>
</html>
You will get the following result;
This is left aligned
This is center aligned
This is right-aligned
Core Attributes
The four major core attributes used by the HTML elements are:
- Id
- Title
- Class
- Style
The Id Attribute
The id attribute of an HTML tag mainly assists in recognizing any component inside an HTML page.
Perhaps, there are two important reasons you should utilize an id attribute on a component. If any element conveys an id attribute as a one-of-a-kind identifier, distinguishing only that component and its content is conceivable.
If you have two elements of a similar name inside a web page, you can utilize the id attribute to recognize elements with a similar name.
Example
<p id = “html”>This para explains what is HTML</p>
<p id = “css”>This para explains what is Cascading Style Sheet</p>
The Title Attribute
The title attribute offers a proposed title for the element. However, the title has a similar syntax as the id attribute. The way of behaving of this attribute will mainly rely on the element that conveys it, even though it is frequently shown as a tooltip when the cursor moves to the element or during the element’s loading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = “Hello HTML!”>Titled Heading Tag Example</h3>
</body>
</html>
You will get the result;
After that, move your cursor over the “Titles Heading Tag Example”, and you observe that any title you utilized in your code is emerging as a tooltip of the cursor.
The Class Attribute
This attribute is utilized to connect an element with a template and indicates the class of the element. You will study the utilization of the class attribute once you master Cascading Style Sheet (CSS). The attribute’s value could likewise be a space-separated list of class names, such as;
class = “className1 className2 className3”
The Style Attribute
With the help of style attribute you can easily specify cascading style sheet (CSS) rules in the element;
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = “font-family:arial; color:#FF0000;”>Some text…</p>
</body>
</html>
You will get a result as;
In this case, if you don’t know about CSS, skip it and start without CSS. However, you just need to understand HTML attributes and their usages for formatting.
Internationalization Attributes
The internationalization attributes consist of three parts. These are accessible for XHTML elements.
- Dir
- Lang
- xml.lang
The Dir Attribute
You can use the dir attribute to signal to the browser regarding the directions of text to flow. There are only one or two values that dir attribute can take;
| Value | Meaning |
| Itr | A default value states Left to Right |
| rtl | Right to left used for languages like Hebrew and Arabic |
Example
<!DOCTYPE html>
<html dir = “rtl”>
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
You will get the result as below;
When the dir attribute is utilized inside the <html> tag, it decides the presence of the text in the whole document. Whenever utilized inside another tag, it customizes the text’s direction for only the substance of that tag.
The Lang Attribute
The lang attribute permits you to show the main language utilized in a report. However, the lang attribute is kept in HTML for backward compatibility with an older version. The “lang” attribute has been supplanted by the xml:lang attribute in the new XHTML archives.
The ISO-639 standard two-character language code is the value of the lang attribute. You can also go through the HTML Language Codes: ISO 639 for a total rundown of language codes.
Example:
<!DOCTYPE html>
<html lang = “en”>
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
It will provide the result as;
The xml.lang Attribute
The replacement of lang attribute is the xml:lang attribute. The XML:lang attribute consists of a value to be an ISO-639 country code as referenced earlier.
Conclusion
The importance of HTML attributes is clear, as it’s the functionality of modifying HTML elements in unique. Perhaps, using different HTML attributes, you can easily modify the text, color, shape, or size of the elements in HTML. However, learning the CSS would give more advantages in using the HTML attributes.