{"id":11793,"date":"2022-10-28T13:00:00","date_gmt":"2022-10-28T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=11793"},"modified":"2025-01-07T13:59:15","modified_gmt":"2025-01-07T12:59:15","slug":"hacer-un-listado-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/","title":{"rendered":"C\u00f3mo hacer un listado en HTML"},"content":{"rendered":"\n<p><strong>Hacer un listado HTML<\/strong> en tu p\u00e1gina web es realmente sencillo. Tan solo necesitas conocer unas cuantas <a href=\"https:\/\/carontestudio.com\/blog\/listado-de-etiquetas-html\/\">etiquetas HTML<\/a> y tendr\u00e1s tu <strong>lista en HTML<\/strong>. \u00a1Comenzamos!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Uno de los temas que, desde siempre, m\u00e1s me ha gustado ense\u00f1ar a los alumnos del <a href=\"https:\/\/carontestudio.com\/formacion\/cursos-web-vitoria\/\">curso de dise\u00f1o web<\/a>, son las <strong>listas HTML<\/strong>. El motivo es que a pesar de ser, inicialmente, muy sencillo de entender y aprender, a veces se puede complicar. Hay tres tipos de listas HTML: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Listas ordenadas<\/li>\n\n\n\n<li>Listas desordenadas<\/li>\n\n\n\n<li>Listas de definici\u00f3n<\/li>\n<\/ul>\n\n\n\n<p>En algunas de estas listas, adem\u00e1s, existen atributos que modifican el comportamiento natural de las mismas. Te las ense\u00f1o una por una:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lista ordenada HTML<\/h2>\n\n\n\n<p>Con una <strong>lista ordenada HTML<\/strong> mostrar\u00e1s una serie de elementos ordenados por un n\u00famero. Es un tipo de lista muy utilizado en diferentes \u00e1mbitos. Por ejemplo, se emplea mucho en los manuales de instrucciones para montar un mueble, indicando con los n\u00fameros el orden en el cual deben ir ensambl\u00e1ndose las piezas.  Cuando se muestra un \u00edndice o tabla de contenidos en un libro, es importante el orden de cada elemento del \u00edndice. Otro ejemplo muy com\u00fan y l\u00f3gico, es para crear un \u00edndice de un art\u00edculo de un blog o alguna otra publicaci\u00f3n online. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo crear una lista ordenada HTML <\/h3>\n\n\n\n<p>La estructura es muy sencilla y tan solo necesitar\u00e1s las etiquetas &lt;ol&gt; y &lt;li&gt;. La primera etiqueta significa \u00ab<strong>ordered list<\/strong>\u00ab, o lista ordenada, y el segundo elemento significa \u00ab<strong>list item<\/strong>\u00ab, o elemento de lista. <\/p>\n\n\n\n<p>Para <strong>hacer una lista ordenada HTML<\/strong>, lo primero que debes hacer es comenzar la lista con la etiqueta &lt;ol&gt;. Posteriormente, cada elemento de la lista deber\u00e1 estar dentro de las etiquetas &lt;li&gt;&lt;\/li&gt;. Cuando no tengas m\u00e1s elementos de lista que agregar a la lista, deber\u00e1s cerrarla con la etiqueta &lt;\/ol&gt;. Te dejo un ejemplo a continuaci\u00f3n, donde a la izquierda ver\u00e1s el c\u00f3digo, y a la derecha como se ver\u00eda en tu p\u00e1gina web: <\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background\"><code>&lt;p&gt;Orden de lanzamiento de las pel\u00edculas de la saga Star Wars&lt;\/p&gt;\n&lt;ol&gt;\n  &lt;li&gt;Episodio IV: Una nueva esperanza&lt;\/li&gt;\n  &lt;li&gt;Episodio V: El imperio contraataca&lt;\/li&gt;\n  &lt;li&gt;Episodio VI: El retorno del Jedi&lt;\/li&gt;\n  &lt;li&gt;Episodio I: La amenaza fantasma&lt;\/li&gt;\n  &lt;li&gt;Episodio II: El ataque de los clones&lt;\/li&gt;\n  &lt;li&gt;Episodio III: La venganza de los sith&lt;\/li&gt;\n  &lt;li&gt;Episodio VII: El despertar de la Fuerza&lt;\/li&gt;\n  &lt;li&gt;Episodio VIII: Los \u00faltimos Jedi&lt;\/li&gt;\n  &lt;li&gt;Episodio IX: El ascenso de Skywalker&lt;\/li&gt;\n&lt;\/ol&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center solid-line has-black-color has-white-background-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p>Orden de lanzamiento de las pel\u00edculas de la saga Star Wars<\/p>\n<ol>\n  <li>Episodio IV: Una nueva esperanza<\/li>\n  <li>Episodio V: El imperio contraataca<\/li>\n  <li>Episodio VI: El retorno del Jedi<\/li>\n  <li>Episodio I: La amenaza fantasma<\/li>\n  <li>Episodio II: El ataque de los clones<\/li>\n  <li>Episodio III: La venganza de los sith<\/li>\n  <li>Episodio VII: El despertar de la Fuerza<\/li>\n  <li>Episodio VIII: Los \u00faltimos Jedi<\/li>\n  <li>Episodio IX: El ascenso de Skywalker<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Lista no ordenada HTML<\/h2>\n\n\n\n<p>La estructura para hacer una lista no ordenada, tambi\u00e9n llamada <strong>lista desordenada HTML<\/strong>, es casi id\u00e9ntica a la lista ordenada. Simplemente, cambia la etiqueta de apertura y cierre de la lista. En este caso, la lista desordenada HTML se abre con la etiqueta &lt;ul&gt; y se cierra con la etiqueta &lt;\/u&gt;. Como en el caso anterior, los elementos de la lista ir\u00e1n dentro de etiquetas &lt;li&gt;&lt;\/li&gt;. Por lo tanto, para hacer una lista no ordenada deber\u00e1s hacer lo que se muestra en el siguiente ejemplo: <\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background\"><code>&lt;p&gt;Lista de la compra&lt;\/p&gt;\n&lt;ol&gt;\n  &lt;li&gt;Tomates&lt;\/li&gt;\n  &lt;li&gt;Pan&lt;\/li&gt;\n  &lt;li&gt;Puerros&lt;\/li&gt;\n  &lt;li&gt;Aceite oliva virgen&lt;\/li&gt;\n  &lt;li&gt;Pescado&lt;\/li&gt;\n  &lt;li&gt;Lej\u00eda&lt;li&gt;\n&lt;\/ol&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center solid-line has-black-color has-white-background-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p>Lista de la compra<\/p>\n<ul>\n  <li>Tomates<\/li>\n  <li>Pan<\/li>\n  <li>Puerros<\/li>\n  <li>Aceite oliva virgen<\/li>\n  <li>Pescado<\/li>\n  <li>Lej\u00eda<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Lista de definici\u00f3n HTML<\/h2>\n\n\n\n<p><strong>Las listas de definiciones HTML sirven para crear listas de elementos con informaci\u00f3n<\/strong>, o valor a\u00f1adido, por cada elemento. Es decir, con esta lista podr\u00e1s enumerar de forma desordenada varios elementos, agregando informaci\u00f3n descriptiva y visible a cada uno de los elementos.<\/p>\n\n\n\n<p>A continuaci\u00f3n te dejo un ejemplo con una serie de elementos con su descripci\u00f3n:<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background\"><code>&lt;p&gt;Lista de definici\u00f3n de acr\u00f3nimos&lt;\/p&gt;\n&lt;dl&gt;\n  &lt;dt&gt;AMPA&lt;\/dt&gt;\n  &lt;dd&gt;Asociaci\u00f3n de Madres y Padres de Alumnos&lt;\/dd&gt;\n  &lt;dt&gt;OVNI&lt;\/dt&gt;\n  &lt;dd&gt;Objeto Volante No Identificado&lt;\/dd&gt;\n  &lt;dt&gt;AVE&lt;\/dt&gt;\n  &lt;dd&gt;Alta Velocidad Espa\u00f1ola&lt;\/dd&gt;\n  &lt;dt&gt;DRAE&lt;\/dt&gt;\n  &lt;dd&gt;Diccionario de la Real Academia Espa\u00f1ola&lt;\/dd&gt;\n&lt;\/dl&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center solid-line has-black-color has-white-background-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p>Lista de definici\u00f3n de acr\u00f3nimos<\/p>\n<dl>\n  <dt>AMPA<\/dt>\n  <dd>Asociaci\u00f3n de Madres y Padres de Alumnos<\/dd>\n  <dt>OVNI<\/dt>\n  <dd>Objeto Volante No Identificado<\/dd>\n  <dt>AVE<\/dt>\n  <dd>Alta Velocidad Espa\u00f1ola<\/dd>\n  <dt>DRAE<\/dt>\n  <dd>Diccionario de la Real Academia Espa\u00f1ola<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Listas Anidadas<\/h2>\n\n\n\n<p>En ocasiones, puedes necesitar <strong>hacer una lista anidada<\/strong>, o <strong>lista de elementos anidados<\/strong>. En este punto, la cosa se complica un poco, pero si prestas atenci\u00f3n, podr\u00e1s hacerlo sin demasiadas complicaciones. El truco radica en <strong>crear nuevas listas, ordenadas o desordenadas, dentro del elemento &lt;li&gt;&lt;\/li&gt;<\/strong> en el que quieras crear un segundo nivel de lista. <\/p>\n\n\n\n<p>Tambi\u00e9n podr\u00e1s combinar diferentes tipos de lista, por ejemplo ordenadas y desordenadas. Te muestro un ejemplo con el que lo entender\u00e1s perfectamente:<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background\"><code>&lt;p&gt;Resultados de las ligas 21\/22&lt;\/p&gt;\n&lt;ul&gt;\n    &lt;li&gt;Liga espa\u00f1ola\n        &lt;ol&gt;\n            &lt;li&gt;Real Madrid&lt;\/li&gt;\n            &lt;li&gt;F.C. Barcelona&lt;\/li&gt;\n            &lt;li&gt;At. Madrid&lt;\/li&gt;\n            &lt;li&gt;Sevilla&lt;\/li&gt;\n            &lt;li&gt;...&lt;\/li&gt;\n        &lt;\/ol&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;Premier League\n        &lt;ol&gt;\n            &lt;li&gt;Manchester City&lt;\/li&gt;\n            &lt;li&gt;Liverpool&lt;\/li&gt;\n            &lt;li&gt;Chelsea&lt;\/li&gt;\n            &lt;li&gt;Tottenham&lt;\/li&gt;\n            &lt;li&gt;...&lt;\/li&gt;\n        &lt;\/ol&gt;\n    &lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center solid-line has-black-color has-white-background-color has-text-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p>Resultados de las ligas 21\/22<\/p>\n<ul>\n    <li>Liga espa\u00f1ola\n        <ol>\n            <li>Real Madrid<\/li>\n            <li>F.C. Barcelona<\/li>\n            <li>At. Madrid<\/li>\n            <li>Sevilla<\/li>\n            <li>&#8230;<\/li>\n        <\/ol>\n    <\/li>\n    <li>Premier League\n        <ol>\n            <li>Manchester City<\/li>\n            <li>Liverpool<\/li>\n            <li>Chelsea<\/li>\n            <li>Tottenham<\/li>\n            <li>&#8230;<\/li>\n        <\/ol>\n    <\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>C\u00f3mo has podido comprobar,<strong> crear listas en HTML es realmente sencillo<\/strong>, y no importa si son ordenadas, desordenadas, o de definici\u00f3n. La estructura siempre es muy similar, por lo que aprendida una, aprendida todas. En otra ocasi\u00f3n te contar\u00e9 como <strong>mediante CSS podr\u00e1s modificar el contador o marcador de la lista<\/strong> para, por ejemplo, agregar n\u00fameros romanos a tu lista ordenada. Si quieres saber m\u00e1s acerca de CSS, no dudes en visitar nuestro <a href=\"https:\/\/carontestudio.com\/blog\/novedades-css-2025\/\">art\u00edculo con las nuevas actualizaciones<\/a> para 2025.<\/p>\n\n\n\n<p>Nada m\u00e1s, espero que te haya gustado esta entrada y que te sirva en tu aprendizaje en el mundo de la programaci\u00f3n HTML. \u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/05\/comentarios-en-html-1024x604-1024x604.jpg\" alt=\"C\u00f3mo comentar HTML y en otros lenguajes de programaci\u00f3n\" class=\"wp-image-1279\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/05\/comentarios-en-html-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/05\/comentarios-en-html-1024x604-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2020\/05\/comentarios-en-html-1024x604-768x453.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/12\/como_enviar_un_mail_desde_un_formulario_html-1024x604.jpg\" alt=\"C\u00f3mo enviar un mail desde un formulario web.\" class=\"wp-image-8042\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/12\/como_enviar_un_mail_desde_un_formulario_html-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/12\/como_enviar_un_mail_desde_un_formulario_html-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/12\/como_enviar_un_mail_desde_un_formulario_html-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/12\/como_enviar_un_mail_desde_un_formulario_html.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hacer un listado HTML en tu p\u00e1gina web es realmente sencillo. Tan solo necesitas conocer unas cuantas etiquetas HTML y tendr\u00e1s tu lista en HTML. \u00a1Comenzamos!<\/p>\n","protected":false},"author":4,"featured_media":11821,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[92],"class_list":["post-11793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web","tag-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo hacer un listado en HTML - Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo hacer un listado en HTML - Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-28T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T12:59:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"V\u00edctor S\u00e1nchez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"C\u00f3mo hacer un listado en HTML - Caronte Web Studio\" \/>\n<meta name=\"twitter:description\" content=\"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"V\u00edctor S\u00e1nchez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/\"},\"author\":{\"name\":\"V\u00edctor S\u00e1nchez\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\"},\"headline\":\"C\u00f3mo hacer un listado en HTML\",\"datePublished\":\"2022-10-28T11:00:00+00:00\",\"dateModified\":\"2025-01-07T12:59:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/\"},\"wordCount\":871,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/hacer-listas-html.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/\",\"name\":\"C\u00f3mo hacer un listado en HTML - Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/hacer-listas-html.jpg\",\"datePublished\":\"2022-10-28T11:00:00+00:00\",\"dateModified\":\"2025-01-07T12:59:15+00:00\",\"description\":\"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/hacer-listas-html.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/hacer-listas-html.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Como hacer listas HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/hacer-un-listado-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer un listado en HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\",\"name\":\"V\u00edctor S\u00e1nchez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"caption\":\"V\u00edctor S\u00e1nchez\"},\"description\":\"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.\",\"sameAs\":[\"https:\\\/\\\/www.carontestudio.com\\\/\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/victor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer un listado en HTML - Caronte Web Studio","description":"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer un listado en HTML - Caronte Web Studio","og_description":"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.","og_url":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2022-10-28T11:00:00+00:00","article_modified_time":"2025-01-07T12:59:15+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","type":"image\/jpeg"}],"author":"V\u00edctor S\u00e1nchez","twitter_card":"summary_large_image","twitter_title":"C\u00f3mo hacer un listado en HTML - Caronte Web Studio","twitter_description":"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.","twitter_image":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","twitter_misc":{"Escrito por":"V\u00edctor S\u00e1nchez","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/"},"author":{"name":"V\u00edctor S\u00e1nchez","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9"},"headline":"C\u00f3mo hacer un listado en HTML","datePublished":"2022-10-28T11:00:00+00:00","dateModified":"2025-01-07T12:59:15+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/"},"wordCount":871,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","keywords":["HTML"],"articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/","url":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/","name":"C\u00f3mo hacer un listado en HTML - Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","datePublished":"2022-10-28T11:00:00+00:00","dateModified":"2025-01-07T12:59:15+00:00","description":"Si est\u00e1s aprendiendo a programar, aqu\u00ed aprender\u00e1s c\u00f3mo hacer un listado en HTML y los diferentes tipos de listas HTML que existen.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/10\/hacer-listas-html.jpg","width":1250,"height":737,"caption":"Como hacer listas HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/hacer-un-listado-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer un listado en HTML"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9","name":"V\u00edctor S\u00e1nchez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","caption":"V\u00edctor S\u00e1nchez"},"description":"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.","sameAs":["https:\/\/www.carontestudio.com\/"],"url":"https:\/\/carontestudio.com\/blog\/author\/victor\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=11793"}],"version-history":[{"count":23,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11793\/revisions"}],"predecessor-version":[{"id":21764,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/11793\/revisions\/21764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/11821"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=11793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=11793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=11793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}