{"id":15480,"date":"2012-11-19T21:01:49","date_gmt":"2012-11-19T13:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15480"},"modified":"2025-04-24T17:17:27","modified_gmt":"2025-04-24T09:17:27","slug":"html5-placeholder","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/","title":{"rendered":"A Look into: HTML5 Placeholder Attribute"},"content":{"rendered":"<p>One of my favorite new features in <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\">HTML5<\/a> is the ability to easily add <strong>placeholder text<\/strong>. Placeholder text is the gray text you find in an input field, used to hint to users what input is expected. Once a user starts typing in the <code>input<\/code> field, this text disappears.<\/p>\n<p>Previously, this was commonly done <strong>with JavaScript<\/strong>, as follows:<\/p>\n<pre>\n&lt;input type=\"text\" value=\"Placeholder text\"\n    onfocus=\"if(this.value=='Placeholder text')this.value='';\";\n    onblur=\"if(this.value=='')this.value=\"Placeholder text\";\"&gt;\n<\/pre>\n<p>While there\u2019s nothing wrong with this practice, HTML5 makes it easier.<\/p>\n<p>HTML5 introduced a new attribute with a logical name: <code>placeholder<\/code>. Here is an example:<\/p>\n<pre>\n&lt;input type=\"text\" placeholder=\"Placeholder Text\"&gt;\n<\/pre>\n<p>When viewed in a browser, the input field will now display the gray text, as shown below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Input field showing placeholder text\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg\" width=\"500\"><\/figure>\n<p>A few things should be noted: according to the specification, the <code>placeholder<\/code> attribute should not replace a <code>label<\/code>. It\u2019s also suggested that this attribute only be applied to <code>input<\/code> types requiring text, such as <code>text<\/code>, <code>password<\/code>, <code>search<\/code>, <code>email<\/code>, <code>textarea<\/code>, and <code>tel<\/code>.<\/p>\n<p>Adding <code>placeholder<\/code> to <code>radio<\/code> and <code>checkbox<\/code> input types will have no effect.<\/p>\n<h2>Placeholder & CSS<\/h2>\n<p>Furthermore, styling placeholder text with CSS is possible, although at the time of this writing, it\u2019s primarily limited to Firefox and Webkit-based browsers.<\/p>\n<p>The following example shows how to change the placeholder text color to green in both Webkit and Firefox:<\/p>\n<pre>\ninput::-webkit-input-placeholder {\n  color: green;\n}\ninput:-moz-placeholder {\n  color: green;\n}\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Input field green placeholder text\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-green-text.jpg\" width=\"500\"><\/figure>\n<p>Remember, <code>::-webkit-input-placeholder<\/code> and <code>:-moz-placeholder<\/code> only affect the text style and cannot be combined into a single rule.<\/p>\n<pre>\ninput::-webkit-input-placeholder, input:-moz-placeholder {\n  color: green;\n}\n<\/pre>\n<p>This piece of code won\u2019t work.<\/p>\n<h3>Attribute Selector<\/h3>\n<p>CSS3 supports this attribute by introducing the <code>[placeholder]<\/code> attribute selector:<\/p>\n<pre>\ninput[placeholder] {\n  border: 1px solid green;\n}\n<\/pre>\n<p>In the example above, we select every <code>input<\/code> with the <code>placeholder<\/code> attribute and change its border color to green.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Input field green border placeholder\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-att-selector.jpg\" width=\"500\"><\/figure>\n<h2>Browser Compatibility<\/h2>\n<p>Unsurprisingly, this HTML5 feature isn\u2019t supported in older browsers. Currently, full support is available in: <strong>Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6+ <\/strong>and<strong> Internet Explorer 10+<\/strong>.<\/p>\n<h3>Placeholder Polyfills<\/h3>\n<p>Nevertheless, if you need to display placeholders in older browsers while still using the <code>placeholder<\/code> attribute, you can use Polyfills. Many Placeholder Polyfills are available; in this example, we\u2019ll use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mattsparks\/placeMe.js\/wiki\/How-to-use-placeMe.js\">PlaceMe.js<\/a>:<\/p>\n<pre>\n&lt;script src=\"jquery.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"placeme.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n<\/pre>\n<p><strong>PlaceMe.js<\/strong>, as shown above, depends on jQuery. Now, when viewed in an older browser like Internet Explorer 9, the input fields should display the placeholder text thanks to the polyfill.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/html5-placeholder\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/html5-placeholder\/\">Download Source<\/a>\n<\/div>\n<h2>Final Thought<\/h2>\n<p>The HTML5 <strong><code>placeholder<\/code><\/strong> attribute certainly simplifies adding placeholder text. Now, it\u2019s up to web developers and designers to choose which method to use: the traditional JavaScript approach or the HTML5 attribute.<\/p>\n<p>If supporting older browsers with Polyfills and jQuery seems redundant for your project, the JavaScript method might be more suitable. However, if you can safely ignore older browsers, using the HTML5 <code>placeholder<\/code> attribute is likely the better approach.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used to hint to users what input is expected. Once a user starts typing in the input field, this text disappears. Previously, this was commonly done with&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392,352],"tags":[506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML5 Placeholder Attribute<\/title>\n<meta name=\"description\" content=\"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used\" \/>\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\/html5-placeholder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look into: HTML5 Placeholder Attribute\" \/>\n<meta property=\"og:description\" content=\"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/\" \/>\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=\"2012-11-19T13:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:17:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look into: HTML5 Placeholder Attribute\",\"datePublished\":\"2012-11-19T13:01:49+00:00\",\"dateModified\":\"2025-04-24T09:17:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/\"},\"wordCount\":405,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-placeholder\\\/html5-placeholder-cover.jpg\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/\",\"name\":\"HTML5 Placeholder Attribute\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-placeholder\\\/html5-placeholder-cover.jpg\",\"datePublished\":\"2012-11-19T13:01:49+00:00\",\"dateModified\":\"2025-04-24T09:17:27+00:00\",\"description\":\"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-placeholder\\\/html5-placeholder-cover.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-placeholder\\\/html5-placeholder-cover.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-placeholder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look into: HTML5 Placeholder Attribute\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML5 Placeholder Attribute","description":"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used","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\/html5-placeholder\/","og_locale":"en_US","og_type":"article","og_title":"A Look into: HTML5 Placeholder Attribute","og_description":"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-19T13:01:49+00:00","article_modified_time":"2025-04-24T09:17:27+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look into: HTML5 Placeholder Attribute","datePublished":"2012-11-19T13:01:49+00:00","dateModified":"2025-04-24T09:17:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/"},"wordCount":405,"commentCount":36,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/","name":"HTML5 Placeholder Attribute","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg","datePublished":"2012-11-19T13:01:49+00:00","dateModified":"2025-04-24T09:17:27+00:00","description":"One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text is the gray text you find in an input field, used","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-placeholder\/html5-placeholder-cover.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-placeholder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look into: HTML5 Placeholder Attribute"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-41G","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15480","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15480"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15480\/revisions"}],"predecessor-version":[{"id":74117,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15480\/revisions\/74117"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15480"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}