Existe-t-il une règle verticale en html ?

Question

Je sais qu'il existe une hr (règle horizontale) en html, mais je ne crois pas qu'il existe une vr (règle verticale). Est-ce que je me trompe et si non, pourquoi n'y a-t-il pas de règle verticale ?

Answer 1

Non, il n'y a pas de règle verticale.

EDIT : Nous sommes en 2021 (douze ans après avoir répondu à cette question), et je ne pense plus que mon explication initiale soit vraie :

(explication originale)

Il n'est pas logique d'en avoir un. Le HTML est analysé séquentiellement, ce qui signifie que vous devez présenter votre code HTML de haut en bas, de gauche à droite, comme vous voulez qu'il apparaisse de haut en bas, de gauche à droite (généralement). droite (généralement) Une balise vr ne suit pas ce paradigme.

Je ne sais pas exactement pourquoi une balise VR n'a jamais été introduite, mais ce n'est probablement pas à cause de la façon dont le HTML est analysé - il existe de nombreux modes de mise en page différents en HTML/CSS qui ne suivent pas ce "paradigme".

Si je devais maintenant spéculer sur la raison pour laquelle il n'y a pas d'étiquette VR, je pourrais me pencher sur les points suivants Définition de la balise HR par MDN comme indice :

Le HTML <hr> représente une rupture thématique entre des éléments au niveau du paragraphe : par exemple, un changement de scène dans une histoire, ou un changement de sujet dans une section.

Dans la pratique, cependant, le <hr> finit souvent par être utilisé à des fins autres que sa signification sémantique. Bien qu'il puisse sembler, sur la base de son utilisation dans le monde réel, qu'il devrait y avoir une balise <vr> il ne ressemblerait probablement pas à la définition sémantique de la balise <hr> tag. Il n'a probablement jamais été envisagé de l'introduire.

Mon intuition est que les créateurs suggèrent que le domaine de la solution à ce problème se trouve dans le CSS, et non dans le HTML (et la plupart des réponses à cette question de l'OS reflètent cela).

La solution de Nixinova semble être la solution la plus élégante et la plus moderne à ce problème.

(Le reste de mon ancienne réponse suit ci-dessous) :

Il est cependant facile de le faire en utilisant le CSS. Ex :

<div style="border-left:1px solid #000;height:500px"></div>

Notez que vous devez spécifier une hauteur ou remplir le conteneur avec du contenu.

Answer 2

Vous pouvez établir une règle verticale comme suit : <hr style="width: 1px; height: 20px; display: inline-block;">

Answer 3

Comme d'autres l'ont souligné, le concept de règle verticale ne correspond pas aux idées originales qui sous-tendent la structure et la présentation des documents HTML. Cependant, de nos jours (en particulier avec la prolifération des applications web), il existe un petit nombre de scénarios où cela serait effectivement utile.

Prenons l'exemple d'un menu de navigation horizontal fixé en haut de l'écran, semblable à la barre de menu de la plupart des applications GUI à fenêtres. Vous disposez de plusieurs éléments de menu de niveau supérieur, disposés de gauche à droite, qui, lorsque vous cliquez dessus, ouvrent des menus déroulants. Il y a quelques années, il était courant de créer ce menu à l'aide d'un tableau à une seule rangée, mais il s'agit là d'un mauvais code HTML et il est largement reconnu que la meilleure façon de procéder est d'utiliser une liste avec des feuilles de style CSS fortement personnalisées.

Supposons maintenant que vous souhaitiez regrouper des éléments similaires, mais que vous ajoutiez un séparateur vertical entre les groupes, afin d'obtenir quelque chose comme ceci :

[Item 1a] [Item 1b] | [Item 2a] [Item 2b]

Utilisation <hr style="width: 1px; height: 100%; ..." /> fonctionne, mais peut être considéré comme sémantiquement incorrect car vous modifiez la fonction de cet élément. En outre, vous ne pouvez pas l'utiliser dans certains éléments pour lesquels la DTD HTML n'autorise que des éléments de niveau inline (par exemple, dans un élément de type <span> ).

Une meilleure option serait <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span> Cependant, tous les navigateurs ne prennent pas en charge l'option display: inline-block; La seule véritable option au niveau de la ligne est donc d'utiliser une image comme suit :

<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />

Cela présente l'avantage supplémentaire d'être compatible avec les navigateurs en mode texte (comme lynx), car le caractère pipe est affiché à la place de l'image. (Je suis toujours contrarié par le fait que M$IE utilise incorrectement le texte alt comme info-bulle ; c'est à cela que sert l'attribut title).

Answer 4

<style type="text/css">
.vr
{
  display:inline;
  height:100%;
  width:1px;
  border:1px inset;
  margin:5px
}
</style>

<div style="font-size:50px">Vertical Rule: &rarr;<div class="vr"></div>&larr;</div>

Essayez-le.

Answer 5

Il n'y en a pas, où irait-il ?

Utilisez CSS pour mettre une bordure droite sur un élément si vous voulez quelque chose comme ça.