Briljant gebruik van HTML-lijsten in Web Design

U kunt goed ontworpen lijsten overal op internet vinden. Ontwerpers gebruiken ze al tientallen jaren om pagina-informatie en lay-outs te coördineren en in het web van vandaag zie je de grote creativiteit in hoe webontwerpers lijsten gebruiken. Deze omvatten navigatiemenu's, profielkoppelingen, archieven, taken / checklists en tal van andere toepassingen!

In dit bericht zal ik verschillende soorten HTML-lijsten introduceren, met tips voor het ontwerpen ervan, met name over hoe je een unieke voorsprong aan je lijst kunt toevoegen . Ik zal je ook een paar voorbeelden van websites laten zien met fantastische lijstontwerpen, en uiteindelijk krijg je een lijst met websites met mooi ontworpen HTML-lijsten. Er is geen twijfel meer over hoe u uw overzichtelijke lijsten er uniek laat uitzien, en laten we er vandaag het beste van maken!

De listingelementen

Webontwerpers springen constant van de ene bandwagon naar de andere, waardoor de websitestijlen in de loop van de tijd veranderen, maar de lijsten hebben de tand des tijds doorstaan ​​en kunnen heel goed van pas komen bij toekomstige innovatie van het World Wide Web.

Voordat ik de voorbeelden bekijk, wil ik enkele punten behandelen met HTML-lijsten. Er zijn weinig verschillende soorten lijsten die u kunt gebruiken in uw eigen ontwerpwerk. De meerderheid van de webontwerpers concentreert zich op niet- geordende lijsten die worden geopend met een

tag, maar er zijn ook twee andere minder populaire varianten: geordende lijsten en gegevensdefinities . Ik heb hieronder meer informatie opgenomen.

Ongeordende lijsten (

)

Mogelijk een van de meest gebruikte elementen in HTML4 / HTML5-standaarden. Niet-geordende lijsten zullen gegevens op dezelfde manier uitvoeren als een geordende lijst, maar u zult geen numerieke markeringen aan de zijkant zien . In plaats daarvan krijgt elk item een kleine cirkel of schijf en wordt het op een nieuwe regel opgesplitst. Dit pictogram kan ook worden gewijzigd met de eigenschap list-style-type die wordt gevonden in CSS.

Hieronder staat de voorbeeldcode van de ongeordende lijst:

Item 1
Item 2
Item 3

Ongeordende lijsten zijn de perfecte remedie voor het bouwen van navigatielinks . Omdat u eenvoudig hele lijsten kunt nesten binnen elk lijstitem, is het eenvoudig om subnavigatielinks te maken . Nadat u de lijststijl hebt verwijderd, blijft er een leeg itemelement over. Hier kunt u ankerkoppelingen opmaken om als blokelementen op uw pagina te verschijnen, waardoor een navigatie-menuontwerp wordt ingevuld en met een bepaalde jQuery-code kunt u een mooie koptekst voor uw site samenstellen.

Meestal vindt u ongeordende lijsten in het midden van webartikelen of installatie-instructies. Houd er rekening mee dat Google en andere zoekrobots uw pagina-inhoud niet anders verwerken, dus uw SEO mag niet worden beïnvloed, ongeacht het type vermelding dat u kiest .

Bestelde lijsten (

)

Wanneer u een set gegevens moet bestellen, is het mogelijk om uw eigen lay-outraamwerk helemaal opnieuw in te stellen, maar op deze manier moet u elk oplopend nummer handmatig toevoegen, wat vermoeiend kan zijn. Bestelde lijsten zijn geweldig om genummerde taken op één lijn te houden zonder dat er iets mis gaat. De volgorde van uw interne lijstitems (

• ) dicteren hoe de gegevens worden gepresenteerd.

  Hieronder staat de voorbeeldcode van de bestelde lijst:

  Item 1
  Item 2
  Item 3

  Het is ook mogelijk om de teller van normale nummers naar een handvol andere opties te veranderen . Deze omvatten alfabetische letters en Romeinse cijfers, om er maar een paar te noemen. Webontwerpers zouden de geordende lijst gebruiken voor inhoudspecifieke lijsten. Receptgegevens, dagelijkse taken, favorieten of top / recent ingelogde gebruikers zijn slechts enkele voorbeelden. Vaak zie je blogcommentaar die is opgebouwd met geordende lijsten om elke opmerking in een genummerde volgorde te houden.

  Gegevensdefinitie lijsten (

  )

  Definitielijsten worden niet vaak meer gezien (niet zoals ze ooit populair waren). Ze werden vroeger gezien door webontwerpers die complexe formaten van links of doosinhoud creëerden. De tag met de gegevenslijst (

  ) wordt tegenwoordig vaak verkeerd begrepen door codeerders. In de HTML4.01-specificaties werden gegevenslijsten gebruikt om items te koppelen aan hun beschrijvingen . Dit werden definitielijsten genoemd.

  Hieronder ziet u de voorbeeldcode van de gegevensdefinitielijst:

   Item 1 
   Beschrijving 
   Item 2 
   Beschrijving 
   Item 3 
   Beschrijving 

  Met de nieuwe HTML5-specificaties hebben gegevenslijsten een transcriptie gekregen. Er zijn geen verschillen met syntaxis in de manier waarop u de elementen gebruikt, maar hun doel is bijgewerkt als een beschrijvingslijst die bestaat uit een of meer gegevenstermen (

  ) gevolgd door een of meer gegevensdefinities (

  ) .

  Een sterk voorbeeld uit het artikel van de HTML5 Doctor is een metadata-opgemaakte lijst . Binnen een enkel dl zou u een term definiëren, zoals uw naam, en vervolgens zou elke volgende definitietag gegevens over u kunnen beschrijven, mogelijk uw leeftijd, beroep, huidige stad / stad enz. Uiteindelijk elke set gegevens met sleutel / waarde paren passen mooi in een beschrijvingslijst . U kunt meer dan één gegevensterm in een lijst gebruiken, maar W3C stelt dat elke term uniek moet zijn in de lijst.

  Nu we de 3 populaire lijststijlen hebben vastgelegd, laten we enkele voorbeelden bekijken! Webontwerpers hebben de afgelopen jaren heel creatief met hun lijsten gewerkt. Ik heb 7 van mijn favoriete websites hieronder gecatalogeerd met een specifieke focus op hun creatief gebruik van lijsten.

  Eenvoudige ongeordende lijstnavigatie

  Navigatiemenu's zijn veel eenvoudiger te bouwen met moderne CSS-technieken. Daarom zijn ongeordende lijsten en zelfs geordende lijsten een populaire optie geworden. Een van mijn favoriete voorbeelden hiervan is te vinden op de social media-blog, Mashable.

  

  Naar de bovenkant van hun koptekst gaan twee hoofdsets met links. Direct naar de top van hun logo staat een kleine ongeordende lijst met community-links zoals Topverhalen, Trending Topics en People. De ontwerper heeft een slanke zweefstijl gecreëerd met een solide achtergrond en kleurenschema.

  Direct daaronder zie je hun subnavigatie-links. Dit navigatiemenu leidt naar blogcategorieën zoals Social Media of Tech. Beide ongeordende lijsten bevinden zich in een HTML5