---
title: "Éléments et attributs"
headingIds:
  [
    "elements-attributes",
    "lowercase-elements-are-html",
    "a-void-element-takes-no-children",
    "attributes",
    "boolean-and-falsy-values",
    "the-style-attribute",
    "event-handlers",
    "custom-attributes",
    "where-to-next",
  ]
---

# Éléments et attributs

Écrivez du HTML en JSX avec des attributs typés et une sérialisation adaptée à chaque valeur.

## Les éléments en minuscules sont du HTML

Les éléments en minuscules sont des balises HTML. Les composants portent une majuscule. Les noms des balises sont validés par le runtime.

```tsx
import { renderToString } from "@vincle/core";

const html = await renderToString(
  <>
    <input type="text" />
    <br />
  </>,
);
```

```html
<input type="text" /><br />
```

### Un élément vide ne reçoit pas d’enfants

Un élément vide comme `<br>` ou `<img>` ne peut pas recevoir d’enfants. Vincle refuse ce contenu plutôt que de produire un document ambigu.

```
[vincle/core] <img> is a void element and cannot have children: move the content next to it, not inside.
```

```tsx
<img src={src}>Caption</img>       // ❌ throws
<img src={src} alt="Caption" />    // ✅
<figure><img src={src} /><figcaption>Caption</figcaption></figure>  // ✅
```

## Attributs

Utilisez `class` ou `className`, `for` ou `htmlFor`. Les aliases connus sont convertis ; les attributs personnalisés et `data-*` sont conservés. Les valeurs sont échappées.

```tsx
import { renderToString } from "@vincle/core";

const html = await renderToString(<div className="foo" class="bar" />);
```

```html
<div class="bar"></div>
```

## Booléens et valeurs falsy

Les attributs booléens connus sont présents pour `true` et absents pour `false`. Les attributs ARIA conservent leur valeur textuelle. `null` et `undefined` omettent l’attribut.

```tsx
<button disabled={isBusy}>Save</button>
// isBusy true  → <button disabled>Save</button>
// isBusy false → <button>Save</button>
```

## L’attribut `style`

`style` accepte une chaîne ou un objet de propriétés CSS. Les noms sont normalisés, les noms dangereux sont écartés et les valeurs sont échappées. Le contenu CSS de confiance reste à la charge de l’application.

```tsx
import { renderToString } from "@vincle/core";

// String style
const html1 = await renderToString(<p style="color: red; font-size: 1.5rem;">Hello</p>);

// Object style (camelCase → kebab-case conversion)
const html2 = await renderToString(<p style={{ color: "red", fontFamily: "sans-serif" }}>Hello</p>);
```

## Gestionnaires d’événements

Les gestionnaires d’événements sont des attributs HTML sous forme de chaînes, pas des callbacks. Passer une fonction provoque une erreur. Préférez un script externe lorsque votre CSP interdit le JavaScript inline.

## Attributs personnalisés

Les attributs `data-*`, les éléments personnalisés et les augmentations de types permettent d’intégrer d’autres outils. Les types spécifiques d’une intégration appartiennent à son package.

## Pour continuer

Consultez les [types JSX](/fr/api/core/jsx-types), les [composants](/fr/guide/jsx/components) et le [modèle de sécurité](/fr/guide/security).