# Attribute “X” not allowed on element “Y” at this point.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-x-not-allowed-on-element-y-at-this-point
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Every HTML element has a defined set of attributes it accepts. The HTML specification maintains strict rules about which attributes belong on which elements. For example, the `href` attribute is valid on an `<a>` element but not on a `<div>`. The `for` attribute belongs on `<label>` and `<output>` elements but not on `<span>`. When you place an attribute on an element that doesn't recognize it, the validator flags the error.

This issue matters for several reasons. First, browsers may silently ignore unrecognized attributes, meaning your code might appear to work but isn't actually doing anything — leading to hard-to-diagnose bugs. Second, assistive technologies like screen readers rely on valid HTML to correctly interpret page structure and behavior. Invalid attributes can confuse these tools and degrade accessibility. Third, standards-compliant HTML ensures consistent behavior across all browsers and future-proofs your code.

There are several common causes of this error:

- **Typos or misspellings** — Writing `hieght` instead of `height`, or `scr` instead of `src`.
- **Attributes on the wrong element** — Using `placeholder` on a `<div>` instead of an `<input>` or `<textarea>`.
- **Obsolete attributes** — Using presentational attributes like `align`, `bgcolor`, or `border` that have been removed from the HTML specification in favor of CSS.
- **Framework-specific attributes** — Using attributes like `ng-click` (Angular), `v-if` (Vue), or `@click` (Vue shorthand) that aren't part of standard HTML. These frameworks typically process them before the browser sees them, but the raw HTML won't validate.
- **Custom attributes without the `data-*` prefix** — Inventing your own attributes like `tooltip` or `status` without following the `data-*` convention.
- **ARIA attributes with typos** — Writing `aria-role` instead of the correct `role`, or `aria-labelled` instead of `aria-labelledby`.

## Examples

### Attribute used on the wrong element

The `placeholder` attribute is only valid on `<input>` and `<textarea>` elements:

```html
<!-- ❌ "placeholder" not allowed on "div" -->
<div placeholder="Enter text here">Content</div>

<!-- ✅ Use placeholder on a supported element -->
<input type="text" placeholder="Enter text here">
```

### Obsolete presentational attribute

The `align` attribute has been removed from most elements in HTML5. Use CSS instead:

```html
<!-- ❌ "align" not allowed on "div" -->
<div align="center">Centered content</div>

<!-- ✅ Use CSS for presentation -->
<div style="text-align: center;">Centered content</div>
```

### Custom attribute without `data-*` prefix

If you need to store custom data on an element, use the `data-*` attribute format:

```html
<!-- ❌ "tooltip" not allowed on "span" -->
<span tooltip="More information">Hover me</span>

<!-- ✅ Use a data-* attribute for custom data -->
<span data-tooltip="More information">Hover me</span>
```

The `data-*` attributes are specifically designed for embedding custom data. You can access them in JavaScript via the `dataset` property, e.g., `element.dataset.tooltip`.

### Misspelled attribute

A simple typo can trigger this error:

```html
<!-- ❌ "widht" not allowed on "img" -->
<img src="photo.jpg" widht="300" alt="A photo">

<!-- ✅ Correct the spelling -->
<img src="photo.jpg" width="300" alt="A photo">
```

### ARIA attribute typo

ARIA attributes must match their exact specification names:

```html
<!-- ❌ "aria-labelled" not allowed on "input" -->
<input type="text" aria-labelled="name-label">

<!-- ✅ Use the correct ARIA attribute name -->
<input type="text" aria-labelledby="name-label">
```

### Framework-specific attributes

If you're using a JavaScript framework and want your source templates to validate, be aware that framework-specific syntax won't pass validation. In Vue, for example, you can use the `data-*` equivalent or accept that templates are preprocessed:

```html
<!-- ❌ "v-if" not allowed on "div" -->
<div v-if="isVisible">Hello</div>

<!-- This is expected with Vue templates and is typically not a concern,
     since the framework processes these before they reach the browser. -->
```

When encountering this error, check the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) reference for the element in question to see which attributes it actually supports. This will quickly clarify whether you need to fix a typo, move the attribute to a different element, replace it with CSS, or convert it to a `data-*` attribute.