web-dev-qa-db-fra.com

L'utilisation de plages imbriquées dans HTML 5 est-elle valide?

Est-ce standard en HTML 5 si nous utilisons span in span?

<span class="fake-input">
  <span id="fake-input"></span>
  <span id="deftext">No file selectedspan</span>
</span>
htmlvalidation
5
mafortis

Cela ressemble à un travail pour une div:

<div class="fake-input">
  <span id="fake-input"></span>
  <span id="deftext">No file selectedspan</span>
</div>

Si vous voulez aller plus loin, vous pouvez utiliser les balises <form>, <input>, etc., mais cela va plus loin.

Les divisions et les étendues n'ont pas de valeur sémantique ni de styles automatiques; ils sont là pour que vous leur assigniez ceci. Cependant, vous utiliseriez généralement divs pour les éléments de bloc et étendues pour les éléments en ligne.

Vous n'obtiendrez pas d'erreur de validation, mais je ne vois pas beaucoup de plages imbriquées ces jours-ci.

4
Henry Visotski

L'imbrication des balises span est valide HTML.

Une balise span est un balisage non sémantique destiné au groupement de contenu en ligne et constitue un wrapper valide pour la formulation de contenu . Cela inclut des balises telles que strong, em, time, etc., mais également des balises additionnelles span.

Vous pouvez le confirmer en collant le code suivant dans le validateur de balisage W3C :

<!DOCTYPE html>
<html lang="en">
<head><title>Nested Spans Test</title></head>
<body>

<span class="fake-input">
    <span id="fake-input"></span>
    <span id="deftext">No file selectedspan</span>
</span>

</body>
</html>

De plus, gardez à l'esprit que le code HTML valide n'est pas aussi grave que vous ne le pensez , car un code HTML non valide n'a probablement aucun effet sur l'affichage du classement ou de la page dans le référencement , tant que le balisage peut être analysé.

Dans un cas comme celui-ci, avec de fausses entrées construites à partir de balises <span>, l'accessibilité devrait être une préoccupation bien plus importante et je recommanderais de rechercher dans , y compris le aria- approprié. Attributs qui exposent les relations et les fonctionnalités de ces éléments à toute personne utilisant un lecteur d'écran ou ne les affichant pas avec vos styles personnalisés.

8
ian.pvd