{"id":18999,"date":"2014-01-08T13:01:07","date_gmt":"2014-01-08T05:01:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18999"},"modified":"2025-04-04T01:40:02","modified_gmt":"2025-04-03T17:40:02","slug":"html5-dialog-window","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/","title":{"rendered":"Easily Creating a Modal Window with the HTML5 Dialog Tag"},"content":{"rendered":"<p>The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress), notifications, and various methods for highlighting important information to visitors.<\/p>\n<p>Traditionally, we\u2019ve leveraged jQuery plugins such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jqueryui.com\/dialog\/\">jQuery UI Dialog<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/javascript\/#modals\">Twitter Bootstrap Modal<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.thomasgrauer.com\/popeasy\/\">Popeasy<\/a> for creating modals. However, HTML5 introduces the <code>&lt;dialog&gt;<\/code> tag, offering a straightforward method to implement native modal windows.<\/p>\n<h2>Utilizing the Dialog Tag<\/h2>\n<p>The <code>&lt;dialog&gt;<\/code> tag is utilized similarly to other HTML elements; you simply insert the desired content within the dialog window as follows:<\/p>\n<pre>\r\n&lt;dialog id=\"window\"&gt;\r\n  &lt;h3&gt;Hello World!&lt;\/h3&gt;\r\n  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!&lt;\/p&gt;\r\n  &lt;button id=\"exit\"&gt;Exit&lt;\/button&gt;\r\n&lt;\/dialog&gt;\r\n&lt;button id=\"show\"&gt;Show Dialog&lt;\/button&gt;\r\n<\/pre>\n<p>In Chrome, the only browser currently supporting this tag, the dialog window remains hidden by default. Given our HTML structure, only the <span class=\"key\">Show Dialog<\/span> button is visible. To display the dialog, utilize the JavaScript API <code>.show()<\/code>, and <code>.close()<\/code> to conceal it again.<\/p>\n<pre>\r\n(function() {\r\n  var dialog = document.getElementById('window');\r\n  document.getElementById('show').onclick = function() {\r\n    dialog.show();\r\n  };\r\n  document.getElementById('exit').onclick = function() {\r\n    dialog.close();\r\n  };\r\n})();\r\n<\/pre>\n<p>Upon clicking the <span class=\"key\">\u201cShow Dialog\u201d<\/span> button, the dialog window appears centered in the browser window.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.jpg\" alt=\"HTML5 Dialog Demonstration\" width=\"500\" height=\"320\"><\/figure>\n<p>To tailor the dialog window\u2019s appearance, CSS can be employed. By default, it spans the browser\u2019s full width, but you can define its width as follows:<\/p>\n<pre>\r\ndialog {\r\n  width: 500px;\r\n}\r\n<\/pre>\n<p>The <code>&lt;dialog&gt;<\/code> element also introduces a new pseudo-element, <code>::backdrop<\/code>, for styling the dimmed background typically seen behind modal windows. This feature enhances focus on the dialog while dimming the rest of the content, although it\u2019s not yet supported but expected in future updates.<\/p>\n<h2>Conclusion<\/h2>\n<p>HTML has evolved so much in the last couple of years. It\u2019s no longer only for constructing web page, we can even now build interactive UI with new HTML elements like <code>&lt;dialog&gt;<\/code> along with JavaScript API. Please note that this element is experimental, it\u2019s not ready for production yet, and it only <b>works in Chrome with the Experimental Features enabled from the <code>chrome:\/\/flags<\/code> page.<\/b><\/p>\n<h2>Wrapping Up<\/h2>\n<p>HTML has undergone significant evolution in recent years, transforming from a mere tool for creating web pages to a powerful medium for building interactive user interfaces. This progress is exemplified by the introduction of new elements like <code>&lt;dialog&gt;<\/code>, which, along with JavaScript APIs, allows for the development of rich UI components. However, it\u2019s important to note that this element is still experimental and not yet suitable for production environments. Currently, it <b>only functions in Chrome when Experimental Features are activated via the <code>chrome:\/\/flags<\/code> page<\/b>.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/html5-dialog-window\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/html5-dialog-window\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress), notifications, and various methods for highlighting important information to visitors. Traditionally, we\u2019ve leveraged jQuery plugins such as jQuery UI Dialog, Twitter Bootstrap Modal, and Popeasy for creating modals. However, HTML5 introduces the &lt;dialog&gt; tag, offering&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":[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>Easily Creating a Modal Window with the HTML5 Dialog Tag - Hongkiat<\/title>\n<meta name=\"description\" content=\"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),\" \/>\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-dialog-window\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easily Creating a Modal Window with the HTML5 Dialog Tag\" \/>\n<meta property=\"og:description\" content=\"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/\" \/>\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=\"2014-01-08T05:01:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:40:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.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=\"2 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-dialog-window\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Easily Creating a Modal Window with the HTML5 Dialog Tag\",\"datePublished\":\"2014-01-08T05:01:07+00:00\",\"dateModified\":\"2025-04-03T17:40:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/\"},\"wordCount\":429,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-dialog-window\\\/dialog-demo.jpg\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/\",\"name\":\"Easily Creating a Modal Window with the HTML5 Dialog Tag - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-dialog-window\\\/dialog-demo.jpg\",\"datePublished\":\"2014-01-08T05:01:07+00:00\",\"dateModified\":\"2025-04-03T17:40:02+00:00\",\"description\":\"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-dialog-window\\\/dialog-demo.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-dialog-window\\\/dialog-demo.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-dialog-window\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easily Creating a Modal Window with the HTML5 Dialog Tag\"}]},{\"@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":"Easily Creating a Modal Window with the HTML5 Dialog Tag - Hongkiat","description":"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),","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-dialog-window\/","og_locale":"en_US","og_type":"article","og_title":"Easily Creating a Modal Window with the HTML5 Dialog Tag","og_description":"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-01-08T05:01:07+00:00","article_modified_time":"2025-04-03T17:40:02+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Easily Creating a Modal Window with the HTML5 Dialog Tag","datePublished":"2014-01-08T05:01:07+00:00","dateModified":"2025-04-03T17:40:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/"},"wordCount":429,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.jpg","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/","name":"Easily Creating a Modal Window with the HTML5 Dialog Tag - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.jpg","datePublished":"2014-01-08T05:01:07+00:00","dateModified":"2025-04-03T17:40:02+00:00","description":"The modal window, a ubiquitous interface element across websites, often houses subscription forms, upload interfaces (like those seen in WordPress),","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-dialog-window\/dialog-demo.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-dialog-window\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Easily Creating a Modal Window with the HTML5 Dialog Tag"}]},{"@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-4Wr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18999","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=18999"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18999\/revisions"}],"predecessor-version":[{"id":73647,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18999\/revisions\/73647"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18999"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}