diff options
Diffstat (limited to 'files/fr/web/html/element/u/index.md')
| -rw-r--r-- | files/fr/web/html/element/u/index.md | 252 |
1 files changed, 128 insertions, 124 deletions
diff --git a/files/fr/web/html/element/u/index.md b/files/fr/web/html/element/u/index.md index 169e81d6bb..1ed27bb44b 100644 --- a/files/fr/web/html/element/u/index.md +++ b/files/fr/web/html/element/u/index.md @@ -8,182 +8,186 @@ tags: - Web translation_of: Web/HTML/Element/u --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><u></code></strong> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.</p> +L'élément HTML **`<u>`** permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié. -<div class="warning"> -<p><strong>Attention :</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> -</div> +> **Attention :** Cet élément était auparavant appelé _underline_ pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur `"underline"`. -<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.</p> +Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle. -<p>La spécification rappelle que dans la majorité des cas, d'autres éléments que <code><u></code> doivent être utilisés.</p> +La spécification rappelle que dans la majorité des cas, d'autres éléments que `<u>` doivent être utilisés. -<div class="note"> -<p><strong>Note :</strong> Attention à la mise en forme par défaut d'un élément <code><u></code> qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).</p> -</div> +> **Note :** Attention à la mise en forme par défaut d'un élément `<u>` qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut). -<h3 id="Cas_d'utilisation">Cas d'utilisation</h3> +### Cas d'utilisation -<p>L'élément <code><u></code> peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.</p> +L'élément `<u>` peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle. -<p>L'élément <code><u></code> ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.</p> +L'élément `<u>` ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre. -<h3 id="Autres_éléments_pouvant_être_utilisés">Autres éléments pouvant être utilisés</h3> +### Autres éléments pouvant être utilisés -<p>Dans la plupart des cas, il faudra utiliser un autre élément que <code><u></code> :</p> +Dans la plupart des cas, il faudra utiliser un autre élément que `<u>` : -<ul> - <li>{{HTMLElement("em")}} afin d'indiquer une emphase</li> - <li>{{HTMLElement("b")}} afin d'indiquer une attention particulière</li> - <li>{{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases</li> - <li>{{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière</li> - <li>{{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication</li> - <li>{{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.</li> -</ul> +- {{HTMLElement("em")}} afin d'indiquer une emphase +- {{HTMLElement("b")}} afin d'indiquer une attention particulière +- {{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases +- {{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière +- {{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication +- {{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental. -<p>Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}.</p> +Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}. -<p>Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p> +Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur `"underline"`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Indiquer_une_erreur">Indiquer une erreur</h3> +### Indiquer une erreur -<p>Dans cet exemple, on utilise <code><u></code> et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.</p> +Dans cet exemple, on utilise `<u>` et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p> +```html +<p> Ce paragraphe contient un mot mal - <u class="spelling">rothografié</u>. -</p></pre> + <u class="spelling">rothografié</u>. +</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">u.spelling { +```css +u.spelling { text-decoration: red wavy underline; -}</pre> +} +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}}</p> +{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}} -<h3 id="Éviter_<u>">Éviter <code><u></code></h3> +### Éviter `<u>` -<p>La plupart du temps, ce n'est pas l'élément <code><u></code> qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.</p> +La plupart du temps, ce n'est pas l'élément `<u>` qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier. -<h4 id="Souligner_pour_la_simple_mise_en_forme">Souligner pour la simple mise en forme</h4> +#### Souligner pour la simple mise en forme -<p>Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur <code>"underline"</code> :</p> +Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur `"underline"` : -<h5 id="HTML_2">HTML</h5> +##### HTML -<pre class="brush: html"><span class="underline">Le plat du jour</span> -<br> -Soupe de potiron avec un soupçon de noix de muscade</pre> +```html +<span class="underline">Le plat du jour</span> +<br> +Soupe de potiron avec un soupçon de noix de muscade +``` -<h5 id="CSS_2">CSS</h5> +##### CSS -<pre class="brush: css">.underline { +```css +.underline { text-decoration: underline; -}</pre> +} +``` -<h5 id="Résultat_2">Résultat</h5> +##### Résultat -<p>{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}}</p> +{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}} -<h4 id="Indiquer_le_titre_pour_un_livre">Indiquer le titre pour un livre</h4> +#### Indiquer le titre pour un livre -<p>Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <code><u></code> ou <code><i></code>.</p> +Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec `<u>` ou `<i>`. -<h5 id="HTML_3">HTML</h5> +##### HTML -<pre class="brush: html"><p> - Nous avons lu <cite>La Horde du Contrevent</cite> +```html +<p> + Nous avons lu <cite>La Horde du Contrevent</cite> au cours du premier trimestre. -</p></pre> +</p> +``` -<h5 id="Résultat">Résultat</h5> +##### Résultat -<p>{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}</p> +{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" + >Contenu de flux</a + >, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé" + >contenu phrasé</a + >, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible" + >contenu tangible</a + >. + </td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >Contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Tout élément qui accepte du + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '<u>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '<u>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '<u>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}} | {{Spec2('HTML4.01')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.u")}}</p> +{{Compat("html.elements.u")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de <code><u></code>.</li> - <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément <code><u></code>.</li> -</ul> +- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`. +- La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément `<u>`. |