{"id":14022,"date":"2012-06-18T21:01:37","date_gmt":"2012-06-18T13:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14022"},"modified":"2025-04-04T01:07:06","modified_gmt":"2025-04-03T17:07:06","slug":"html5-details-summary-tags","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/","title":{"rendered":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags"},"content":{"rendered":"<p>Among several new tags that are available in HTML5, Specifications (such as: <code>figure<\/code>, <code>figcaption<\/code>, and <code>aside<\/code>), <code>detail<\/code> and <code>summary<\/code> tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary.<\/p>\n<p>We actually often see this effect around, but most of them are still built upon JavaScript or its brother: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/openjsf.org\">jQuery<\/a>, which most people don\u2019t understand. Now, with these new elements \u2013 <code>details<\/code> and <code>summary<\/code> \u2013 things will get easier.<\/p>\n<p>So, let\u2019s see how tags work in a real case scenario.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/building-html5-css-webpages\/\" class=\"ref-block__link\" title=\"Read More: Beginner\u2019s Guide to Building HTML5\/CSS3 Webpages\" rel=\"bookmark\"><span class=\"screen-reader-text\">Beginner\u2019s Guide to Building HTML5\/CSS3 Webpages<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/building-html5-css-webpages.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-10587 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/building-html5-css-webpages.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Beginner\u2019s Guide to Building HTML5\/CSS3 Webpages<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tLearn how to build stunning webpages using HTML5 and CSS with this step-by-step guide. Perfect for beginners and...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>In this demo we are going to summarize a product description. First let\u2019s create a \u2018details\u2019 tag and then put all the content along with the \u2018summary\u2019 tag inside it, like in the example below:<\/p>\n<pre>\r\n &lt;details&gt;\r\n &lt;summary&gt;MacBook Pro Specification&lt;\/summary&gt;\r\n &lt;ul&gt;\r\n &lt;li&gt;&lt;strong&gt;13.3-inch LED-backlit glossy widescreen display&lt;\/strong&gt; with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).&lt;\/li&gt;\r\n &lt;li&gt;&lt;strong&gt;2.4 GHz Intel Core i5 dual-core processor&lt;\/strong&gt; with 3 MB shared L3 cache for excellent multitasking.&lt;\/li&gt;\r\n &lt;li&gt;&lt;strong&gt;Intel HD Graphics 3000&lt;\/strong&gt; with 384 MB of DDR3 SDRAM shared with main memory.&lt;\/li&gt;\r\n &lt;li&gt;&lt;strong&gt;500 GB Serial ATA hard drive&lt;\/strong&gt; (5400 RPM)&lt;\/li&gt;\r\n &lt;li&gt;&lt;strong&gt;4 GB installed RAM&lt;\/strong&gt; (1333 MHz DDR3; supports up to 8 GB)&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n &lt;\/details&gt;\r\n <\/pre>\n<p>In that example, I\u2019ve added <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apple.com\/macbookpro\/\">MacBook Pro<\/a> specification detail, and now let\u2019s see how the browser renders those tags.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.jpg\" width=\"500\" height=\"667\"><\/figure>\n<p>I also have added a title and more descriptions of the product above the details to make the above demo more sensible to you. So, what do you think? It\u2019s quite easy, right?<\/p>\n<h2>Browser Supports<\/h2>\n<p>However, before you rush to apply this tag to your entire website, it should be noted that the details and summary tag is currently <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/details\">only supported on Chrome 12 and above<\/a>.<\/p>\n<p>Even the latest Firefox doesn\u2019t support them yet.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ff12.jpg\" width=\"500\" height=\"458\"><\/figure>\n<p>So, if you want to apply this tag, you need to include a fallback function for unsupported browsers. The good news it, it\u2019s simple; you can use this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mathiasbynens\/jquery-details\/downloads\">details polyfill<\/a>, which will automatically replicate the tag functionality for old browsers.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mathiasbynens\/jquery-details\/downloads\">Download this file<\/a> and link it to the html document along with the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a> (1.7+ at minimum) and make sure you place the polyfill before the close body tag.<\/p>\n<p>And inside the head tag, insert the following conditional tag to include <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/afarkas\/html5shiv\">HTML5shiv<\/a> for IE8 and earlier, otherwise the Internet Explorer will not recognize these new tags.<\/p>\n<pre>\r\n &lt;!--[if lt IE 9]&gt;&lt;script src=\"http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js\"&gt;&lt;\/script&gt;&lt;![endif]--&gt;<\/pre>\n<p>Now let\u2019s see how it turns out in Internet Explorer:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ie8.jpg\" width=\"500\" height=\"417\"><\/figure>\n<p>And it now works on Internet Explorer as well.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/demo\/index.html\">Demo<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/demo\/source.zip\">Download Source<\/a> <\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Creating such a hide-and-show effect with JavaScript or jQuery is actually relatively easy, but having it natively supported from the browser is definitely a much easier solution for many people. Whether you want to do it in JavaScript or in HTML5, it\u2019s your decision. Thanks for reading, and I hope you enjoyed it.<\/p>","protected":false},"excerpt":{"rendered":"<p>Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are the most useful. With these new tags you can hide some of the long content and display only the summary. We actually often see this effect around, but most of them&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags - Hongkiat<\/title>\n<meta name=\"description\" content=\"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are\" \/>\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-details-summary-tags\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags\" \/>\n<meta property=\"og:description\" content=\"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/\" \/>\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-06-18T13:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:07:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.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-details-summary-tags\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags\",\"datePublished\":\"2012-06-18T13:01:37+00:00\",\"dateModified\":\"2025-04-03T17:07:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/\"},\"wordCount\":404,\"commentCount\":39,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-details-summary-tags\\\/details-demo-ch.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-details-summary-tags\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/\",\"name\":\"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-details-summary-tags\\\/details-demo-ch.jpg\",\"datePublished\":\"2012-06-18T13:01:37+00:00\",\"dateModified\":\"2025-04-03T17:07:06+00:00\",\"description\":\"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-details-summary-tags\\\/details-demo-ch.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-details-summary-tags\\\/details-demo-ch.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-details-summary-tags\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags\"}]},{\"@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":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags - Hongkiat","description":"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are","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-details-summary-tags\/","og_locale":"en_US","og_type":"article","og_title":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags","og_description":"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-18T13:01:37+00:00","article_modified_time":"2025-04-03T17:07:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.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-details-summary-tags\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags","datePublished":"2012-06-18T13:01:37+00:00","dateModified":"2025-04-03T17:07:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/"},"wordCount":404,"commentCount":39,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.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-details-summary-tags\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/","name":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.jpg","datePublished":"2012-06-18T13:01:37+00:00","dateModified":"2025-04-03T17:07:06+00:00","description":"Among several new tags that are available in HTML5, Specifications (such as: figure, figcaption, and aside), detail and summary tags, in my opinion, are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-details-summary-tags\/details-demo-ch.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-details-summary-tags\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use &lt;DETAILS&gt; and &lt;SUMMARY&gt; HTML Tags"}]},{"@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-3Ea","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14022","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=14022"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14022\/revisions"}],"predecessor-version":[{"id":73522,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14022\/revisions\/73522"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14022"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}