{"id":13042,"date":"2022-02-15T21:16:10","date_gmt":"2022-02-15T19:16:10","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=13042"},"modified":"2022-09-29T20:14:32","modified_gmt":"2022-09-29T18:14:32","slug":"como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/","title":{"rendered":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS"},"content":{"rendered":"

En art\u00edculos anteriores ya vimos\u00a0como hacer un men\u00fa hamburguesa<\/a> y como hacer un slider solo con HTML5 y CSS3<\/a>. En el presente art\u00edculo vamos a ver algo similar, en este caso, vamos a ver como hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML5 y CSS3.<\/p>\n

\"Pesta\u00f1as<\/a>

Pesta\u00f1as solo con HTML y CSS<\/p><\/div>\n

Para poder realizar este sistema de pesta\u00f1as vamos a partir del siguiente c\u00f3digo HTML:<\/p>\n

<div class=\"tabs\">\r\n  <div class=\"tab-container\">\r\n    <div id=\"tab3\" class=\"tab\"> \r\n      <a href=\"#tab3\">Pesta\u00f1a 3<\/a>\r\n      <div class=\"tab-content\">\r\n        <h2>Titulo 3<\/h2>\r\n        <p>Lorem ipsum ...<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div id=\"tab2\" class=\"tab\">\r\n      <a href=\"#tab2\">Pesta\u00f1a 2<\/a>\r\n      <div class=\"tab-content\">\r\n        <h2>Titulo 2<\/h2>\r\n        <p>Lorem ipsum ...<\/p>\r\n      <\/div>\r\n    <\/div> \r\n    <div id=\"tab1\" class=\"tab\">\r\n      <a href=\"#tab1\">Pesta\u00f1a 1<\/a>\r\n      <div class=\"tab-content\">\r\n        <h2>Titulo 1<\/h2>\r\n        <p>Lorem ipsum ...<\/p>\r\n      <\/div> \r\n    <\/div> \r\n  <\/div>\r\n<\/div><\/pre>\n
Lo m\u00e1s llamativo de este c\u00f3digo es que las pesta\u00f1as est\u00e1n en orden invertido, siendo la \u00faltima pesta\u00f1a en el c\u00f3digo HTML en realidad la primera pesta\u00f1a que el usuario podr\u00e1 ver. Lo cierto es que no es necesario tener todas las pesta\u00f1as en este orden invertido, pero si es fundamental que la \u00faltima pesta\u00f1a sea la primera<\/strong>.<\/p>\n
Otra peculiaridad es que tenemos el enlace a cada pesta\u00f1a dentro del elemento al que apunta dicho enlace.<\/strong> Aunque esta estructura HTML nos complicar\u00e1 colocar las pesta\u00f1as una al lado de la otra, esta forma de organizar el c\u00f3digo es necesaria para despu\u00e9s poder cambiar el aspecto de la pesta\u00f1a activa<\/strong>.<\/p>\n
El c\u00f3digo CSS lo vamos a ver en cuatro partes diferenciadas. Te recomiendo que vayas pegando cada parte de c\u00f3digo CSS mientras vas viendo como afecta dicho c\u00f3digo al resultado que se ve en pantalla.<\/p>\n
La primera parte es la siguiente y es la m\u00e1s importante y la fundamental para comprender el funcionamiento del sistema:<\/p>\n
\/* funcionamiento b\u00e1sico del sistema de pesta\u00f1as *\/\r\n.tab-content {\r\n  display: none;\r\n}\r\n\r\n.tab:target .tab-content, .tab:last-of-type .tab-content {\r\n  display: block;\r\n}\r\n\r\n.tab:target ~ .tab:last-of-type .tab-content {\r\n  display: none;\r\n}<\/pre>\n
Este c\u00f3digo que acabamos de ver hace lo siguiente:<\/p>\n
    \n
  • Esconder el contenido de todas las pesta\u00f1as.<\/li>\n
  • Mostrar el contenido de la pesta\u00f1a que tiene el :target y de la \u00faltima pesta\u00f1a (que recordemos, en realidad es la primera pesta\u00f1a).<\/li>\n
  • Esconder la \u00faltima pesta\u00f1a si resulta que antes tiene alguna pesta\u00f1a con el :target.<\/li>\n<\/ul>\n
    Si pruebas este c\u00f3digo ver\u00e1s que el mecanismo b\u00e1sico ya funciona. Si ninguna pesta\u00f1a tiene el :target, se muestra el contenido de la primera pesta\u00f1a. Mientras que en caso contrario, se muestra el contenido de la pesta\u00f1a que tiene el :target, tal y como uno podr\u00eda desear.<\/p>\n
    La segunda parte del c\u00f3digo CSS que vamos a ver es para definir algunos par\u00e1metros del sistema de pesta\u00f1as, y para empezar a darle algo de aspecto b\u00e1sico:<\/p>\n
    \/* par\u00e1metros para configurar las pesta\u00f1as *\/\r\n:root {\r\n  --tabs-border-color: #ABCDEF;\r\n  --tabs-border-size: 3px;\r\n  --tabs-text-color: white;\r\n  --tabs-dark-color: #012345;\r\n  --tabs-lite-color: #345678;\r\n  --tabs-width: 120px;\r\n  --tabs-height: 40px;\r\n}\r\n\r\n\/* aspecto b\u00e1sico *\/\r\nbody {\r\n  font-family: sans-serif;\r\n  line-height: 1.2;\r\n}\r\nh2, p {\r\n  margin: 0;\r\n} \r\na {\r\n  color: inherit;\r\n  text-decoration: none;\r\n} \r\n.tabs * {\r\n  box-sizing: border-box;\r\n}<\/pre>\n
    Nada especialmente complicado, y si pruebas este c\u00f3digo ver\u00e1s pocos cambios en el resultado.<\/p>\n
    La tercera parte del c\u00f3digo CSS es la encargada de colocar las pesta\u00f1as en su sitio correcto:<\/p>\n
    \/* esto es para posicionar las pesta\u00f1as correctamente *\/\r\n.tab-container {\r\n  position: relative;\r\n  padding-top: var(--tabs-height); \/* en esta zona colocaremos las pesta\u00f1as *\/\r\n} \r\n#tab1>a { --tabs-position: 0; }\r\n#tab2>a { --tabs-position: 1; }\r\n#tab3>a { --tabs-position: 2; }\r\n#tab4>a { --tabs-position: 3; }\r\n#tab5>a { --tabs-position: 4; }\r\n#tab6>a { --tabs-position: 5; }\r\n#tab7>a { --tabs-position: 6; }\r\n#tab8>a { --tabs-position: 7; }\r\n#tab9>a { --tabs-position: 8; }\r\n.tab>a {\r\n  text-align: center;\r\n  position: absolute;\r\n  width: calc(var(--tabs-width));\r\n  height: calc(var(--tabs-height) + var(--tabs-border-size)); \r\n  top: 0;\r\n  left: calc(var(--tabs-width) * var(--tabs-position)); \/* posici\u00f3n de cada pesta\u00f1a *\/\r\n}<\/pre>\n
    Tal y como se puede observar, usamos position: absolute;<\/em> para colocar las pesta\u00f1as en su sitio<\/strong>. Adem\u00e1s, usamos un tama\u00f1o definido para el ancho y alto de las pesta\u00f1as<\/strong>. Esto son limitaciones de este ejemplo debido a la estructura del HTML donde los enlaces de las pesta\u00f1as est\u00e1n dentro de los propios elementos enlazados. Pero tal y como se ha comentado, es la \u00fanica forma de poder cambiar el aspecto de la pesta\u00f1a.<\/p>\n
    Aqu\u00ed se han incluido selectores para que todo funcione correctamente si se a\u00f1aden hasta 9 pesta\u00f1as diferentes en el HTML (cada una con su correspondiente atributo id, claro). La variable –tabs-position se usa para calcular la posici\u00f3n left de la pesta\u00f1a.<\/p>\n
    Si pruebas el c\u00f3digo ver\u00e1s que ya tenemos las pesta\u00f1as pr\u00e1cticamente finalizadas, y el funcionamiento es casi perfecto.<\/p>\n
    El cuarto y \u00faltimo bloque de c\u00f3digo CSS es el encargado de finalizar el aspecto de este sistema de navegaci\u00f3n de pesta\u00f1as:<\/p>\n
    \/* m\u00e1s aspecto *\/\r\n.tabs { \r\n  padding: 10px;\r\n  color: var(--tabs-text-color);\r\n}\r\n.tab-content {\r\n\u00a0 background-color: var(--tabs-lite-color); \r\n\u00a0 padding: 20px;\r\n\u00a0 border: var(--tabs-border-size) solid var(--tabs-border-color);\r\n\u00a0 border-radius: 0 0 10px 10px;\r\n\u00a0 position: relative;\r\n\u00a0 z-index: 100;\r\n}\r\n.tab>a {\r\n\u00a0 background-color: var(--tabs-dark-color); \r\n\u00a0 padding: 10px;\r\n\u00a0 border: var(--tabs-border-size) solid var(--tabs-border-color);\r\n\u00a0 border-radius: 10px 10px 0 0;\r\n\u00a0 border-bottom: 0;\r\n}\r\n.tab:target>a, .tab:last-of-type>a {\r\n\u00a0 background-color: var(--tabs-lite-color); \r\n\u00a0 z-index: 200;\r\n}\r\n.tab:target ~ .tab:last-of-type>a {\r\n\u00a0 background-color: var(--tabs-dark-color); \r\n\u00a0 z-index: 0; \r\n}<\/pre>\n
    Lo mas complicado son los \u00faltimos 2 grupos de selectores. Aqu\u00ed, de nuevo, hacemos algo similar al primer bloque de CSS para cambiar el aspecto de la pesta\u00f1a actualmente activa. Usamos el mismo truco; le damos aspecto de pesta\u00f1a activa a la que tiene el :target y a la \u00faltima pesta\u00f1a. Y finalmente, si la \u00faltima pesta\u00f1a se encuentra despu\u00e9s de otra que tenga el :target le quitamos el aspecto de pesta\u00f1a activa.<\/p>\n
    Y nada m\u00e1s. Espero que este sistema de pesta\u00f1as solo con HTML y CSS os haya resultado interesante. A diferencia del slider o del men\u00fa hamburguesa, en este caso no hay grandes desventajas entre hacerlo as\u00ed, o bien hacerlo usando adem\u00e1s JavaScript.<\/p>\n
     <\/p>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    En art\u00edculos anteriores ya vimos\u00a0como hacer un men\u00fa hamburguesa y como hacer un slider solo con HTML5 y CSS3. En el presente art\u00edculo vamos a ver algo similar, en este caso, vamos a ver como hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML5…<\/p>\n","protected":false},"author":23,"featured_media":13053,"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":[13,78,829],"class_list":["post-13042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css3","tag-html5","tag-solo-con-html-y-css"],"yoast_head":"\nC\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.\" \/>\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\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\" \/>\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 sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-15T19:16:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-29T18:14:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\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\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS\",\"datePublished\":\"2022-02-15T19:16:10+00:00\",\"dateModified\":\"2022-09-29T18:14:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\"},\"wordCount\":757,\"commentCount\":16,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png\",\"keywords\":[\"CSS3\",\"HTML5\",\"solo con HTML y CSS\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\",\"name\":\"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png\",\"datePublished\":\"2022-02-15T19:16:10+00:00\",\"dateModified\":\"2022-09-29T18:14:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png\",\"width\":1000,\"height\":500,\"caption\":\"Pesta\u00f1as en HTML y CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS\"}]},{\"@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\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS","description":"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.","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\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS","og_description":"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.","og_url":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2022-02-15T19:16:10+00:00","article_modified_time":"2022-09-29T18:14:32+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","type":"image\/png"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS","datePublished":"2022-02-15T19:16:10+00:00","dateModified":"2022-09-29T18:14:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/"},"wordCount":757,"commentCount":16,"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","keywords":["CSS3","HTML5","solo con HTML y CSS"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/","url":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/","name":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","datePublished":"2022-02-15T19:16:10+00:00","dateModified":"2022-09-29T18:14:32+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo veremos como crear el t\u00edpico sistema de navegaci\u00f3n con pesta\u00f1as usando solo HTML5 y CSS3.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","width":1000,"height":500,"caption":"Pesta\u00f1as en HTML y CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2022\/02\/como-hacer-un-sistema-de-navegacion-por-pestanas-solo-con-html-y-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer un sistema de navegaci\u00f3n por pesta\u00f1as solo con HTML y CSS"}]},{"@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\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/02\/pestanas_html_css.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13042","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\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=13042"}],"version-history":[{"count":12,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13042\/revisions"}],"predecessor-version":[{"id":13059,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13042\/revisions\/13059"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/13053"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=13042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=13042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=13042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}