Je ne sais pas si cet extrait de code est sémantiquement correct:

<ul>
   <li>Winter</li>
   <li>Summer</li>
</ul>

Je sais que la balise <li> peut contenir n'importe quelle balise, à la fois en bloc et en ligne, mais dans l'exemple ci-dessus, le contenu est placé directement sur le <li> sans aucune autre balise ne faisant référence à son type de contenu.

L'exemple ci-dessus est-il correct?

Ou est-il nécessaire (ou meilleure procédure) de s'assurer que chaque contenu répertorié a sa propre balise, afin d'assurer sa signification sémantique? Par exemple:

<ul>
   <li>
       <p>Winter</p>
   </li>
   <li>
       <p>Summer</p>
   </li>
</ul>
1
Biomehanika 21 avril 2017 à 16:04

3 réponses

Meilleure réponse

Oui le code est correct, c'est simplement du texte qui sera rendu entre les éléments <li>, il n'y a rien de mal à cela. Il vous suffirait de spécifier plus de balises autour de celui-ci pour mieux décrire le contenu du document si cela est nécessaire .

N'ajoutez pas de balises juste pour le plaisir. Votre HTML doit cependant valider correctement. Dans sa forme actuelle, le texte est parfaitement décrit comme un élément de liste et peut être interprété comme tel.

2
Luke 21 avril 2017 à 13:08

Cela dépend totalement de votre contenu et de votre type de contenu. Voir le lien ci-dessous, il a presque la même discussion:

https://www.sitepoint.com/community/t/semanticaly-correct-span-tags-inside-li-tags/5585/3

Parfois, vous pouvez avoir du contenu qui doit être mis en évidence, et parfois il s'agit simplement d'afficher de simples informations textuelles. Déterminez toujours la priorité.

0
sumit chauhan 21 avril 2017 à 13:13

La balise p est préférable à utiliser pour informer l'utilisateur d'un contenu textuel (paragraphe) mais pas obligatoire.

Exemple: Vous pouvez mettre un monde simple (comme été ou hiver) considéré par HTML comme du texte

  <ul>
     <li> Summer</li>
     <li> Winter</li>  
  </ul>

Ou peut-être voulez-vous lister le paragraphe?

  <ul>
     <li> <p>Lorium IpsumLorium IpsumLorium Ipsum</p></li>
     <li> <p>Lorium IpsumLorium Ipsum</p></li>  
  </ul>

Autre cas: menu de navigation

<nav> 
  <img src="logo.png" />
  <ul>
     <li><a href="#">home</a></li>
     <li><a href="#">contact</a></li>  
  </ul>
</nav>
-1
Arthur 21 avril 2017 à 13:23