HTML Attributes

What are HTML Attributes?

HTML attributes provide additional information about HTML elements. Attributes are always included in the opening tag and are written as name/value pairs like this:

<element attribute="value">

For example, the <a> (anchor) element can use the href attribute to specify the URL of the link:

<a href="https://www.example.com">Visit Example</a>

Common HTML Attributes

Here are some of the most commonly used HTML attributes:

href: Specifies the URL for links in the <a> element.

<a href="https://www.example.com">Link</a>

src: Specifies the source URL of an image in the <img> element.

<img src="image.jpg" alt="Description of image">

alt: Provides alternative text for an image, used if the image cannot be displayed.

<img src="image.jpg" alt="A beautiful scenery">

style: Adds inline CSS styles to an element. Example:

<p style="color:blue; font-size:20px;">This is styled text.</p>

title: Specifies extra information about an element. When the user hovers over the element, the title will appear as a tooltip.

<p title="This is a paragraph">Hover over me to see the tooltip.</p>

Element-Specific Attributes

Some HTML attributes are only used with specific elements. Here are a few examples:

action (in <form>): Specifies where the form data is sent when the form is submitted.

<form action="/submit" method="post">...</form>

target (in <a>): Specifies where to open the linked document. Common values include _blank (new tab), _self (same tab), etc.

<a href="https://www.example.com" target="_blank">Open in new tab</a>

placeholder (in <input>): Provides a hint about what to enter in a form field.

<input type="text" placeholder="Enter your name">

maxlength (in <input>): Specifies the maximum number of characters that can be entered in an input field.

<input type="text" maxlength="10">

disabled (in <button>, <input>): Disables the element, preventing user interaction.

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

Global Attributes

Global attributes can be used on any HTML element. Here are some commonly used global attributes:

id: Assigns a unique identifier to an element, which can be used to target it with CSS or JavaScript.

<p id="intro">This is a paragraph with an ID.</p>

class: Assigns one or more class names to an element, which can be used for styling with CSS or targeting with JavaScript.

<p class="intro main-text">This is a paragraph with classes.</p>

data-*: Used to store custom data in an element. For example, data-user-id can store a user ID.

<div data-user-id="123">User Profile</div>

hidden: Hides the element from the user, but it remains in the HTML document.

<div hidden>This is hidden content.</div>

lang: Specifies the language of the element's content.

<p lang="en">This is an English paragraph.</p>