Utilisation brillante des listes HTML dans la conception Web

Vous pouvez trouver des listes bien conçues tout autour d’Internet. Les concepteurs les utilisent depuis des décennies pour coordonner les informations de page et les mises en page, et sur le Web d'aujourd'hui, vous pouvez constater la grande créativité dans l'utilisation des listes par les concepteurs Web. Ceux-ci incluent des menus de navigation, des liens de profil, des archives, des tâches / listes de contrôle, et des tonnes d'autres utilisations!

Dans cet article, je présenterai différents types de listes HTML, avec des conseils pour les concevoir, en particulier sur la ajouter un avantage unique à votre liste. En outre, je vais vous présenter quelques exemples de sites Web proposant des listes fantastiques, puis vous obtiendrez une liste de sites Web contenant des listes HTML bien conçues. Il n'y a plus de doute sur la façon de donner à vos listes d'apparences simples une apparence unique, et commençons à en tirer le meilleur parti aujourd'hui!

Les éléments de liste

Les concepteurs de sites Web sautent constamment d'un mouvement à un autre, entraînant ainsi une modification des styles de site Web au fil du temps, mais les listes ont résisté à l'épreuve du temps et pourraient très bien figurer dans les innovations futures du World Wide Web..

Avant de consulter les exemples, je souhaite aborder quelques points avec des listes HTML. Il existe différents types de listes que vous pouvez utiliser dans votre propre travail de conception. La majorité des concepteurs de sites Web se concentrent sur Listes non ordonnées qui sont ouverts avec un

tag, mais il existe aussi deux autres variantes moins populaires: Listes Ordonnées et Définitions de données. Je suis entré dans plus de détails ci-dessous.

Listes non ordonnées (

)

Peut-être l'un des éléments les plus utilisés dans les normes HTML4 / HTML5. Les listes non ordonnées produiront les données de la même manière qu’une liste ordonnée. ne verra aucun marqueur numérique sur le côté. Au lieu de cela, chaque article reçoit un petit cercle ou disque et décomposé sur une nouvelle ligne. Cette icône peut également être modifié avec la propriété list-style-type trouvé en CSS.

Voici l'exemple de code de la liste non ordonnée:

 
 
Objet 1
 
Point 2
 
Point 3
 
 

Les listes non ordonnées sont le remède parfait pour la construction liens de navigation. Puisque vous pouvez facilement imbriquer des listes entières dans n'importe quel élément de la liste c'est un simple question de créer des liens de sous-navigation ainsi que. Après avoir supprimé le style de liste, il restera un élément vide. À partir de là, vous pouvez styler les liens d'ancrage pour qu'ils apparaissent sous forme d'éléments de bloc sur votre page, remplissant ainsi le design du menu de navigation. Avec du code jQuery, vous pouvez créer un bel en-tête pour votre site..

Le plus souvent, vous trouverez des listes non ordonnées au milieu d'articles Web ou d'instructions d'installation. Prenez note que Google et les autres robots de recherche ne traitent pas le contenu de votre page de manière différente, donc votre Le référencement ne devrait pas être affecté quel que soit le type d'annonce que vous choisissez.

Listes ordonnées (

)

Lorsque vous avez besoin de commander un ensemble de données, il est possible de configurer votre propre structure de mise en page à partir de zéro, mais de cette manière, vous aurez besoin d'ajouter chaque numéro incrémenté à la main, ce qui peut être fastidieux. Les listes commandées sont parfaits pour garder les tâches numérotées en ligne sans aucune erreur. L'ordre des éléments de votre liste interne (

• ) dictera la présentation des données.

  Voici l'exemple de code de la liste ordonnée:

   
   
  Objet 1
   
  Point 2
   
  Point 3
   
   

  Il est également possible de changer le compteur des numéros réguliers en une poignée d'autres options. Ceux-ci inclus lettrage alphabétique et chiffres romains, pour en nommer quelques uns. Les concepteurs Web utiliseraient une liste ordonnée pour des listes spécifiques au contenu. Données de recette, tâches quotidiennes, favoris, ou Top / récents utilisateurs connectés ne sont que quelques exemples. Souvent, vous verrez commentaires de blog construit en utilisant des listes ordonnées pour garder chaque commentaire dans une séquence numérotée.

  Listes de définition de données (

  )

  Les listes de définitions ne sont plus très souvent vues (pas comme si elles étaient populaires). On les voyait avec des concepteurs Web créant des formats complexes de liens ou de contenu de boîte. le étiquette de liste de données (

  ) est souvent mal compris par les codeurs aujourd'hui. En HTML4.01, les listes de données de spécifications ont été utilisées pour: associer des éléments avec leurs descriptions. Celles-ci ont été appelées listes de définition.

  Voici l'exemple de code de la liste de définition de données:

   
   
  Objet 1
   
  La description
   
  Point 2
   
  La description
   
  Point 3
   
  La description
   
   

  Cependant, avec les nouvelles spécifications HTML5, les listes de données ont été transcrites. Il n’ya pas de différences dans la syntaxe dans la façon dont vous utilisez les éléments, cependant leur but a été mis à jour en tant que liste de description qui consiste en un ou plusieurs termes de données (

  ) suivie d'une ou de plusieurs définitions de données (

  ).

  Un exemple fort tiré de l'article de HTML5 Doctor's est un liste formatée de métadonnées. À l'intérieur d'un seul dl élément de liste que vous feriez définir un terme, tels que votre nom, puis chaque fois balise de définition pourrait décrire des données sur vous, éventuellement votre âge, votre profession, votre ville actuelle, etc. n'importe quel ensemble de données avec des paires clé / valeur s'intègre parfaitement dans une liste de description. Vous pouvez utiliser plusieurs termes de données dans une liste, mais le W3C précise que chaque terme doit être unique dans la liste.

  Maintenant que nous avons défini les 3 styles de liste populaires, passons à quelques exemples! Les concepteurs Web sont devenus très créatifs avec leurs listes au cours des dernières années. J'ai catalogué ci-dessous sept de mes sites Web préférés, en mettant l'accent sur leur utilisation créative des listes..

  Navigation simple dans la liste non ordonnée

  Les menus de navigation sont beaucoup plus simples à créer avec les techniques CSS modernes. C'est pourquoi les listes non ordonnées et même les listes ordonnées sont devenues une option populaire. Un de mes exemples préférés apparaît sur le blog des médias sociaux, Mashable.

  

  En haut de leur en-tête, vous remarquerez 2 principaux ensembles de liens. En haut de leur logo se trouve une petite liste non ordonnée contenant des liens de communauté tels que Top Stories, Trending Topics et People. Le concepteur a créé un style de vol stationnaire élégant qui comporte un fond et une palette de couleurs solides.

  Juste en dessous, vous verrez leurs liens de sous-navigation. Ce menu de navigation mène aux catégories de blog telles que Social Media ou Tech. Les deux listes non ordonnées sont contenues dans un HTML5