Brillante uso de listas HTML en diseño web

Puede encontrar listas bien diseñadas en todo Internet. Los diseñadores los han estado utilizando durante décadas para coordinar información de la página y diseños, y en la web de hoy puedes ver la gran creatividad en cómo los diseñadores web utilizan listas. Estos incluyen menús de navegación, enlaces de perfil, archivos, tareas / listas de verificación y muchos otros usos.!

En esta publicación, presentaré diferentes tipos de listas HTML, con consejos sobre cómo diseñarlas, en particular sobre cómo añade una ventaja única a tu lista. También te mostraré algunos ejemplos de sitios web con diseños de listas fantásticos y, finalmente, obtendrás una lista de sitios web con listas de HTML muy bien diseñadas. No hay más dudas sobre cómo hacer que sus listas de apariencia simple se vean únicas, y comencemos a aprovecharlas al máximo hoy.!

Los elementos del listado

Los diseñadores web están constantemente saltando de un carro a otro, lo que provoca que los estilos del sitio cambien a lo largo del tiempo, pero las listas han resistido la prueba del tiempo y pueden estar presentes en la futura innovación de la World Wide Web..

Antes de revisar los ejemplos quiero cubrir algunos puntos con listas HTML. Hay pocos tipos diferentes de listas que puede utilizar en su propio trabajo de diseño. La mayoría de los diseñadores web se centran en Listas desordenadas que se abren con un

etiqueta, pero también hay otras dos variaciones menos populares: Listas Ordenadas y Definiciones de datos. He entrado en más detalles a continuación.

Listas Desordenadas (

)

Posiblemente uno de los elementos más utilizados en los estándares HTML4 / HTML5. Las listas desordenadas emitirán datos de la misma manera que una lista ordenada, sin embargo, usted No verá ningún marcador numérico a un lado. En su lugar, cada elemento se da una pequeño círculo o disco y desglosado en una nueva línea. Este icono También se puede cambiar con la propiedad list-style-type encontrado en CSS.

A continuación se muestra el código de ejemplo de la lista desordenada:

 
 
Objeto 1
 
Artículo 2
 
Artículo 3
 
 

Las listas desordenadas son el remedio perfecto para la construcción. enlaces de navegación. Ya que puedes fácilmente anidar listas enteras dentro de cualquier elemento de la lista es un cuestión simple para crear enlaces de sub-navegación también. Después de eliminar el estilo de lista, te quedará un elemento en blanco. Desde aquí, puede diseñar los enlaces de anclaje para que aparezcan como elementos de bloque en su página, completando así el diseño del menú de navegación, y con algunos códigos jQuery puede armar un hermoso encabezado para su sitio..

Lo más común es que encuentre listas desordenadas en medio de artículos web o instrucciones de instalación. Toma nota de que Google y otros robots de búsqueda no procesan el contenido de su página de manera diferente, entonces tus SEO no debería verse afectado independientemente del tipo de listado que elija.

Listas Ordenadas (

)

Cuando necesita ordenar un conjunto de datos, es posible configurar su propio marco de diseño desde cero, pero de esta manera deberá agregar cada número incremental a mano, lo que puede ser agotador. Las listas ordenadas son ideales para mantener las tareas numeradas en línea sin ningún tipo de errores. El orden de los elementos de su lista interna (

• ) dictará cómo se presentan los datos.

  A continuación se muestra el código de ejemplo de la lista ordenada:

   
   
  Objeto 1
   
  Artículo 2
   
  Artículo 3
   
   

  También es posible cambia el contador de números regulares a un puñado de otras opciones. Éstos incluyen letras alfabéticas y números romanos, para nombrar unos pocos. Los diseñadores web usarían la lista ordenada para las listas de contenido específico. Receta de datos, tareas diarias, favoritos, o Top / recientes usuarios registrados Son solo algunos ejemplos. A menudo veras comentarios del blog construido usando listas ordenadas para mantener cada comentario en una secuencia numerada.

  Listas de definición de datos (

  )

  Las listas de definiciones ya no se ven con mucha frecuencia (no como si fueran las más populares). Solían ser vistos con diseñadores web que creaban formatos complejos de enlaces o contenido de cuadros. los etiqueta de lista de datos (

  ) A menudo es mal entendido por los codificadores de hoy. En las especificaciones de HTML4.01 se usaron listas de datos para emparejar artículos con sus descripciones. Estas fueron llamadas listas de definición..

  A continuación se muestra el código de ejemplo de la lista de definiciones de datos:

   
   
  Objeto 1
   
  Descripción
   
  Artículo 2
   
  Descripción
   
  Artículo 3
   
  Descripción
   
   

  Sin embargo, con las nuevas especificaciones de HTML5, las listas de datos han recibido una transcripción. No hay diferencias con la sintaxis en la forma en que utiliza los elementos, sin embargo, su propósito se ha actualizado como un lista de descripción que consta de uno o más términos de datos (

  ) seguido de una o más definiciones de datos (

  ).

  Un fuerte ejemplo del artículo de HTML5 Doctor es un lista de metadatos formateada. Dentro de un solo dl elemento de lista que harías definir un término, como su nombre, entonces cada subsiguiente etiqueta de definición podría describir datos sobre usted, posiblemente su edad, ocupación, pueblo / ciudad actual, etc. En última instancia cualquier conjunto de datos con pares clave / valor encaja perfectamente en una lista de descripción. Puede usar más de un término de datos en una lista, pero W3C establece que cada término debe ser único en la lista.

  Ahora que hemos definido los 3 estilos de listas populares, ¡veamos algunos ejemplos! Los diseñadores web se han vuelto muy creativos con sus listas en los últimos años. A continuación, he catalogado 7 de mis sitios web favoritos con un enfoque específico en el uso creativo de las listas..

  Navegación simple de la lista desordenada

  Los menús de navegación son mucho más simples de construir con las técnicas modernas de CSS. Esta es la razón por la que las listas desordenadas e incluso las listas ordenadas se han convertido en una opción popular. Uno de mis ejemplos favoritos de esto aparece en el blog de redes sociales, Mashable.

  

  Hacia la parte superior de su encabezado verás 2 conjuntos principales de enlaces. Directamente en la parte superior de su logotipo se encuentra una pequeña lista desordenada que contiene enlaces de la comunidad, como Historias principales, Temas de tendencias y Personas. El diseñador ha creado un estilo de navegación elegante que cuenta con un fondo sólido y una combinación de colores..

  Justo debajo de esto verá sus enlaces de navegación secundaria. Este menú de navegación lleva a categorías de blog como Social Media o Tech. Ambas listas no ordenadas están contenidas dentro de un HTML5