HTML Attributes

What Are HTML Attributes?

HTML attributes give additional details for HTML elements. They are always attached to the beginning of the tag (opening tag) of an element in the form of name/value pairs as shown: name="value". They may define the image to be displayed, the tool to be used for an operation, and many more. Attributes define the action, look, or information of the element.

Rules and Characteristics of HTML Attributes:

Placed in the opening tag of an HTML element.

Example:

<img src="logo.png" alt="Logo">

Written as name="value" pairs. This name are not case-sensitive but attribute name are case-insensitive (but mostly lowercase is preferred).
It is allowed to used multiple attributes in a single element, separated by space.
There are exceptions of attributes of the type Boolean where as value, but some Boolean attribute no value is required like (disables, checked, etc).
The value of attribute must be enclosed in quotes (single or double, but double is standard).

Example

< img src="cat.jpg" alt="Cute Cat" width="300" >

<!DOCTYPE html> <html> <head> <title>Example of HTML Attributes</title> </head> <body> <a href="https://www.learnfastcode.com">Visit our homepage</a> </body> </html>

Core Attribute

Core attribute are the basic attribute that applied on most HTML elements.Example id, class, style, title.

ID Attribute

The id attribute gives a unique identifier to an HTML elements . They are used in CSS and JavaScript . Multiple elements cannot have the same ID.Everyone has unique id in html page. This means that one element can use a specific id . If multiple element share the same id may result unexpected behavior in CSS styling , JavaScript function , and accessibility tools .

<h1 id="highlight">Heading One</h1>
<p id="highlight">This is a paragraph.</p>

<h1> and <p> used the same id but CSS will just apply and JavaScript will target the first one so they violates the uniqueness rule create scripting error.

<!DOCTYPE html> <html> <head> <title>Example of HTML Attributes</title> </head> <body> <h1 id="headingHighlight">Heading One</h1> <p id="paragraphHighlight">This is a paragraph.</p> </body> </html>

<h1> and <p> used unique id so the CSS and JavaScript work properly.

Class Attribute

The class attribute associates one or multiple class names to an element. They are used to group element and same CSS style is applied . Unlike ID attribute , the class attribute is not unique and multiple elements can share the same class .

class="className1 className2 className3 className4"

<!DOCTYPE html> <html> <head> <title>Example of class Attribute</title> <style> .highlight { color: blue; font-weight: bold; } </style> </head> <body> <h1 class="highlight">This is the largest heading</h1> <p class="highlight">This is a paragraph.</p> </body> </html>

Style Attribute

The style attribute permit you to write inline CSS to an HTML element.

<h1 style="color: red; font-size: 30px;">Styled Heading</h1>

Title Attribute

The title attribute provide additional information about an html element.It does not affect the content, but in most cases, it is displayed as a tooltip when a user hovers the mouse pointer on the HTML element.

<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <p title=" tooltip!">Hover over this paragraph to see the title.</p> </body> </html>

Commonly Used HTML Attribute

href Attribute

In <a> tags the href (Hypertext REFerence) is used to define the URL or link target .

<a href="https://learnfastcode.com">Homepage</a>

alt Attribute

In <img> tags the alt attribute is used to provide alternative text . It enhance accessibility and SEO. , it shows up when the image fail to laod

target Attribute

In HTML , the target attribute specifies where to open the linked document or show response obtained after submitting a form . It is mainly used with the <a> (anchor) and <form> elements , and they also can set a default for all links and form within a page using the <base> elements

disabled attribute

In HTML , the disabled attribute is a Boolean attribute , when present , indicate that an element should be disabled . A disabled element is unusable and un-clickable, and its value will not be submitted with a form.

<button disabled>Can't Click Me</button>

Internationalization (i18n) Attributes

For improved accessibility ,localization, and browser rendering internationalization (or i18n) attribute help defining language and text direction. This attribute are supported by the majority of HTML/XHTML elements. There are three Internationalization Attributes.

dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −

Value	Meaning
ltr	Left to Right (default for English)
rtl	Right to Left (for Arabic, Hebrew, etc.)

<!DOCTYPE html> <html> <head> <title>Text Direction Example</title> </head> <body> <h2>Left to Right (LTR) Example:</h2> <p dir="ltr">This text flows from left to right. It is the default for English.</p> <h2>Right to Left (RTL) Example:</h2> <p dir="rtl">This text flows from right to left. Used for Arabic, Urdu, or Hebrew.</p> </body> </html>

lang Attribute

The lang attribute denotes the language in use for a section of the text within an element. it is useful for screen readers and even search engines as it provides useful information regarding the language.

<span><p lang="en">This is English text.</p></span>
<span><p lang="ur">یہ اردو زبان کا جملہ ہے۔</p></span>

Language code follow the ISO 639-1 standard (e.g en for English , fr for French , ur for Urdu. In XHTML, use xml:lang instead of lang for better compatibility.

Boolean Attributes

A boolean attribute in HTML is an attribute that represents true or false values. If an HTML tag contains a boolean attribute — no matter the value of that attribute — the attribute is set to true on that element. If an HTML tag does not contain the attribute, the attribute is set to false .

Attribute	Meaning
disabled	Disables the input/button/etc.
checked	Pre-selects an input checkbox
readonly	input read-only
required	Marks the input field as necessary.
autofocus	autofocus automatically concentrates on the loaded element

<!DOCTYPE html> <html> <body> <h1>Example of "required" attribute with Email</h1> <form> <label for="email">Enter your Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit"> </form> </body> </html>

Generic Attributes (Global Attributes)

Any HTML element, not just particular ones, can use these generic attributes properties.

Attribute	Meaning
id	Unique identifier
class	Pre-selects an input checkbox
readonly	CSS class name(s)
style	Inline CSS
title	Tooltip text
lang	Language code
dir	Text direction
hidden	Hides the element
tabindex	Sets tab order for keyboard navigation