{"id":30558,"date":"2017-06-19T23:01:56","date_gmt":"2017-06-19T15:01:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30558"},"modified":"2022-10-09T21:36:17","modified_gmt":"2022-10-09T13:36:17","slug":"new-html-features","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/","title":{"rendered":"5 HTML Features You Might Not Know About"},"content":{"rendered":"

For a language so simple and easy to learn<\/strong>, HTML surely offers an unexpected amount of useful features<\/a><\/strong>, many of which most of us don\u2019t even know about. It\u2019s hard to keep up with times and you may think that all \u201cyou might not know\u201d articles must be about the most recent tags, HTML also has some quite helpful features that are already around for a while<\/strong>.<\/p>\n

From checking spelling to adding keyboard shortcuts, in this article, I\u2019ll show you five less-widely known HTML features<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 New Features of HTML 5.1 & How to Use Them IRL<\/a>\n\t\t\t\t<\/p>\n

1. Check spelling as you type<\/h2>\n

The spellcheck<\/code><\/a> attribute<\/strong> prompts browsers to check spellings while a user is typing an element. This attribute is global, meaning, you can add it to any HTML tag<\/strong>.<\/p>\n

However, it only works on elements that can take text input<\/strong>. Having it global is useful because it can be inherited by child elements<\/strong>. For instance, add it to a <div><\/code> tag<\/strong> and all of its child elements that take text input will inherit this attribute.<\/p>\n

Spell checking works on all text <input><\/code> types<\/strong>: text<\/code>, search<\/code>, url<\/code>, and email<\/code>. It also works on <textarea><\/code>, and editable elements<\/strong> (elements with contenteditable<\/code> attribute).<\/p>\n

Its value can be an empty string, true<\/code>, or false<\/code>. The empty string and true<\/code> will enable the spell checker<\/strong>.<\/p>\n

\r\n<input type=\"text\" spellcheck=\"true\"\r\nplaceholder=\"Type something here\">\r\n<p contenteditable=\"true\" spellcheck=\"true\">\r\n  Type something here\r\n<\/p>\r\n<\/pre>\n
In the above code, both the <div><\/code> and <p><\/code> tags will check spellings<\/strong> when a user is typing into them.<\/p>\n
If the user has disabled spell checking<\/strong> in the browser settings the spelling won\u2019t be checked, even if spellcheck<\/code> was added<\/strong>.<\/p>\n
2.  Be safe from compromised CDN resources<\/h2>\n
It is pretty common to host resources, such as scripts and stylesheet files, through CDN<\/abbr>s. But, if the CDN gets compromised<\/strong>, so do those hosted files, and if any fetched resource is compromised on your website, so does your site!<\/p>\n
See what Mozilla Developer Network<\/a> says about the problem:<\/p>\n
\u2026 using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.<\/q><\/p><\/blockquote>\n
To prevent this, Subresource Integrity (SRI)<\/a><\/strong> was introduced in early 2014 by W3C<\/a>. This scheme compares the hash value<\/strong> (the result of applying a hash function<\/a> to an input) of a resource<\/strong> to validate it.<\/p>\n
Say, there\u2019s a JavaScript file at https:\/\/example.com\/example.js<\/code>. First, you apply a hash function<\/strong> to that file, then add the produced hash value<\/strong> to the integrity<\/code> attribute<\/strong> of the <script><\/code> tag<\/strong> that imports example.js<\/code> to your website.<\/p>\n
\r\n<script src=\"https:\/\/example.com\/example.js\"\r\nintegrity=\"sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR\/VqsVpcw+ThHmYcwiB1pbOxEbzJr7\"\r\ncrossorigin=\"anonymous\"><\/script>\r\n<\/pre>\n
Now, whenever a web page of your site with the above code has to load example.js<\/code>, the browser first applies the hash function<\/strong>, and loads and runs example.js<\/code> only when its hash value matches the integrity<\/code> value<\/strong>.<\/p>\n
If example.com<\/code> was compromised<\/strong> and example.js<\/code> was interfered<\/strong> with then the hash value of example.js<\/code> won\u2019t match the integrity<\/code> value<\/strong>.<\/p>\n
Most common CDNs already provide SRI integrity<\/code> values<\/strong>, but you can also generate one here<\/a>.<\/p>\n
3. Override form targets in submit buttons<\/h2>\n
You\u2019re most likely familiar with the target<\/code> attribute<\/strong>, the one that decides where a hyperlinked resource opens<\/strong>, for instance on the same page or in a new tab. You might also know that the same target<\/code> attribute used in the <form><\/code> tag decides where the response from the form submission is shown<\/strong>.<\/p>\n
In one of the early drafts of HTML5, formtarget<\/code><\/a> was defined along with four other form submission attributes: formaction<\/code>, formenctype<\/code>, formmethod<\/code><\/strong>, and formnovalidate<\/code><\/strong>.<\/p>\n
These attributes can be used with submit buttons<\/strong>, and they override their respective attributes in the <form><\/code> tag to which the buttons belong to.<\/p>\n
So, when a form is submitted using a button that has a formtarget<\/code> attribute, the response is shown according to the formtarget<\/code> value<\/strong>, instead of the target<\/code> value of <form><\/code>.<\/p>\n
\r\n<form action=\"\/save\" target=\"_self\" >\r\n  <input type=\"submit\" name=\"save\"  \/>\r\n  <input type=\"submit\" name=\"print\" formaction=\"\/print\"\r\n  formtarget=\"_blank\" \/>\r\n<\/form>\r\n<\/pre>\n
In the above code, when the form is submitted using the second submit button (print<\/code> ), the response will appear in a new browsing context<\/strong>, like in a new tab.<\/p>\n
4. Hide elements semantically<\/h2>\n
When it comes to hiding elements<\/strong>, we all went through different phases of hiding elements: using opacity:0<\/code>, visibility:hidden<\/code>, height:0; width:0<\/code>, display:none<\/code>, text-indent:-999px<\/code><\/strong> in our CSS file.<\/p>\n
Each method has its purpose, none of them are redundant, and so isn\u2019t this one: the hidden<\/code><\/a> HTML attribute<\/strong>. If an element has hidden<\/code> specified on it, it\u2019ll be hidden.<\/p>\n
\r\n<div hidden>...<\/div>\r\n<\/pre>\n
It works the same way as the display:none;<\/code> CSS rule;<\/strong> the element with the hidden<\/code> attribute doesn\u2019t get rendered<\/strong> on the page. Any script inside the element will be executed, and if it\u2019s a form control it\u2019ll be submitted along with other form controls during form submission<\/strong>.<\/p>\n
However, the benefit of hidden<\/code> is that it\u2019s semantically appropriate<\/strong>, after all, HTML5 is all about semantics<\/a> and hidden<\/code> is part of the HTML5 entourage!<\/p>\n
Moreover, when an element is hidden, it\u2019s to be hidden in all<\/i> platforms<\/strong>, not just in web browsers but in screenreaders, TV, projectors, etc.<\/p>\n
It\u2019s also not style-dependent<\/strong>, even if you strip away the author CSS from a page, the element will remain hidden. Whereas in the case of display:none;<\/code> that won\u2019t happen. So, think of hidden<\/code> as the ironclad version of display:none;<\/code><\/strong>.<\/p>\n
5. Add keyboard shortcuts<\/h2>\n
The accesskey<\/code><\/a> global attribute<\/strong> was already defined in HTML4 and it creates a keyboard shortcut<\/strong> with which the user can operate an element on the page.<\/p>\n
The key combination for a shortcut will depend on two things<\/strong>:<\/p>\n
    \n
  1. the accesskey<\/code> value<\/strong> that we give to an element<\/li>\n
  2. the pre-assigned keys used by a browser<\/strong> for the same element<\/li>\n<\/ol>\n
    \"Accesskey
    IMAGE: Mozilla Developer Network<\/a><\/figcaption><\/figure>\n
    Take this example:<\/p>\n
    \r\n<button accesskey=\"v\" onclick=\"alert('View Click')\">\r\n  View\r\n<\/button>\r\n<\/pre>\n
    In Firefox, if you press the key combination Alt<\/span> + Shift<\/span> + V<\/span> (or Alt<\/span> + Control<\/span> + V<\/span><\/strong> in macOS) you\u2019ll get the alert \u201cView Clicked\u201d.<\/p>\n
    Since the predefined browser keys vary with each browser and OS, it is recommended you let the users know of the key combinations<\/strong> used for the shortcuts.<\/p>\n
    \n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Cool Things HTML Tags Can Do<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
    For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don\u2019t even know about. It\u2019s hard to keep up with times and you may think that all \u201cyou might not know\u201d articles must be about the most recent tags, HTML also…<\/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":[506,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n5 HTML Features You Might Not Know About - Hongkiat<\/title>\n<meta name=\"description\" content=\"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.\" \/>\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\/new-html-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 HTML Features You Might Not Know About\" \/>\n<meta property=\"og:description\" content=\"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/new-html-features\/\" \/>\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=\"2017-06-19T15:01:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-09T13:36:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"5 HTML Features You Might Not Know About\",\"datePublished\":\"2017-06-19T15:01:56+00:00\",\"dateModified\":\"2022-10-09T13:36:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/\"},\"wordCount\":929,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/new-html-features\\\/acesskey-table.jpg\",\"keywords\":[\"HTML\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/\",\"name\":\"5 HTML Features You Might Not Know About - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/new-html-features\\\/acesskey-table.jpg\",\"datePublished\":\"2017-06-19T15:01:56+00:00\",\"dateModified\":\"2022-10-09T13:36:17+00:00\",\"description\":\"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/new-html-features\\\/acesskey-table.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/new-html-features\\\/acesskey-table.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/new-html-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 HTML Features You Might Not Know About\"}]},{\"@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":"5 HTML Features You Might Not Know About - Hongkiat","description":"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.","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\/new-html-features\/","og_locale":"en_US","og_type":"article","og_title":"5 HTML Features You Might Not Know About","og_description":"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.","og_url":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-19T15:01:56+00:00","article_modified_time":"2022-10-09T13:36:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg","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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"5 HTML Features You Might Not Know About","datePublished":"2017-06-19T15:01:56+00:00","dateModified":"2022-10-09T13:36:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/"},"wordCount":929,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg","keywords":["HTML","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/new-html-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/","url":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/","name":"5 HTML Features You Might Not Know About - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg","datePublished":"2017-06-19T15:01:56+00:00","dateModified":"2022-10-09T13:36:17+00:00","description":"For a language so simple and easy to learn, HTML surely offers an unexpected amount of useful features, many of which most of us don't even know about.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/new-html-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/new-html-features\/acesskey-table.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/new-html-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 HTML Features You Might Not Know About"}]},{"@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-7WS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30558","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=30558"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30558\/revisions"}],"predecessor-version":[{"id":62599,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30558\/revisions\/62599"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30558"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}