HTML Attributes

HTML Attributes: Explanation & Examples

What Are HTML Attributes?

HTML attributes provide additional information about an element. They are always included inside the opening tag and usually come in name-value pairs like this:

<tagname attribute="value">Content</tagname>

✔ Key Points About Attributes:

Always written in the opening tag.
Provide extra functionality or control over elements.
Some attributes have predefined values, while others accept user-defined values.

Types of HTML Attributes with Examples

1. Global Attributes

These attributes can be used with almost any HTML element.

✅ Common Global Attributes:

Attribute	Description
`id`	Provides a unique identifier to an element.
`class`	Assigns a class name for styling or scripting.
`style`	Adds inline CSS styling to an element.
`title`	Shows a tooltip when hovered over the element.
`lang`	Defines the language of the content.

Example:

<p id="para1" class="text-style" style="color: blue;" title="This is a paragraph">Hello, World!</p>

✔ Explanation:

id="para1" → Identifies the paragraph uniquely.
class="text-style" → Assigns a CSS class.
style="color: blue;" → Changes text color to blue.
title="This is a paragraph" → Displays a tooltip on hover.

2. Core HTML Attributes

Some attributes are specific to certain types of elements.

✅ Examples of Core Attributes:

Attribute	Used With	Description
`href`	`<a>`	Specifies a hyperlink URL.
`src`	`<img>, <audio>, <video>`	Defines the source file for media.
`alt`	`<img>`	Provides alternative text if the image cannot load.
`width` / `height`	`<img>, <video>, <iframe>`	Sets the dimensions of an element.
`target`	`<a>`	Defines where to open a link (`_blank`, `_self`, etc.).

Example:

<a href="https://www.google.com" target="_blank">Visit Google</a>
<img src="image.jpg" alt="A beautiful scenery" width="300">

✔ Explanation:

href="https://www.google.com" → Links to Google.
target="_blank" → Opens the link in a new tab.
src="image.jpg" → Displays an image.
alt="A beautiful scenery" → Alternative text if the image fails to load.
width="300" → Sets image width to 300 pixels.

3. Input Form Attributes

These attributes are used with <input> elements inside forms.

✅ Common Input Attributes:

Attribute	Used With	Description
`type`	`<input>`	Specifies the input type (text, email, password, etc.).
`value`	`<input>, <textarea>`	Sets a default value.
`placeholder`	`<input>, <textarea>`	Shows a hint inside the input field.
`required`	`<input>, <select>`	Makes the field mandatory.
`disabled`	`<input>, <button>`	Disables user interaction.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <input type="submit" value="Submit">
</form>

✔ Explanation:

type="text" → Creates a text input field.
placeholder="Enter your name" → Displays a hint inside the input box.
required → Ensures the user must enter a value.
type="submit" → Creates a submit button.

Summary Table of Important HTML Attributes

Attribute	Used With	Purpose
`id`	Any element	Unique identifier
`class`	Any element	Assigns a CSS class
`style`	Any element	Inline CSS styling
`title`	Any element	Tooltip text
`href`	`<a>`	Link URL
`src`	`<img>, <video>`	Media source file
`alt`	`<img>`	Alternative text for images
`width` / `height`	`<img>, <iframe>`	Sets dimensions
`type`	`<input>`	Defines input type
`value`	`<input>, <button>`	Default input value
`placeholder`	`<input>`	Input field hint
`required`	`<input>`	Makes field mandatory
`disabled`	`<input>, <button>`	Disables the element
`onclick`	Any element	Runs a function on click
`onmouseover`	Any element	Runs a function on hover
`data-*`	Any element	Custom attributes for JavaScript

Conclusion

✔ HTML attributes enhance the functionality of elements.
✔ They provide extra information and control over elements.
✔ They are always added inside the opening tag of an element.
✔ Some attributes are global (work on all elements), while others are specific to certain elements.