web-dev-qa-db-fra.com

HTML 5: Est-ce <br>, <br/> ou <br />?

J'ai essayé de vérifier autres réponses , mais je suis toujours confus - surtout après avoir vu référence W3schools HTML 5 .

Je pensais que HTML 4.01 était censé "permettre" à une seule balise d'être <img> et <br>. Puis XHTML est venu avec <img /> et <br /> ( où quelqu'un a dit que l'espace est là pour les navigateurs plus anciens ).

Maintenant, je me demande comment je suis censé formater mon code lorsque je pratique HTML 5.

Est-ce <br>, <br/> ou <br />?

1917
Eikern

Simplement <br> est suffisant.

Les autres formes sont là pour la compatibilité avec XHTML; pour permettre d’écrire le même code que XHTML et qu’il fonctionne également en HTML. Certains systèmes générant du HTML peuvent être basés sur des générateurs XML et ne peuvent donc pas générer uniquement une balise nue <br>; Si vous utilisez un tel système, il est correct d'utiliser <br/>, il n'est tout simplement pas nécessaire si vous n'avez pas besoin de le faire.

Cependant, très peu de gens utilisent XHTML. Vous devez utiliser votre contenu sous la forme application/xhtml+xml pour qu'il soit interprété en tant que XHTML, ce qui ne fonctionnera pas dans les anciennes versions de IE. page affichée dans les navigateurs prenant en charge XHTML. Ainsi, la plupart de ce qui ressemble à XHTML sur le Web est actuellement diffusé et interprété au format HTML. Voir Servir XHTML en tant que texte/html considéré comme nuisible pour plus d'informations.

1449
Brian Campbell

Je pense que cette citation du HTML 5 Reference Draft fournit la réponse:

3.2.2.2 Void éléments

Le terme , éléments vides est utilisé pour désigner les éléments qui doivent être vide . Ces exigences s'appliquent uniquement à la syntaxe HTML. En XHTML, tous ces éléments sont traités comme des éléments normaux, mais doivent être marqués comme des éléments vides.

Il est interdit à ces éléments de contenir du contenu. En HTML, ces éléments ont un balise de début seulement. La syntaxe balise à fermeture automatique peut être utilisée. Le balise de fin doit être omis car l'élément est automatiquement fermé par l'analyseur.

Exemple HTML:
Un élément void dans la syntaxe HTML. Ceci n'est pas autorisé dans la syntaxe XHTML.

<hr>

Exemple:
Elément void utilisant la syntaxe de balise à fermeture automatique compatible HTML et XHTML.

<hr/>

Exemple XHTML:
Un élément void utilisant la syntaxe XHTML uniquement avec une balise de fin explicite. Ceci n'est pas autorisé pour les éléments void dans la syntaxe HTML.

<hr></hr>
210
Daan

XML ne permet pas de laisser les balises ouvertes, donc <br> est un peu pire que les deux autres. Les deux autres sont à peu près équivalents au second (<br/>) préféré pour la compatibilité avec les navigateurs plus anciens. En fait, l'espace avant / est préférable pour des raisons de compatibilité, mais je pense que cela n'a de sens que pour les tags dotés d'attributs. Je dirais donc soit <br/> ou <br />, selon ce qui convient à votre esthétique.

En résumé: les trois sont valables, le premier (<br>) étant un peu moins "portable".

Edit : Maintenant que nous sommes tous fous de spécifications, je pense que cela vaut la peine de souligner que, selon dev.w3.org =:

Les balises de début comprennent les parties suivantes, dans exactement l'ordre suivant:

  1. Un caractère "<".
  2. Le nom de la balise de l'élément.
  3. Facultativement, un ou plusieurs attributs, chacun d'eux devant être précédé d'un ou de plusieurs espaces.
  4. Facultativement, un ou plusieurs espaces.
  5. Éventuellement, un caractère "/", qui peut être présent uniquement si l'élément est un élément vide.
  6. Un caractère ">".
131

