{"id":148,"date":"2010-10-09T03:07:32","date_gmt":"2010-10-09T11:07:32","guid":{"rendered":"https:\/\/www.bhavyatechnologies.com\/blog\/?p=148"},"modified":"2010-10-19T06:04:10","modified_gmt":"2010-10-19T14:04:10","slug":"css-tabs","status":"publish","type":"post","link":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/","title":{"rendered":"CSS Tabs"},"content":{"rendered":"<p>A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don&#8217;t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.<\/p>\n<div id=\"antiintro\">\n<div id=\"ai2\">\n<p>Tabs don&#8217;t have to be horizontal but they usually are so our first step is going to be to create a horizontal list, as already explained above.<\/p>\n<p>We&#8217;re going to try a few different things here with CSS, but we&#8217;ll be sticking with the following basic HTML structure:<\/p>\n<pre><code>\r\n&lt;div id=\"header\"&gt; \r\n\r\n&lt;h1&gt;Tabs&lt;\/h1&gt;\r\n&lt;ul&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;This&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li id=\"selected\"&gt;&lt;a href=\"#\"&gt;That&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;The Other&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Banana&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"content\"&gt;\r\n\t&lt;p&gt;Ispum schmipsum.&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>Basically, what we want to do with this HTML is turn each list item into a tab, with the selected item appearing to be part of the corresponding content area.<\/p>\n<p>First of all, we can rip out the list item markers and zero the margin and padding of the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/ul\/\"><code>ul<\/code><\/a> element:<\/p>\n<pre><code>\r\n#header ul {\r\n\tlist-style: none;\r\n\tpadding:0;\r\n\tmargin:0;\r\n}\r\n<\/code><\/pre>\n<p>Now to get down to business&#8230;<\/p>\n<h2>Inline list-items<\/h2>\n<p>The first thing we can do is make the list horizontal with the most straight-forward solution-by setting the display property of the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> elements to inline:<\/p>\n<pre><code>\r\n#header li {\r\n\tdisplay: inline;\r\n\tborder: solid;\r\n\tborder-width: 1px 1px 0 1px;\r\n\tmargin: 0 0.5em 0 0;\r\n}\r\n<\/code><\/pre>\n<p>This rule set also starts to make the items a little more tab-like by applying a border to the top, right, and left sides. The margin property here zeroes the margin on all sides except the right, because we&#8217;re going to space the tabs out a bit.<\/p>\n<p>Now we can make things a little tidier by padding out the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/a\/\"><code>a<\/code><\/a> elements a bit (adjusting this for the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/a\/\"><code>a<\/code><\/a> element, rather than for the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> elements, has the advantage of making the whole width of the tab clickable):<\/p>\n<pre><code>\r\n#header li a {\r\n\tpadding: 0 1em;\r\n}\r\n<\/code><\/pre>\n<p>So far the tabs aren&#8217;t sitting on anything, so we should add a border to the content div:<\/p>\n<pre><code>\r\n#content {\r\n\tborder: 1px solid;\r\n}\r\n<\/code><\/pre>\n<p>But there&#8217;s one essential thing missing. As it is, the tabs are just sitting across the top of the content box, all looking pretty much the same. What we need to do is make the &#8220;active&#8221; tab &#8211; the one that relates to the page we&#8217;re on, look as if it&#8217;s part of the content box, like a tab on the side of a dividing card.<\/p>\n<p>Because vertical padding in inline boxes doesn&#8217;t actually push anything out around it, we can simply do this:<\/p>\n<pre><code>\r\n#header #selected {\r\n\tpadding-bottom: 1px; \r\n\tbackground: white;\r\n}\r\n<\/code><\/pre>\n<p>This pads the bottom of the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> element with the &#8220;selected&#8221; id by one pixel, which pushes it over the top border of the content box. As the background color is white (assuming the content box&#8217;s background color is also white) it gives the illusion that the tab, and its border, are part of the content box.<\/p>\n<h2>Floated list-items<\/h2>\n<p>So far, this technique is great for basic tabs. Colors, border colors, text decoration, etc. can all be changed to suit. When it comes to padding, though, things go awry. For the very same reason that the &#8220;selected&#8221; tab works by spilling over onto the content box, padding cannot be applied to the initial tab states. They just wouldn&#8217;t behave.<\/p>\n<p>So if we want to do something a little funkier with the tabs, we need to horizontalize the list items a different way:<\/p>\n<pre><code>\r\n#header li {\r\n\tfloat: left;\r\n\tborder: 1px solid;\r\n\tborder-bottom-width: 0;\r\n\tmargin: 0 0.5em 0 0;\r\n}\r\n<\/code><\/pre>\n<p>It&#8217;s the same as before except that instead of displaying the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> elements inline, we are floating them to the left.<\/p>\n<p>Doing this breaks a few things elsewhere, so before we can continue we need to clear the content box from the float&#8217;s evil grasp and then, to make IE stop larking about and miscalculating margins, we need to get rid of any margins above the list:<\/p>\n<pre><code>\r\n#content {\r\n\tborder: 1px solid;\r\n\tclear: both;\r\n}\r\n\r\nh1 {\r\n\tmargin: 0;\r\n\tpadding: 0 0 1em 0;\r\n} \r\n<\/code><\/pre>\n<p>Now things are almost there with this method, but instead of applying padding to the selected list item like we did with the inline list item approach (which here would just pad things out because a floated box has a &#8220;block&#8221; display type), we are going to lift the whole thing and smack it down one pixel:<\/p>\n<pre><code>\r\n#header #selected {\r\n\tposition: relative;\r\n\ttop: 1px;\r\n\tbackground: white;\r\n}\r\n<\/code><\/pre>\n<p>So now <a href=\"http:\/\/htmldog.com\/examples\/tabs2.html\">things look almost the same as they did with the inline method<\/a>. One little difference is that the selected tab is one pixel lower than the others because it has been pushed down to cover the bottom line. To avoid this you can apply the last declaration block with the positioning and the background color to the link inside the list item (<code>#header #selected a<\/code>) instead of the list item itself (<code>#header #selected<\/code>), which can achieve a more desirable effect.<\/p>\n<h2>Making things look nicer&#8230;<\/h2>\n<p>There are <a href=\"http:\/\/htmldog.com\/examples\/tabs3.html\">little things we can do to make these tabs look better<\/a> such as removing the underlines, providing different colors for borders, changing the background colors when hovering etc, which can make the tabs more discernable and the &#8220;active&#8221; tab more obvious.<\/p>\n<h2>Playing around<\/h2>\n<p>Of course, tabs don&#8217;t have to be as borderific as the above examples. The main principles stay the same-you set your horizontal list items and then style them how you please.<\/p>\n<p>You can just <a href=\"http:\/\/htmldog.com\/examples\/tabs4.html\">separate tabs by using solid background colors<\/a>. Alternatively, a simple trick, conjured up by <a href=\"http:\/\/www.simplebits.com\/\">Dan Cederholm<\/a> is to manipulate the bottom border of a list item to produce <a href=\"http:\/\/htmldog.com\/examples\/tabs5.html\">thin protruding tabs<\/a>.<\/p>\n<p>And tabs don&#8217;t have to have boxy 90-degree corners, either. One technique popularized by <a href=\"http:\/\/www.stopdesign.com\/\">Doug Bowman<\/a> is known as <a href=\"http:\/\/www.alistapart.com\/articles\/slidingdoors\/\">Sliding Doors<\/a>, which involves two background images (one in the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/li\/\"><code>li<\/code><\/a> element and one in the <a href=\"http:\/\/htmldog.com\/reference\/htmltags\/a\/\"><code>a<\/code><\/a> element) for each side of the tab that slide over each other to <a href=\"http:\/\/htmldog.com\/examples\/tabs6.html\">accommodate different sizes<\/a>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don&#8217;t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of &hellip; <a href=\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS Tabs<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-148","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Tabs - Bhavya Technologies - Blog<\/title>\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.bhavyatechnologies.com\/blog\/css-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Tabs - Bhavya Technologies - Blog\" \/>\n<meta property=\"og:description\" content=\"A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don&#8217;t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of &hellip; Continue reading CSS Tabs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Bhavya Technologies - Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BhavyaWebTech\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-10-09T11:07:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-10-19T14:04:10+00:00\" \/>\n<meta name=\"author\" content=\"Bhavya Technologies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:site\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhavya Technologies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\"},\"author\":{\"name\":\"Bhavya Technologies\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\"},\"headline\":\"CSS Tabs\",\"datePublished\":\"2010-10-09T11:07:32+00:00\",\"dateModified\":\"2010-10-19T14:04:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\"},\"wordCount\":897,\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"articleSection\":[\"CSS Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\",\"name\":\"CSS Tabs - Bhavya Technologies - Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\"},\"datePublished\":\"2010-10-09T11:07:32+00:00\",\"dateModified\":\"2010-10-19T14:04:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Tabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"name\":\"Bhavya Technologies - Blog\",\"description\":\"\u00a0Digital Marketing, Website design &amp; development company in Hyderabad, India\",\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\",\"name\":\"Bhavya Web Technologies\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"contentUrl\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"width\":248,\"height\":100,\"caption\":\"Bhavya Web Technologies\"},\"image\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BhavyaWebTech\/\",\"https:\/\/x.com\/bhavyatech\",\"http:\/\/www.linkedin.com\/company\/bhavya-technologies\/\",\"http:\/\/www.youtube.com\/user\/bhavyatechnologies\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\",\"name\":\"Bhavya Technologies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"caption\":\"Bhavya Technologies\"},\"description\":\"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.\",\"sameAs\":[\"http:\/\/www.bhavyatechnologies.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Tabs - Bhavya Technologies - Blog","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.bhavyatechnologies.com\/blog\/css-tabs\/","og_locale":"en_US","og_type":"article","og_title":"CSS Tabs - Bhavya Technologies - Blog","og_description":"A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don&#8217;t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of &hellip; Continue reading CSS Tabs","og_url":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/","og_site_name":"Bhavya Technologies - Blog","article_publisher":"https:\/\/www.facebook.com\/BhavyaWebTech\/","article_published_time":"2010-10-09T11:07:32+00:00","article_modified_time":"2010-10-19T14:04:10+00:00","author":"Bhavya Technologies","twitter_card":"summary_large_image","twitter_creator":"@bhavyatech","twitter_site":"@bhavyatech","twitter_misc":{"Written by":"Bhavya Technologies","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#article","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/"},"author":{"name":"Bhavya Technologies","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895"},"headline":"CSS Tabs","datePublished":"2010-10-09T11:07:32+00:00","dateModified":"2010-10-19T14:04:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/"},"wordCount":897,"publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"articleSection":["CSS Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/","name":"CSS Tabs - Bhavya Technologies - Blog","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website"},"datePublished":"2010-10-09T11:07:32+00:00","dateModified":"2010-10-19T14:04:10+00:00","breadcrumb":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/css-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bhavyatechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Tabs"}]},{"@type":"WebSite","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","name":"Bhavya Technologies - Blog","description":"\u00a0Digital Marketing, Website design &amp; development company in Hyderabad, India","publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization","name":"Bhavya Web Technologies","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","contentUrl":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","width":248,"height":100,"caption":"Bhavya Web Technologies"},"image":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BhavyaWebTech\/","https:\/\/x.com\/bhavyatech","http:\/\/www.linkedin.com\/company\/bhavya-technologies\/","http:\/\/www.youtube.com\/user\/bhavyatechnologies"]},{"@type":"Person","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895","name":"Bhavya Technologies","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","caption":"Bhavya Technologies"},"description":"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.","sameAs":["http:\/\/www.bhavyatechnologies.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":3,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions"}],"predecessor-version":[{"id":150,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/148\/revisions\/150"}],"wp:attachment":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}