hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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 et les mises en page, et dans le web d'aujourd'hui, vous pouvez voir la grande créativité dans la façon dont les concepteurs de sites Web utilisent des listes. Ceux-ci incluent des menus de navigation, des liens de profil, des archives, des tâches / listes de contrôle, et beaucoup d'autres utilisations!

Dans ce post, je vais présenter différents types de listes HTML, avec des conseils sur leur conception, en particulier sur la façon d' ajouter un avantage unique à votre liste . Aussi, je vais vous prendre à travers quelques exemples de sites Web avec des conceptions de listes fantastiques, et finalement vous obtiendrez une liste de sites Web avec des listes HTML bien conçues. Il n'y a plus de doute sur la façon de rendre vos listes d'apparence unique, et commençons à tirer le meilleur parti d'eux aujourd'hui!

Les éléments de l'inscription

Les concepteurs de sites Web passent constamment d'un train à l'autre, ce qui fait évoluer les styles de site Web au fil du temps, mais les listes ont résisté à l'épreuve du temps et pourraient très bien être utilisées dans l'innovation future du World Wide Web.

Avant de vérifier les exemples, je veux couvrir quelques points avec des listes HTML. Il existe peu de types différents de listes que vous pouvez utiliser dans votre propre travail de conception. La majorité des concepteurs de sites Web se concentrent sur les listes non ordonnées qui sont ouvertes avec un

    tag, mais il existe également deux autres variantes moins populaires: les listes ordonnées et les définitions de données . Je suis allé 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 des données de la même manière qu'une liste ordonnée, mais vous ne verrez aucun marqueur numérique sur le côté . Au lieu de cela, chaque objet reçoit un petit cercle ou un disque et est décomposé en une nouvelle ligne. Cette icône peut également être modifiée avec la propriété list-style-type trouvée dans 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 construire des liens de navigation . Puisque vous pouvez facilement imbriquer des listes entières dans n'importe quel élément de liste, il est facile de créer des liens de sous-navigation . Après avoir supprimé le style de liste, il vous restera un élément vide. De là, vous pouvez créer des liens d'ancrage qui apparaîtront comme des éléments de bloc sur votre page, remplissant ainsi une conception de menu de navigation, et avec un peu de code jQuery, vous pouvez créer un magnifique en-tête pour votre site.

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

    Listes commandées (
      )

    Lorsque vous avez besoin de commander un ensemble de données, il est possible de créer votre propre structure de mise en page à partir de zéro, mais de cette façon, vous devrez ajouter chaque numéro incrémenté à la main, ce qui peut être fastidieux. Les listes ordonnées sont idéales pour garder les tâches numérotées en ligne sans aucune erreur. L'ordre de vos éléments de liste interne (

  • ) dictera comment les données sont présentées.

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

    1. Objet 1
    2. Point 2
    3. Point 3

    Il est également possible de changer le compteur de numéros réguliers à une poignée d'autres options . Ceux-ci incluent le lettrage alphabétique et les chiffres romains, pour n'en nommer que quelques-uns. Les concepteurs Web utiliseraient la liste ordonnée pour les listes spécifiques au contenu. Les données de recette, les tâches quotidiennes, les favoris ou les utilisateurs connectés les plus récents ou les plus récents ne sont que quelques exemples. Vous verrez souvent des commentaires de blog créés à l' aide de listes ordonnées pour conserver chaque commentaire dans une séquence numérotée.

    Listes de définition de données (
    )

    Les listes de définitions ne sont plus vues très souvent (pas comme si elles étaient toujours populaires). Ils étaient utilisés avec des concepteurs de sites Web créant des formats complexes de liens ou de contenu de boîte. L' étiquette de la liste de données (

    ) est souvent mal compris par les codeurs aujourd'hui. Dans les spécifications HTML4.01, des listes de données ont été utilisées pour associer des éléments à leurs descriptions . Ceux-ci ont été appelés 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, des listes de données ont été transmises. Il n'y a pas de différences de syntaxe dans la façon dont vous utilisez les éléments, mais leur but a été mis à jour en tant que liste de description qui consiste en un ou plusieurs termes de données (

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

    Un exemple fort de l'article du Docteur HTML5 est une liste formatée de métadonnées . À l'intérieur d'un seul élément de liste dl vous définissez un terme, tel que votre nom, chaque étiquette de définition suivante pourrait décrire des données vous concernant, éventuellement votre âge, occupation, ville actuelle, etc. En fin de compte tout ensemble de données avec clé / valeur paires correspond bien dans une liste de description . Vous pouvez utiliser plus d'un terme de données dans une liste, mais le W3C indique que chaque terme doit être unique dans la liste.

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

    Navigation simple de liste non ordonnée

    Les menus de navigation sont beaucoup plus simples à construire 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 de cela apparaît sur le blog de médias sociaux, Mashable.

    Vers le haut de leur en-tête, vous remarquerez 2 principaux ensembles de liens. Directement au sommet de leur logo se trouve une petite liste non ordonnée contenant des liens de communauté tels que Top Stories, Thinking Themes et People. Le concepteur a créé un style de vol stationnaire élégant qui dispose d'un fond solide et de couleurs.

    Directement en dessous, vous verrez leurs liens de sous-navigation. Ce menu de navigation mène à des catégories de blog telles que les médias sociaux ou les technologies. Les deux listes non ordonnées sont contenues dans un HTML5