En HTML (jusqu'à HTML 4) : utilisez <br>

En HTML 5 : <br> est préférable, mais <br/> et <br /> est également acceptable.

Dans XHTML: <br /> est préférable. Peut aussi utiliser <br/> ou <br></br>

Remarques:

  • <br></br> n'est pas valide en HTML 5, il sera considéré comme deux sauts de ligne.
  • XHTML est sensible à la casse, HTML n'est pas sensible à la casse.
  • Pour assurer la compatibilité ascendante, certains anciens navigateurs analysent XHTML en tant que HTML et échouent sur <br/> mais pas <br />.

Référence:

100
JackDev

Selon spec , la forme attendue est <br> pour HTML 5, mais une barre oblique de fermeture est autorisée.

54
tvanfosson

XML requiert que toutes les balises aient une balise de fermeture correspondante. Il existe donc une syntaxe abrégée spéciale pour les balises sans contenu interne.

HTML5 n'est pas du XML, il ne devrait donc pas poser une telle exigence. HTML 4.01 non plus.

Par exemple, dans spécifications HTML5 , tous les exemples avec la balise br utilisent la syntaxe <br>, et non <br/>.

UPD En fait, <br/> est autorisé en HTML5 . 9.1.2.1, 7.

20
sastanin

Je recommanderais d'utiliser <br /> pour les raisons suivantes:

1) Les éditeurs de texte et XML mettant en évidence la syntaxe XML dans différentes couleurs seront mis en évidence correctement avec <br /> mais ce n'est pas toujours le cas si vous utilisez <br>

2) <br /> est rétro-compatible avec XHTML et le code HTML bien formé (c'est-à-dire: XHTML) est souvent plus facile à valider pour les erreurs et le débogage.

3) Certains analyseurs syntaxiques anciens et certaines spécifications de codage nécessitent de l’espace avant la barre oblique finale (c.-à-d.: <br /> au lieu de <br/>), tels que le WordPress Spéc. De codage du plugin: http://make.wordpress.org/core/handbook/coding-standards/html/

D'après mon expérience, je n'ai jamais rencontré de cas où l'utilisation de <br /> pose problème, cependant, il existe de nombreux cas où <br/> ou plus particulièrement <br> pourrait poser problème dans les anciens navigateurs et outils.

19
Kmeixner

Si vous êtes intéressé par la comparabilité (pas la compatibilité, mais la comparabilité), alors je m'en tiens à <br />.

Sinon, <br> est correct.

14
MindStalker
  1. Si vous exportez du HTML sur un site Web classique, vous pouvez utiliser <br> ou <br/>, les deux sont valables à tout moment où vous diffusez HTML5. sous forme de texte/html.

  2. Si vous utilisez HTML5 en tant que XHTML (c.-à-d. Type de contenu application/xhtml + xml, avec une déclaration XML), vous devez utiliser une balise à fermeture automatique, comme suit: <br/>.

    Si vous ne le faites pas, certains navigateurs peuvent refuser catégoriquement de rendre votre page (Firefox en particulier est très strict quant au rendu des pages xhtml + xml valides).

    Comme indiqué dans le point 1. <br/> est également valable pour HTML5 qui est généré en tant que XML, mais utilisé comme texte/html normal sans une déclaration XML (telle que une transformation XSL générant des pages Web ou quelque chose de similaire).

Pour éclaircir la confusion: il n’est pas nécessaire de mettre un espace avant la barre oblique dans HTML5 et cela n’a aucune incidence sur le rendu de la page (si quelqu'un peut citer un exemple, je retirerai cela, mais je ne crois pas que ce soit le cas. true - mais IE fait certainement beaucoup d'autres choses étranges avec toutes les formes de balises <br>).

L'excellent validateur de http://validator.w3.org est vraiment utile pour vérifier ce qui est valide (bien que je ne sois pas sûr que vous puissiez vous fier à cela pour vérifier également le type de contenu).

12
Iain Collins

<br> et <br /> sont tous deux acceptables en HTML5, mais dans l'esprit du langage HTML, <br> devrait être utilisé. HTML5 permet de fermer les barres obliques pour être plus compatible avec les documents qui étaient auparavant HTML 4.01 et XHTML 1.0, facilitant ainsi la migration vers HTML5. Bien sûr, <br/> est également acceptable, mais pour être compatible avec certains navigateurs plus anciens, vous devez laisser un espace avant la barre oblique de fermeture (/).

12
kevinji

<br> et <br/> suffiront, mais je préfère <br/> parce que c'est un peu plus logique. Il est logique d'attendre une balise de fermeture chaque fois qu'il y a une balise d'ouverture. Par conséquent, votre code est légèrement plus facile à lire si vous n'utilisez pas de balise d'ouverture s'il n'y a pas de balise de fermeture.

