{"id":38877,"date":"2019-10-22T21:43:06","date_gmt":"2019-10-22T13:43:06","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38877"},"modified":"2019-10-19T17:39:28","modified_gmt":"2019-10-19T09:39:28","slug":"advanced-checkbox-styling","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/","title":{"rendered":"Advanced Checkbox Styling with CSS Grid"},"content":{"rendered":"

The CSS Grid Layout Module<\/a><\/strong> can not only solve a mammoth of a layout problem but also some good old mulish issues we\u2019ve been dealing with for a long time<\/strong>, such as styling a checkbox label<\/strong>.<\/p>\n

While there\u2019s a relatively straightforward method to style the label when it appears after<\/em> the checkbox, it\u2019s not that easy when the label appears before<\/em> it<\/strong>.<\/p>\n

Read Also:<\/strong> Guide to CSS Grid Layout Fr Unit<\/a><\/p>\n

Checkbox styling without CSS Grid<\/h2>\n

Styling a label after<\/em> a checkbox is something us developers have been doing ever since we read about it somewhere. This technique is one of the prime and old examples of the powerful dynamics that CSS can possess.<\/p>\n

Here\u2019s the code you already might be familiar with, that styles a label after<\/em> a checked checkbox<\/strong>:<\/p>\n

\r\n<input type=\"checkbox\">\r\n<label>label for the checkbox<\/label>\r\n<\/pre>\n
\r\ninput:checked + label {\r\n  \/* style me *\/\r\n}\r\n<\/pre>\n
A styled label after<\/em> a checkbox<\/strong> might look like this (however, you can use other style rules as well):<\/p>\n
\"Styling<\/figure>\n
The above CSS code uses the adjacent sibling combinator<\/a><\/strong> marked by the +<\/code> key. When a checkbox is in the :checked<\/code><\/a> state, an element after<\/em> it<\/strong> (usually a label) can be styled using this method.<\/p>\n
Such a simple and effective technique! What could possibly<\/em> go wrong with it? Nothing\u2014until you want to display the label before<\/em> the checkbox<\/strong>.<\/p>\n
The adjacent sibling combinator selects the next element<\/strong>; this means the label has to come after<\/em> the checkbox in the HTML source code.<\/p>\n
So, to make a label appear before<\/em> the belonging checkbox on the screen, we can\u2019t just move it before the checkbox in the source code, as a previous sibling selector doesn\u2019t exist in CSS<\/strong>.<\/p>\n
Which leaves only one option: repositioning the checkbox and the label<\/strong> using transform<\/code> or position<\/code> or margin<\/code> or another CSS property with some kind of telekinetic power, so that the label appears to the left of the checkbox on the screen.<\/p>\n
Problems with the traditional method<\/h2>\n
There\u2019s nothing majorly<\/em> wrong with the aforementioned technique but it can be inefficient in certain cases<\/strong>. I mean cases in which the rearranged positions of the checkbox and the label don\u2019t work anymore.<\/p>\n
Think responsive<\/strong>, for instance. You might have to resize or reposition the checkbox according to the device it\u2019s displayed on. When that happens, you will need to reposition the label as well<\/strong>, as there\u2019ll be no automatic realignment done to the label in response to the repositioning\/resizing of the checkbox.<\/p>\n
We can eliminate this disadvantage if we could just provide some solid layout for the checkbox and the label<\/strong>, instead of roughly positioning them on the page.<\/p>\n
But, almost all layout systems, such as tables or columns, require you to add the label before the checkbox in the source code<\/strong> to make it appear the same way on screen. That\u2019s something we don\u2019t want to do because the next element selector on the label will stop working.<\/p>\n
CSS Grid, on the other hand, is a layout system that is not<\/em> dependent on the placement\/order of elements in the source code<\/strong>.<\/p>\n
The reordering capabilities of grid layout intentionally affect only the visual rendering<\/em>, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact\u2026\n  \u2013 CSS Grid Layout Module Level 1, W3C<\/a><\/p><\/blockquote>\n
Thus, CSS grid is an ideal solution to style the label that appears before<\/em> the checkbox<\/strong>.<\/p>\n
Checkbox styling with CSS Grid<\/h2>\n
Let\u2019s start with the HTML code. The order of the checkbox and label will remain the same as before.<\/strong> We just add both of them to a grid.<\/p>\n
\r\n<div id=\"cbgrid\">\r\n  <input type=\"checkbox\">\r\n  <label>label for the checkbox<\/label>\r\n<\/div>\r\n<\/pre>\n
The accompanying CSS is as follows:<\/p>\n
\r\n#cbgrid {\r\n  display: grid;\r\n  grid-template-areas: \"left right\";\r\n  width: 150px;\r\n}\r\ninput[type=checkbox] {\r\n  grid-area: right;\r\n}\r\nlabel {\r\n  grid-area: left;\r\n}\r\n<\/pre>\n
I\u2019ll not go in depth on how the CSS grid works, as I already wrote a detailed article on the subject<\/strong>, that you can read here<\/a>. Some basics, however: the display: grid<\/code> property turns an element into a grid container, grid-area<\/code> identifies the grid area an element belongs to, and grid-template-areas<\/code> forms a grid layout, comprised of different grid areas.<\/p>\n
In the above code, there are two grid areas<\/strong>: \"left\"<\/code> and \"right\"<\/code>. They make up two columns of a grid row<\/strong>. The checkbox belongs to the \"right\"<\/code> area and the label to the \"left\"<\/code>. Here\u2019s how they look on screen<\/strong>:<\/p>\n
\"Styling<\/figure>\n
Since we didn\u2019t change the relative placement of the checkbox and the label in the source code, we can still use the adjacent sibling combinator<\/strong>:<\/p>\n
\r\ninput:checked + label {\r\n  \/* style me *\/\r\n}\r\n<\/pre>\n
Note that a grid item is always blockified<\/strong>; it appears with a surrounding box known as the grid-level box<\/strong>. If you don\u2019t want that, for instance for a label, put a wrapper on that item<\/strong> (wrap it in another element) and turn that wrapper into the grid area<\/strong>.<\/p>\n
That\u2019s it, folks. CSS grid hopefully helps you nail down the layouts of those cheeky checkboxes.<\/p>\n
Read Also:<\/strong> CSS Grid Layout: How to Use minmax()<\/a><\/p>","protected":false},"excerpt":{"rendered":"
The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we\u2019ve been dealing with for a long time, such as styling a checkbox label. While there\u2019s a relatively straightforward method to style the label when it appears after the checkbox, it\u2019s not that…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAdvanced Checkbox Styling with CSS Grid - Hongkiat<\/title>\n<meta name=\"description\" content=\"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,\" \/>\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.hongkiat.com\/blog\/advanced-checkbox-styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced Checkbox Styling with CSS Grid\" \/>\n<meta property=\"og:description\" content=\"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-22T13:43:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Advanced Checkbox Styling with CSS Grid\",\"datePublished\":\"2019-10-22T13:43:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/\"},\"wordCount\":807,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-checkbox-styling\\\/checkbox-demo.gif\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/\",\"name\":\"Advanced Checkbox Styling with CSS Grid - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-checkbox-styling\\\/checkbox-demo.gif\",\"datePublished\":\"2019-10-22T13:43:06+00:00\",\"description\":\"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-checkbox-styling\\\/checkbox-demo.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/advanced-checkbox-styling\\\/checkbox-demo.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/advanced-checkbox-styling\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Checkbox Styling with CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Advanced Checkbox Styling with CSS Grid - Hongkiat","description":"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,","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.hongkiat.com\/blog\/advanced-checkbox-styling\/","og_locale":"en_US","og_type":"article","og_title":"Advanced Checkbox Styling with CSS Grid","og_description":"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,","og_url":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-10-22T13:43:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Advanced Checkbox Styling with CSS Grid","datePublished":"2019-10-22T13:43:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/"},"wordCount":807,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif","articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/","url":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/","name":"Advanced Checkbox Styling with CSS Grid - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif","datePublished":"2019-10-22T13:43:06+00:00","description":"The CSS Grid Layout Module can not only solve a mammoth of a layout problem but also some good old mulish issues we've been dealing with for a long time,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/advanced-checkbox-styling\/checkbox-demo.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/advanced-checkbox-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Advanced Checkbox Styling with CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-a73","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38877"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38877\/revisions"}],"predecessor-version":[{"id":48881,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38877\/revisions\/48881"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38877"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}