{"id":10279,"date":"2024-01-18T18:18:00","date_gmt":"2024-01-18T18:18:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10279"},"modified":"2024-01-22T16:19:06","modified_gmt":"2024-01-22T11:19:06","slug":"tabs-with-css3-html5-only","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/","title":{"rendered":"Tabs with CSS3 & HTML5 Only"},"content":{"rendered":"

Tabs provide a clean way to organize and present content on your website. With this easy-to-use code, you can implement tabs without the need for JavaScript. This code creates tabs using only HTML5 and CSS3. Tabs switch content when clicked. The tabs are styled with CSS<\/a> for a better visual presentation. This helps organize content into sections that users can easily navigate.<\/p>\n

You can use this code to organize content neatly into tabs on your website. One major benefit is offering users a clear and structured way to access different sections of information.<\/p>\n

How to Create Tabs With CSS3 & HTML5 Only<\/h2>\n

1. First of all, create the HTML structure for your tabs. Include the tab headers and corresponding content sections. Insert your desired content within the content sections for each tab. You can include text, images, lists, or any other HTML elements you want to display.<\/p>\n

Moreover, duplicate the structure to create additional tabs.<\/p>\n

<!--T\u00edtulo-->\r\n\t<h1>Tabs with CSS3 & HTML5 only<\/h1>\r\n\t<!--Contenedor-->\r\n\t<div id=\"container\">\r\n\t\t<!--Pesta\u00f1a 1 activa por defecto-->\r\n\t    <input id=\"tab-1\" type=\"radio\" name=\"tab-group\" checked=\"checked\" \/>\r\n\t    <label for=\"tab-1\">Tab 1<\/label>\r\n\t    <!--Pesta\u00f1a 2 inactiva por defecto-->\r\n\t    <input id=\"tab-2\" type=\"radio\" name=\"tab-group\" \/>\r\n\t    <label for=\"tab-2\">Tab 2<\/label>\r\n\t    <!--Pesta\u00f1a 3 inactiva por defecto-->\r\n\t    <input id=\"tab-3\" type=\"radio\" name=\"tab-group\" \/>\r\n\t    <label for=\"tab-3\">Tab 3<\/label>\r\n\t    <!--Contenido a mostrar\/ocultar-->\r\n\t    <div id=\"content\">\r\n\t    \t<!--Contenido de la Pesta\u00f1a 1-->\r\n\t        <div id=\"content-1\">\r\n\t            <p class=\"left\"><img src=\"http:\/\/ximg.es\/160x120\" alt=\"\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?<\/p>\r\n\t            <p class=\"left last\"><img src=\"http:\/\/ximg.es\/160x120\" alt=\"\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, id blanditiis deserunt in molestiae excepturi incidunt molestias dolor sunt dolore obcaecati non repellat mollitia error placeat est exercitationem sit voluptates iure autem saepe voluptas harum unde perferendis modi provident labore voluptatum. Repudiandae, aspernatur sit harum quod vero quos sequi voluptas!<\/p>\r\n\t        <\/div>\r\n\t        <!--Contenido de la Pesta\u00f1a 2-->\r\n\t        <div id=\"content-2\">\r\n\t            <p class=\"column-left\"><img src=\"http:\/\/ximg.es\/200x150\" alt=\"\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, est, nisi enim voluptates dicta quibusdam recusandae eveniet provident non at nostrum nesciunt laudantium omnis aliquam debitis magni expedita cumque tempore.<\/p>\r\n            \t<p class=\"column-right\"><img src=\"http:\/\/ximg.es\/200x150\" alt=\"\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.<\/p>\r\n\t        <\/div>\r\n\t        <!--Contenido de la Pesta\u00f1a 3-->\r\n\t        <div id=\"content-3\">\r\n\t        \t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aperiam, enim odit placeat minus ab vero molestiae ad fugit maiores eaque saepe debitis assumenda ut ipsam eius sit repellendus dolore.<\/p>\r\n\t        \t<ul>\r\n\t        \t\t<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.<\/li>\r\n\t        \t\t<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.<\/li>\r\n\t        \t\t<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.<\/li>\r\n\t        \t<\/ul>\r\n\t        \t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!<\/p>\r\n\t        <\/div>\r\n\t    <\/div>\r\n\t<\/div><\/pre>\n
2. Use CSS to style the tabs and their corresponding content. Style the appearance of tabs, manage their transitions, and control the visibility of content. Adjust the CSS properties to match your website’s design.<\/p>\n
* {\r\n\tfont-family: Arial, sans;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tbox-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n}\r\n\r\nh1 {\r\n\tmargin: 1em 0;\r\n\ttext-align: center;\r\n}\r\n\r\n#container {\r\n    margin: 0 auto;\r\n    width: 50%;  \/* Ancho del contenedor *\/\r\n}\r\n\r\n#container input {\r\n\theight: 2.5em;\r\n\tvisibility: hidden;\r\n}\r\n\r\n#container label {\r\n\tbackground: #f9f9f9;  \/* Fondo de las pesta\u00f1as *\/\r\n\tborder-radius: .25em .25em 0 0;\r\n\tcolor: #888;  \/* Color del texto de las pesta\u00f1as *\/\r\n\tcursor: pointer;\r\n\tdisplay: block;\r\n\tfloat: left;\r\n\tfont-size: 1em;  \/* Tama\u00f1o del texto de las pesta\u00f1as *\/\r\n\theight: 2.5em;\r\n\tline-height: 2.5em;\r\n\tmargin-right: .25em;\r\n\tpadding: 0 1.5em;\r\n\ttext-align: center;\r\n}\r\n\r\n#container input:hover + label {\r\n\tbackground: #ddd;  \/* Fondo de las pesta\u00f1as al pasar el cursor por encima *\/\r\n\tcolor: #666;  \/* Color del texto de las pesta\u00f1as al pasar el cursor por encima *\/\r\n}\r\n\r\n#container input:checked + label {\r\n\tbackground: #f1f1f1;  \/* Fondo de las pesta\u00f1as al presionar *\/\r\n\tcolor: #444; \/* Color de las pesta\u00f1as al presionar *\/\r\n\tposition: relative;\r\n\tz-index: 6;\r\n\t\/*\r\n\t-webkit-transition: .1s;\r\n\t-moz-transition: .1s;\r\n\t-o-transition: .1s;\r\n\t-ms-transition: .1s;\r\n\t*\/\r\n}\r\n\r\n#content {\r\n\tbackground: #f1f1f1;  \/* Fondo del contenido *\/\r\n\tborder-radius: 0 .25em .25em .25em;\r\n\tmin-height: 20em;  \/* Alto del contenido *\/\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\tz-index: 5;\r\n}\r\n\r\n#content div {\r\n\topacity: 0;\r\n\tpadding: 1.5em;\r\n\tposition: absolute;\r\n\tz-index: -100;\r\n\t\/*\r\n\ttransition: all linear 0.1s;\r\n\t*\/\r\n}\r\n\r\n#content-1 p {\r\n\tclear: both;\r\n\tmargin-bottom: 1em;\r\n}\r\n#content-1 p.left img {\r\n\tfloat: left;\r\n\tmargin-right: 1em;\r\n}\r\n#content-1 p.last {\r\n\tmargin-bottom: 0;\r\n}\r\n\r\n#content-2 p {\r\n\tfloat: left;\r\n\twidth: 48.5%;\r\n}\r\n#content-2 p.column-right {\r\n\tmargin-left: 3%;\r\n}\r\n#content-2 p img {\r\n\tdisplay: block;\r\n\tmargin: 0 auto 1em auto;\r\n}\r\n#content-3 p,\r\n#content-3 ul {\r\n\tmargin-bottom: 1em;\r\n}\r\n#content-3 ul {\r\n\tmargin-left: 2em;\r\n}\r\n\r\n#container input#tab-1:checked ~ #content #content-1,\r\n#container input#tab-2:checked ~ #content #content-2,\r\n#container input#tab-3:checked ~ #content #content-3 {\r\n    opacity: 1;\r\n    z-index: 100;\r\n}\r\n\r\ninput.visible {\r\n  visibility: visible !important;\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created Tabs With CSS3 & Html5 Only. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tabs provide a clean way to organize and present content on your website. With this easy-to-use code, you can implement…<\/p>\n","protected":false},"author":1,"featured_media":10286,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[75],"class_list":["post-10279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-tabs"],"acf":[],"yoast_head":"\nTabs with CSS3 & HTML5 Only — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabs with CSS3 & HTML5 Only — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T18:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:19:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Tabs with CSS3 & HTML5 Only\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\"},\"wordCount\":219,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png\",\"keywords\":[\"Tabs\"],\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\",\"name\":\"Tabs with CSS3 & HTML5 Only — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:06+00:00\",\"description\":\"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png\",\"width\":1280,\"height\":980,\"caption\":\"Tabs with CSS3 & HTML5 Only\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tabs with CSS3 & HTML5 Only\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabs with CSS3 & HTML5 Only — CodeHim","description":"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/","og_locale":"en_US","og_type":"article","og_title":"Tabs with CSS3 & HTML5 Only — CodeHim","og_description":"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-18T18:18:00+00:00","article_modified_time":"2024-01-22T11:19:06+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Tabs with CSS3 & HTML5 Only","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:06+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/"},"wordCount":219,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png","keywords":["Tabs"],"articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/","url":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/","name":"Tabs with CSS3 & HTML5 Only — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:06+00:00","description":"Here is a free code snippet to create a Tabs with CSS3 & HTML5 Only. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Tabs-with-CSS3-HTML5-Only.png","width":1280,"height":980,"caption":"Tabs with CSS3 & HTML5 Only"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/tabs-with-css3-html5-only\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Tabs with CSS3 & HTML5 Only"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1248,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10279"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10279\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10286"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}