Tous les navigateurs (à l'exception peut-être de très anciens qui n'ont pas d'importance) les afficheront exactement de la même manière. Cependant, <br> n'est pas compatible xHTML.

11
Dan Bray

<br> est suffisant mais en XHTML <br /> est préféré selon le WHATWG et selon le W3C .

Pour citer Section 8.1.2.1 sur HTML 5.2 Recommandation du W3C, 14 décembre 2017

Les balises de démarrage doivent avoir le format suivant:

  1. Après les attributs, ou après le nom de la balise s'il n'y a pas d'attribut, il peut y avoir un ou plusieurs espaces. (Certains attributs doivent obligatoirement être suivis d'un espace. Voir §8.1.2.3 Attributs ci-dessous.)

  2. Ensuite, si l'élément est l'un des éléments vides, ou si l'élément est un élément étranger, il peut y avoir un seul caractère SOLIDUS U + 002F (/). Ce caractère n'a aucun effet sur les éléments vides, mais sur les éléments étrangers, il marque la balise de début comme à fermeture automatique.

Si vous utilisez Dreamweaver CS6, la complétion automatique se présente sous la forme <br />.

Pour valider votre fichier HTML sur le W3C, voir: http://validator.w3.org/

7
krupal

<br> et <br/> restituent différemment. Certains navigateurs interprètent <br/> comme <br></br> et insèrent deux sauts de ligne.

7
Samuel

En validation, de cette question, cela dépend vraiment de ce que !DOCTYPE vous essayez de faire passer par la vérification.

Mon favori personnel est 4.01 Trans où je viens d'utiliser le <br/> et il supprime les avertissements et les erreurs qui ont pu apparaître lors de la validation.

Strict est une bête beaucoup plus compliquée, ça déteste "SHORTTAGS" et ne veut littéralement que le <br></br>

Dans HTML5 ou le "LAX" du monde du code, il n'y a vraiment pas de bonne réponse car elle detects every example you put up est aussi correcte ......

En fin de compte, je pense que tout ce qui compte is what validation YOU PREFER ou the person that you are working for prefers... avec le lackadaisical mouvement dans la rigueur du code dans html5 nous voyons des CODEURS TRÈS LAZY

5
Slow Poke

IMHO il est préférable d'utiliser la notation régulière (<br />) au lieu de la notation pardonner (<br>) pour les raisons suivantes :

Cohérence

Dans votre code HTML, il existe probablement des SVG et SVG ne supporte que la notation normale (par exemple <rect />).

Piratage

Les cadres tels que React et NativeScript n'utilisent pas la notation XML.
Votre code de marquage sera plus facile à analyser.

Clarté

La notation régulière est plus facile à lire et à comprendre, même tard le soir.

Caractéristiques

<br> et <br /> sont des balises HTML valides.

Conclusion

Si vous utilisez un éditeur de texte à part entière, configurez-le pour qu'il utilise la notation normale (appelée XHTML par Emmet ).
Par exemple, dans Code Visual Studio , il vous suffit d’ajouter la ligne suivante à vos paramètres:

"emmet.syntaxProfiles": {"html": "xhtml"}
4
isar

Tout ce que je sais, c’est que <br /> donne une rupture avec une ligne blanche et que <br> donne juste une pause dans certains cas. Cela m'est arrivé lorsque je configurais un script IPN (PHP) et envoyais des mails et vérifiais la boîte de réception. Je ne sais pas pourquoi, mais le message m'a semblé bien paraître en utilisant à la fois <br /> and <br>

Regardez le courrier ici: http://snag.gy/cLxUa.jpg

Les deux premières sections de texte sont séparées par <br />, d'où les lignes d'espacement, les trois dernières lignes de texte dans le bas et la dernière section sont séparées par <br> et ne donnent qu'une nouvelle ligne.

3
Emanuel Olsson

En HTML <br> et en XHTML <br/>.

Je vous suggère d'utiliser <br/>.

3
Shubham Kumar

<br> fonctionne très bien. Les versions plus strictes telles que XHTML nécessitent que vous ajoutiez les versions de clôture et les versions réellement anciennes de HTML qui n'incluent pas de DOCTYPE transforme <br> en une balise non vide, comme <br></br>.

Résumé: <br> tout va bien. D'autres sont aussi très bien.

2
Aravind Suresh

Comme beaucoup d'autres l'ont déjà mentionné, <br> et <br/> sont acceptables.

