{"id":14013,"date":"2022-12-16T11:30:59","date_gmt":"2022-12-16T09:30:59","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=14013"},"modified":"2022-12-16T12:46:43","modified_gmt":"2022-12-16T10:46:43","slug":"como-utilizar-la-etiqueta-summary-html","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/","title":{"rendered":"C\u00f3mo utilizar la etiqueta Summary HTML"},"content":{"rendered":"<h1>\u00bfC\u00f3mo utilizar la etiqueta &lt;Summary&gt; ?<\/h1>\n<p>&nbsp;<\/p>\n<p>Esta etiqueta llamada <em>Summary,<\/em> se utiliza conjuntamente con el elemento<code><em> <strong>&lt;details&gt; \/&lt;details open&gt;<\/strong><\/em><\/code> y despu\u00e9s se le a\u00f1ade el <code><em><strong>&lt;summary&gt;<\/strong><\/em><\/code>, de esta forma lo que va a hacer es aplicar un desplegable en forma de ficha descriptiva. Lo que va a hacer es que toda la informaci\u00f3n que contenga dentro del <code>&lt;summary&gt;<\/code> se mantendr\u00e1 como una lista y en una columna, siempre que lo declares.<\/p>\n<blockquote><p><em>Voy a mostraros parte de un c\u00f3digo en el cual estoy utilizando la etiqueta <code>&lt;summary&gt;<\/code> para una p\u00e1gina web que est\u00e1 destinada a la adopci\u00f3n de gatos y perros, en el cual es necesario tener fichas para los animales en adopci\u00f3n y que muestre las caracter\u00edsticas de cada animal, que contiene la p\u00e1gina.<\/em><\/p><\/blockquote>\n<h3>C\u00f3digo HTML y ESTRUCTURA<\/h3>\n<p>&nbsp;<\/p>\n<pre>&lt;div class=\"faq-container\"&gt;\r\n             &lt;picture&gt;\r\n                       &lt;img src=\"ASSETS\/adopta_gatos\/img_gato_01.jpg\" alt=\"\"&gt;\r\n             &lt;\/picture&gt;\r\n             &lt;details open&gt;\r\n                      &lt;h2&gt;&lt;u&gt;RODOLPHE&lt;\/u&gt;&lt;\/h2&gt;\r\n                      &lt;summary&gt;Ficha:&lt;\/summary&gt;\r\n                      &lt;h3&gt;&lt;u&gt;Descripci\u00f3n:&lt;\/u&gt;&lt;\/h3&gt;\r\n                      &lt;p&gt;Definici\u00f3n de c\u00f3mo es el gato&lt;\/p&gt;\r\n                      &lt;h3&gt;&lt;u&gt;Caracter\u00edsticas:&lt;\/u&gt;&lt;\/h3&gt;\r\n                                &lt;p&gt;Sexo:&lt;\/p&gt;\r\n                                &lt;p&gt;Medidas:&lt;\/p&gt;\r\n                                &lt;p&gt;Edad:&lt;\/p&gt;\r\n                                &lt;p&gt;Estado:&lt;\/p&gt;\r\n                                &lt;p&gt;&lt;span&gt;!!!!!URGENTE ADOPTAR !!!!&lt;\/span&gt;&lt;\/p&gt;\r\n                                &lt;p&gt;Color:&lt;\/p&gt;\r\n                                &lt;p&gt;Raza:&lt;\/p&gt;\r\n                                &lt;p&gt;Nacimiento:&lt;\/p&gt;\r\n             &lt;\/details&gt;\r\n&lt;\/div&gt;<\/pre>\n<h4>Definici\u00f3n HTML<\/h4>\n<p>Para que el elemento <code><strong>&lt;summary&gt;<\/strong><\/code> funcione en su totalidad, deberemos siempre poner como primera etiqueta <code><strong>&lt;details open&gt;<\/strong><\/code> y a continuaci\u00f3n se le puede poner un <code>h2, h3<\/code> o lo que cre\u00e1is m\u00e1s conveniente, despu\u00e9s de haberle puesto en el caso de la captura un h3 le a\u00f1ado la etiqueta <code>&lt;summary&gt;<\/code>, que lo que va a hacer es un desplegable que abrir\u00e1 la ficha t\u00e9cnica de ese gato en concreto, que es lo que viene a continuaci\u00f3n seg\u00fan la captura del c\u00f3digo.<\/p>\n<p>Si copi\u00e1is el c\u00f3digo en vuestro ordenador, vais a ver que aparecer\u00e1 un icono de flecha a la izquierda de Ficha que aqu\u00ed es donde va la etiqueta <code>&lt;details open&gt;<\/code>, al hacer clic en la flecha se abre un desplegable en el cual va a contener toda la informaci\u00f3n que hay dentro, lo que en si hace la etiqueta <code>&lt;summary&gt;<\/code> es colocar todo lo que hay dentro de ese elemento en una lista manteniendo todo lo que va a continuaci\u00f3n.<\/p>\n<ul>\n<li>La etiqueta <code><a href=\"https:\/\/www.w3schools.com\/tags\/att_details_open.asp\" target=\"_blank\" rel=\"noopener\"><strong>&lt;details open&gt;<\/strong><\/a><\/code> le puedes colocar alg\u00fan icono del que m\u00e1s te guste o prefieras colocar para tu p\u00e1gina web, debes acordarte de que lo tienes que declarar en tu hoja de estilos.css, en el cual lo indicaras donde aparecer\u00e1 el icono.<\/li>\n<li>El elemento <code><strong>&lt;details&gt;<\/strong><\/code> es usado como un widget de revelaci\u00f3n a trav\u00e9s del cual el usuario puede obtener informaci\u00f3n adicional, siempre utilizando conjuntamente la etiqueta <code>&lt;summary&gt;<\/code> que ira despu\u00e9s del <code>&lt;details&gt;<\/code>. Para que haga la funci\u00f3n correctamente y aparezca el desplegable.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>C\u00d3DIGO CSS<\/h3>\n<h4>Especificaci\u00f3n del Icono<\/h4>\n<p>details summary::before {<\/p>\n<p>position: absolute;<\/p>\n<p>content: \u00ab\u00bb;<\/p>\n<p>font-size: 1.75rem;<\/p>\n<p>top: 10px;<\/p>\n<p>right: 16px;<\/p>\n<p>}<\/p>\n<p>details[open] summary::before {<\/p>\n<p>-webkit-animation: rotate 0.6s ease-in-out both;<\/p>\n<p>animation: rotate-emoji 0.6s ease-in-out both;<\/p>\n<p>}<\/p>\n<h4>Definici\u00f3n CSS<\/h4>\n<p>Como pod\u00e9is observar el c\u00f3digo CSS, es corto y conciso. En el cual voy a colocar las definiciones de las caracter\u00edsticas debajo para que se pueda entender mucho mejor.<\/p>\n<ul>\n<li>En el<code><strong> Content<\/strong><\/code>, all\u00ed vamos a poner el<em> (<span style=\"text-decoration: underline\">icono\/emoticono\/flecha<\/span>)<\/em>\u00a0o lo que quer\u00e1is a\u00f1adir para que al hacer el clic, se habr\u00e1 el desplegable.<\/li>\n<li>Tiene unas especificaciones claras y concisas, debido al poco c\u00f3digo introducido, para su utilidad y mejor entendimiento.<\/li>\n<li>La etiqueta <code><span style=\"text-decoration: underline\"><strong>&lt;details open&gt;<\/strong><\/span><\/code>, sirve para agregar el contenido que se incluya dentro del <code>&lt;summary&gt;<\/code>.<\/li>\n<li>El <code><span style=\"text-decoration: underline\"><strong>-webkit-animation<\/strong><\/span><\/code> : es una funci\u00f3n multimedia que hace de Booleano, mientras que el valor es verdadero siempre y cuando se admita en el CSS con el prefijo del proveedor y el navegador admita consultas de medios de la propiedad del prefijo.<\/li>\n<li><strong><code>::before<\/code> : <\/strong>es un pseudo-elemento que es el primer hijo del elemento seleccionado. Es usado normalmente para a\u00f1adir contenido est\u00e9tico a un elemento, usando la propiedad <em><code>'content'<\/code>. Este elemento se muestra en l\u00ednea con el texto de forma predeterminada.<\/em><\/li>\n<\/ul>\n<h4>Condici\u00f3n Desplegable y Rotaci\u00f3n<\/h4>\n<p>@-webkit-keyframes rotate-emoji {<\/p>\n<p>0% {<\/p>\n<p>-webkit-transform: rotate(0);<\/p>\n<p>transform: rotate(0);<\/p>\n<p>}<\/p>\n<p>100% {<\/p>\n<p>-webkit-transform: rotate(180deg);<\/p>\n<p>transform: rotate(180deg);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<h4>Definici\u00f3n<\/h4>\n<p>En esta parte me refiero a la condici\u00f3n de rotaci\u00f3n, para el icono que hemos a\u00f1adido en el css. De esta manera le estamos dando los valores que queremos que haga para la rotaci\u00f3n para cuando haga el desplegable, y adem\u00e1s que el icono tambi\u00e9n tenga una rotaci\u00f3n de 180\u00ba y poder ver que se cumplan las condiciones.<\/p>\n<p>Para a\u00f1adir <a href=\"https:\/\/www.espai.es\/blog\/2014\/11\/como-conseguir-iconos-gratis-para-nuestros-disenos\/\">iconos<\/a> deber\u00e1s incorporar el c\u00f3digo que se te marca en <em>Font Awesome<\/em> por ejemplo, si decides coger el icono de esta p\u00e1gina web. Y lo deber\u00e1s incluir en la parte del c\u00f3digos html y css, para implementarlo en tu documento.<\/p>\n<ul>\n<li><strong><code>@-webkit-keyframes<\/code> :\u00a0<\/strong>permite a los autores controlar los pasos intermedios en una secuencia de animaci\u00f3n CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animaci\u00f3n que debe ser alcanzado por determinados puntos durante la animaci\u00f3n. Esto le da un control m\u00e1s espec\u00edfico sobre los pasos intermedios de la secuencia de animaci\u00f3n que se obtiene al dejar que el navegador maneje todo autom\u00e1ticamente.<\/li>\n<li><strong><code>-webkit-transform<\/code> : <\/strong>te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usando los elementos que pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.<\/li>\n<\/ul>\n<h5 style=\"text-align: center\"><span style=\"text-decoration: underline\">AS\u00cd QUEDARIA EL RESULTADO FINAL<\/span><\/h5>\n<p style=\"text-align: center\">\u00a0Esta es la captura sin clicar el icono para que haga el desplegable.<\/p>\n<h1><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/sin_desplegar.png\" rel=\"attachment wp-att-14212\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14212 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/sin_desplegar-300x70.png\" alt=\"summary\" width=\"300\" height=\"70\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/sin_desplegar-300x70.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/sin_desplegar.png 524w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/h1>\n<p style=\"text-align: center\">Esta segunda, es haciendo clic en el icono que esta se\u00f1alizado con un cuadrado de color amarillo, para hacer el desplegable.<\/p>\n<h1><\/h1>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/desplegable_icono_marcado.png\" rel=\"attachment wp-att-14214\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14214 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/desplegable_icono_marcado-267x300.png\" alt=\"summary.2\" width=\"267\" height=\"300\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/desplegable_icono_marcado-267x300.png 267w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/desplegable_icono_marcado.png 553w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/a><\/p>\n<p style=\"text-align: center\">As\u00ed es como quedar\u00eda el desplegable completo<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/deplegable_completo.png\" rel=\"attachment wp-att-14216\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14216 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/deplegable_completo-193x300.png\" alt=\"summary completo\" width=\"193\" height=\"300\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/deplegable_completo-193x300.png 193w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/deplegable_completo.png 288w\" sizes=\"auto, (max-width: 193px) 100vw, 193px\" \/><\/a><\/p>\n<p>Para poder visualizar el c\u00f3digo completo de la etiqueta\u00a0<span style=\"background-color: #e9ebec;color: #222222;font-family: monospace\">&lt;details open&gt;<\/span>\u00a0y <code><\/code><span style=\"background-color: #e9ebec;color: #222222;font-family: monospace\">&lt;summary&gt;<\/span>, te recomiendo que accedas en el link:<a href=\"https:\/\/codepen.io\/Wilchard89\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/Wilchard89<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfC\u00f3mo utilizar la etiqueta &lt;Summary&gt; ? &nbsp; Esta etiqueta llamada Summary, se utiliza conjuntamente con el elemento &lt;details&gt; \/&lt;details open&gt; y despu\u00e9s se le a\u00f1ade el &lt;summary&gt;, de esta forma lo que va a hacer es aplicar un desplegable en forma de ficha descriptiva. Lo&#8230;<\/p>\n","protected":false},"author":40,"featured_media":14012,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-14013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-16T09:30:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-16T10:46:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Albert Saun\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Albert Saun\" \/>\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:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\"},\"author\":{\"name\":\"Albert Saun\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\"},\"headline\":\"C\u00f3mo utilizar la etiqueta Summary HTML\",\"datePublished\":\"2022-12-16T09:30:59+00:00\",\"dateModified\":\"2022-12-16T10:46:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\"},\"wordCount\":919,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\",\"name\":\"C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg\",\"datePublished\":\"2022-12-16T09:30:59+00:00\",\"dateModified\":\"2022-12-16T10:46:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\"},\"description\":\"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg\",\"width\":1000,\"height\":500,\"caption\":\"summary\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo utilizar la etiqueta Summary HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\",\"name\":\"Albert Saun\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g\",\"caption\":\"Albert Saun\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/albertsaun\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai","description":"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.","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:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai","og_description":"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.","og_url":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/","og_site_name":"Blog Escola Espai","article_published_time":"2022-12-16T09:30:59+00:00","article_modified_time":"2022-12-16T10:46:43+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","type":"image\/jpeg"}],"author":"Albert Saun","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Albert Saun","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/"},"author":{"name":"Albert Saun","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c"},"headline":"C\u00f3mo utilizar la etiqueta Summary HTML","datePublished":"2022-12-16T09:30:59+00:00","dateModified":"2022-12-16T10:46:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/"},"wordCount":919,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/","url":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/","name":"C\u00f3mo utilizar la etiqueta Summary HTML - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","datePublished":"2022-12-16T09:30:59+00:00","dateModified":"2022-12-16T10:46:43+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c"},"description":"Como utilizar y explicar la etiqueta summary, en la que hay insertada una imagen y una peque\u00f1a lista de caracteristicas que le vamos dando.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","width":1000,"height":500,"caption":"summary"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2022\/12\/como-utilizar-la-etiqueta-summary-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo utilizar la etiqueta Summary HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c","name":"Albert Saun","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g","caption":"Albert Saun"},"url":"https:\/\/www.espai.es\/blog\/author\/albertsaun\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/articulo_blog_summary.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=14013"}],"version-history":[{"count":49,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14013\/revisions"}],"predecessor-version":[{"id":14270,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14013\/revisions\/14270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/14012"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=14013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=14013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=14013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}