Attributes in HTML
FREE
Overview
An attribute in HTML is a special word within an element's opening tag that controls its behavior. HTML attributes are a modifier of an HTML element type. Attributes either modify a type's default functionality or provide functionality without which certain types cannot function correctly. Attributes are added to HTML start tags. An attribute usually consists of a name and value, like this: name="value".
What are Attributes in HTML?
HTML attributes are pieces of markup language that are used to modify the behavior or appearance of HTML elements. For Example: If you want to add links to your website you can use the hrefattributesimilarly if you want to change the height and width you can use the height and width attribute. HTML elements can also be customized by setting attributes such as color, size, and functionality.
Syntax:
Attributes can be set in the opening HTML tag as follows:
Example:
Output:
Core Attributes
1. ID Attribute:
The IDHTMLattribute is used to identify an element on a page in a unique way. This can be used either as a unique identifier for elements carrying an id attribute or to identify elements with the same name from within a web page when there are many elements with the same name. When two elements have the same name, the ID attribute can be used to easily distinguish them.
Syntax:
Example:
Output:
2. Title Attribute:
The title attribute assigns a suggested title to a particular element. Although typically they aren't displayed as tooltips by default when the cursor passes over an element or when that element is loading, it depends on the carrier how it behaves. Hovering the mouse over an element will explain the element. Different elements behave differently and in general, they display their value when loaded or when the mouse pointer has hovered over them. Syntax:
Example:
Output
3. Class Attribute:
An element of the style sheet is associated with this attribute. Users must specify the class for this element. JavaScript can also use it to modify HTML elements with a designated class (via the HTML DOM). Additionally, this field can also contain a space-separated list of class names. For example: class = “class1 class2 class3”
Syntax:
Example:
Output:
4. Style Attribute:
Cascading Style Sheet rules can be specified for any element using this attribute. HTML elements can be rendered with Cascading Style Sheet effects, such as increasing the font-size. The font family and color can also be changed using this attribute.
Example:
Output:
Internationalization Attributes
Let's have a look at some of the useful Internationalization attributes in HTML.
1. Dir
The dir attribute allows you to give the browser a direction in which to follow a text. There are usually two values for this attribute. RTL and LTR are both possible values. Left to right, or LTR, is the default value, while the right to left, or RTL, is the alternative value. This attribute dictates how the text within a document should be represented when it is used within the <html> tag. In addition to controlling the text's direction, it can be used to control its positioning from just the content of the tag.
Syntax
Example:
Output:
2. Lang Attribute
A document's main language can be demonstrated by displaying this attribute. HTML can keep this attribute to make it backward compatible with earlier versions of HTML. This can also be substituted with the XML: lang attribute in new XHTML documents. The lang attribute values are ISO-639 standards and have two-character language codes. A language must be specified in order to use the application and to search in different search engines.
Syntax:
Example:
Output:
3. XML-Lang Attribute
This attribute is designed to replace the lang attribute. According to what has been mentioned previously, the country code must be specified in the XML-lang attribute.
General Attributes
Let's have a look at some of the most commonly used general attributes in HTML.
1. Align Attribute
When you need to align some elements of your page in a certain fashion, this attribute is useful. The alignment of the page can be changed to left, right, or center. The left alignment is the default for all elements.
Syntax:
Example:
Output:
2. Src Attribute
Users can insert images into a web page by using the <img> tag and the src attribute. The address of the image can be specified as the value of the attribute within the double quotation marks. As shown below, the src attribute can be used to incorporate an image into a webpage.
Syntax:
Example:
Output:
3. Alt Attribute
Using this attribute, you can display text that is not being displayed by the primary attribute, such as the <img> tag when it fails to display its original value. Developers using the image at the coding end can use this to describe the image. Alternate images can be displayed if the main image fails.
Syntax:
Example:
Output:
4. The Width and Height Attribute
We can adjust the height and width of an image with the help of this attribute.
Output:
5. Href Attribute
We can use this attribute whenever we want a specific link to be directed to any particular address. <a> tags are used together with this attribute. The link is linked to the text displayed within the <a> tag when it is placed in the href attribute.
The user is redirected to the link's address when he or she clicks this text. By default, this page will be opened in the same tab. In addition, You can set the target attribute to _blank, If you want to do so. Depending on your browser settings, this will redirect to another tab or another window.
Syntax:
Example:
Output:
Conclusion
- HTML offers many attributes that contribute to enhancing the effectiveness of the application.
- Among them are core attributes, which are the most used in the application.
- It also has internationalization attributes, which enable language changes.
- The global attributes of HTML are applicable to any element anywhere.
- With all of these features, HTML remains a viable development platform for web applications. When these attributes are added to CSS, it makes it more attractive and visually appealing.
- Therefore, we should take advantage of all the available attributes to build awesome web applications.