Je suppose que le compromis est la meilleure lisibilité et la compatibilité ascendante de <br/> par rapport à l'envoi d'un caractère de moins aux utilisateurs finaux avec <br>.

Et puisque Google utilise <br> ainsi que moi.

(Bien sûr, gardez à l’esprit qu’ils pourraient me servir <br> parce que j’utilise Chrome qu’ils savent le supporter. Dans IE, ils pourraient toujours servir <br/>)

2
Dimitris

Dans HTML5 , la barre oblique n'est plus nécessaire: <br>, <hr>

2
harold ramos

La plupart des cas en HTML, les balises sont en paire. Mais pour un saut de ligne, vous n'avez pas besoin d'une paire de balises. Par conséquent, pour indiquer cela, HTML utilise le format <br/>. <br/> est le bon. Utilisez ce format.

La balise <br> n'a pas de balise de fin en HTML En XHTML, la balise <br> doit être correctement fermée, comme ceci: <br />

En XML, chaque balise doit être fermée. XHTML est une extension de XML, par conséquent toutes les règles de XML doivent être suivies pour XHTML valide. Par conséquent, même les balises vides (nœuds sans nœuds enfants) comme
devrait être fermé. XML a une forme courte appelée balises à fermeture automatique pour les nœuds vides. Vous pouvez écrire <br></br> as <br />. Par conséquent, en XHTML, <br /> est utilisé.

HTML est très indulgent à cet égard, et il n’existe pas de telle règle. Ainsi, en HTML, les nœuds vides tels que <br> <hr> <meta>, etc. sont écrits sans la barre oblique de fermeture.

HTML

<br>
<hr>
<meta name="keywords" content="">
<link rel="canonical" href="http://www.google.com/">

XHTML

<br />
<hr />
<meta name="keywords" content="" />
<link rel="canonical" href="http://www.google.com/" />

Toutes les balises ne peuvent pas être auto-fermées. Par exemple, une balise telle que <script src="jQuery.min.js" /> n'est pas autorisée par la DTD XHTML.

2
Bhavin Solanki

Ummm ..... est-ce que quelqu'un connaît un SEUL vendeur, utilisateur-agent ou fabricant de navigateur qui a déjà suivi les spécifications du W3C à 100% ??? Donc, si HTML5 indique qu'il prend en charge les trois versions d'éléments de rupture, vous pouvez parier que les fournisseurs prennent en charge les versions identiques et encore plus réduites!

La SEULE chose qui compte dans ce débat est d’utiliser uniformément le codage qui suit également les spécifications XML ainsi que les spécifications HTML lorsque cela est possible. Cela signifie que vous devez utiliser la version XML correcte de la balise break et encourager toute votre équipe à faire de même:

<br />

Le même format barre d'espacement devrait s'appliquer aux balises img, a, hr et meta dans votre code. Pourquoi? Parce que:

  1. Il est rétro-compatible avec les anciens agents utilisateurs/navigateurs XHTML
  2. Les constructeurs de navigateurs supportent néanmoins la version XML, de sorte que la spécification HTML5 est devenue sans objet.
  3. Les implémentations bâclées de la plupart des agents utilisateurs aujourd'hui, dans le passé et à l'avenir l'accepteront.
  4. Il vous permet de comparer votre balisage aux normes XML si vous devez recommencer à créer des documents XHTML/XML à partir de votre balisage.
  5. Il est une "bonne pratique de codage" pour TOUS LES DÉVELOPPEURS WEB de continuer à utiliser des pratiques de marquage solides qui suivent XML, notamment le codage en minuscules, les attributs cités, les caractères XML masqués, etc. Pourquoi? À l'avenir, si vous devez passer aux données XML, vous codez et pensez automatiquement en XML.
  6. Nous ne pouvons qu'espérer qu'à l'avenir, le World Wide Web s'éloigne des normes mises en œuvre par les fournisseurs privés et revienne à un balisage solide, fiable et vérifié qui analyse plus rapidement, transfère plus rapidement les données par fil et rende notre futur Internet plus standardisé. support utilisant XML.

De plus, dans le monde de la robotique et des machines que nous avons ici, où les robots n'ont pas les mêmes problèmes de codage d'interface humaine que HTML5 résout pour nous, ils se feront un plaisir de revenir aux systèmes de données XML et d'analyser ces pages Web beaucoup plus rapidement lorsqu'ils sont convertis au format XML. Les données.

1
Stokely