Je dois faire tenir deux lignes dans une seule balise h1 (au lieu de faire deux balises h1 séparées).
Comment créer un saut de ligne à l'intérieur de la balise h1 ?
Réponses
Trop de publicités?
JWorks Studios
Points
311
A Validé par le W3C La méthode est
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>
marcanuy
Points
13439
En résumant toutes les réponses intelligentes, voici ce que https://validator.w3.org dit pour chacun d'eux :
Validé :
<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>Invalide
<h1>
<p>Line1</p>
<p>Line2</p>
</h1>Raison :
Erreur : L'élément p n'est pas autorisé en tant qu'enfant de l'élément h1 dans ce contexte.
<h1>
<div>line1</div>
<div>line2</div>
</h1>Raison :
Erreur : L'élément div n'est pas autorisé en tant qu'enfant de l'élément h1 dans ce contexte.
Code testé :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>
<p>Line1</p>
<p>Line2</p>
</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>
<h1>
<div>line1</div>
<div>line2</div>
</h1>
</body>
</html>
zoul
Points
51637
Ciro Santilli
Points
3341
Citation standard que br à l'intérieur de h1 est valable
Apprenons à plus de gens à lire la norme actuelle.
4.3.6 " Les éléments h1, h2, h3, h4, h5, et h6 ". dit :
Modèle de contenu : Contenu phrasé.
Ensuite, nous cliquons sur la définition de "Contenu phrasé", ce qui conduit à 3.2.5.2.5 "Contenu phraséologique qui dit :
Le contenu phraséologique est le texte du document, ainsi que les éléments qui balisent ce texte au niveau intra-paragraphe. Les parties du contenu phraséologique forment des paragraphes.
..., br, ..., span, ...
donc nous voyons que br fait partie de l'immense liste des éléments de contenu de la phraséologie, et peut donc être placé à l'intérieur de h1 .
Cela nous montre également qu'une autre option serait de faire quelque chose comme :
<h1><span>ab</span><span>cd</span></h1>et ensuite faire le span être display: inline-block; avec CSS.
- Réponses précédentes
- Plus de réponses
