HTML Attributes

HTML attributes are special information written inside an HTML tag that provides extra details about the element, such as a link, image source, size, or style.

• They are written inside the opening tag (<>).

Syntax:

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

Parts of Attributes:

• id & style -> These are the attribute names written before the = operator.
• intro & color:red -> These are the attribute values written after the = operator and are usually enclosed in quotation marks (" ").
• = -> It assigns the attribute value to the attribute name.

Note: Multiple attributes are separated by a space.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Attributes Example</title>
</head>
<body>

    <p style="color:red;">This example shows attributes used in the opening tag of a paragraph element.</p>

</body>
</html>

Output:

This example shows attributes used in an opening tag of a paragraph element.

Uses:

• They provide extra information about an HTML element.
• They provide important information such as src, href, and alt.
• They are used to add extra styles or features to an element.
• They are used to specify links, image sources, sizes, and styles.

Properties of HTML Attributes:

1. HTML Attributes Are Written Inside the Opening Tag

Example:

<p style="color:red;">This is an example of a paragraph in which the attribute is written inside the opening tag of the <p> element.</p>

2. An HTML Element Can Have Multiple Attributes

Example:

<p id="intro" class="highlight" style="color:red;" title="Introduction">This is an example of a paragraph in which multiple attributes are set in the opening tag of the <p> element.</p>

3. An Attribute Has a Name and a Value

Example:

<p style="color:red;">This example shows an attribute with a name, style, and a value, "color:red;".</p>

4. Attribute Values Are Usually Enclosed in Quotation Marks

Example:

<p style="color:red;">This paragraph uses an attribute value enclosed in quotation marks.</p>

5. Single Quotes and Double Quotes Can Enclose Attribute Values

Example:

<p title="Double-quoted value">This paragraph uses a double-quoted attribute value.</p>

<p title='Single-quoted value'>This paragraph uses a single-quoted attribute value.</p>

6. HTML Attribute Names Are Generally Not Case-Sensitive

Example:

<p TITLE="Not case sensitive" style="color:red;">An attribute name is generally not case-sensitive. This means you can write it using lowercase or uppercase letters.</p>

7. Boolean Attributes Do Not Need an Attribute Value

Example:

<input type="text" disabled>

<p>The disabled attribute is a boolean attribute that does not need an attribute value.</p>

8. An Empty Attribute Has an Empty Value

Example:

<p title="">This paragraph uses the title attribute with an empty value.</p>

9. Some Attribute Values Can Be Written Without Quotation Marks

Example:

<p id=intro>This paragraph is an example in which the attribute value is written without quotation marks.</p>

Important HTML Attributes

Attribute Name	Found In	Purpose
id	Most HTML elements	Gives an element a unique identity
class	Most HTML elements	Groups elements for CSS and JavaScript
style	Most HTML elements	Adds inline CSS styles
title	Most HTML elements	Shows additional information as a tooltip
lang	<html> and other HTML elements	Specifies the language of the document
dir	Most HTML elements	Sets the text direction
href	<a>, <link>, <area>, <base>	Specifies a URL
target	<a>, <area>, <form>, <base>	Specifies where content opens
src	<img>, <script>, <iframe>, <audio>, <video>	Specifies the source URL
alt	<img>, <area>	Provides alternative text
width	<img>, <video>, <iframe>, <canvas>	Specifies the width
height	<img>, <video>, <iframe>, <canvas>	Specifies the height
download	<a>	Suggests downloading the linked resource
controls	<audio>, <video>	Shows media controls
autoplay	<audio>, <video>	Starts media automatically
loop	<audio>, <video>	Repeats the media
muted	<audio>, <video>	Mutes the media
name	<input>, <select>, <textarea>, <button>, <form>	Gives an element a name
value	<input>, <button>, <option>	Specifies the value
type	<input>, <button>	Specifies the type
placeholder	<input>, <textarea>	Shows hint text inside a field
required	<input>, <select>, <textarea>	Makes a field required
disabled	Form controls	Disables a form control
readonly	<input>, <textarea>	Makes a field read-only
checked	<input type="checkbox">, <input type="radio">	Preselects a checkbox or radio button
selected	<option>	Preselects an option
multiple	<input>, <select>	Allows multiple values or selections
min	<input>	Specifies the minimum value
max	<input>	Specifies the maximum value
step	<input>	Specifies the allowed value interval
minlength	<input>, <textarea>	Specifies the minimum text length
maxlength	<input>, <textarea>	Specifies the maximum text length
pattern	<input>	Specifies a validation pattern
action	<form>	Specifies where form data is sent
method	<form>	Specifies how form data is sent
for	<label>	Connects a label with a form control
colspan	<td>, <th>	Makes a table cell span multiple columns
rowspan	<td>, <th>	Makes a table cell span multiple rows
open	<details>, <dialog>	Specifies that the element is open