{"id":14074,"date":"2012-06-25T21:01:33","date_gmt":"2012-06-25T13:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14074"},"modified":"2025-04-04T01:09:47","modified_gmt":"2025-04-03T17:09:47","slug":"css-marquee","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/","title":{"rendered":"Marquee in CSS &#8211; Beginner&#8217;s Guide"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.usabilityfirst.com\/glossary\/marquee\/\">Marquee<\/a> was <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.javascriptkit.com\/javatutors\/marquee.shtml\">first introduced<\/a> in Internet Explorer and was very popular in the \u201990s before W3C ultimately decided to exclude it from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/tags\/default.asp\">HTML standard element<\/a> due to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Marquee_element#Usability_problems\">usability issues<\/a>. Web designers were encouraged to not use the tag.<\/p>\n<p>Surprisingly though, the marquee is now making a comeback, not in a tag <code>&lt;marquee&gt;<\/code> format like it did, but in a CSS Module. This module is available as part of the Webkit CSS specification and the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.w3c.org\/\">W3C<\/a> is currently working on a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-marquee\/\">similar module<\/a> as well. However, since the W3C version is still at the Candidate Recommendation stage, it is not applicable yet. So, at this time, we will only cover the one from the Webkit specification.<\/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\/css-back-to-basics-terminology-explained\/\" class=\"ref-block__link\" title=\"Read More: CSS Terminologies Explained\" rel=\"bookmark\"><span class=\"screen-reader-text\">CSS Terminologies Explained<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9063 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">CSS Terminologies Explained<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS has become the most popular language for front-end design and has amazing abilities with the release of...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The Syntax<\/h2>\n<p>First of all, the marquee can be defined using the following shorthand syntax.<\/p>\n<pre>-webkit-marquee: [direction] [increment] [repetition] [style] [speed]<\/pre>\n<p>Each of the values needed in the syntax above, I believe, are quite self-explanatory, or else you can find them sufficiently explained at <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-infos.net\/property\/-webkit-marquee\">this documentation<\/a>. So, if you want to dig deeper into how this syntax is going to work you can always refer to the documentation first.<\/p>\n<p>Then, join us as we proceed to create some real examples and see how it in action.<\/p>\n<h2>Example 1: Scrolling the text<\/h2>\n<p>All right, in the first example we will create the classic movement of the marquee that is having the text move from right to left.<\/p>\n<p>Let\u2019s create our text markup like below:<\/p>\n<pre>&lt;div class=\"marquee\"&gt;Lollipop topping lemon drops jujubes applicake fruitcake tart liquorice sesame snaps.&lt;\/div&gt;<\/pre>\n<p>Then define the marquee with the following syntax.<\/p>\n<pre>\r\n -webkit-marquee: auto medium infinite scroll normal; \r\n overflow-x: -webkit-marquee;\r\n <\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.jpg\" alt=\"marquee scroll\" width=\"500\" height=\"200\"><\/figure>\n<p>When the marquee direction is set to <strong>auto<\/strong>, it will by default move from the right to the left; alternatively you can change this value to <strong>left<\/strong>. Also notice that the <code>overflow-x<\/code> property has to be set to <strong>-webkit-marquee<\/strong> so that the content will always act like one. If you omit this property, the text will not move on.<\/p>\n<h2>Example 2: Bounce back and forth<\/h2>\n<p>In the second example, we will try giving a different style to the marquee. This time we use <strong>alternate<\/strong> instead of <strong>scroll<\/strong> and change the direction value to <strong>right<\/strong>. That way, the marquee will move from the left to the right then bounce back and forth.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-alternate.jpg\" alt=\"marquee alternate\" width=\"500\" height=\"200\"><\/figure>\n<pre>\r\n -webkit-marquee: auto medium infinite alternate normal;\r\n overflow-x: -webkit-marquee;\r\n <\/pre>\n<h2>Example 3: Moving the text upwards<\/h2>\n<p>And for the last example, we will change the marquee direction to move upwards. There are two <code>direction<\/code> values to do so; you can change the value to <strong>up<\/strong> or <strong>ahead<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-ahead.jpg\" alt=\"amrquee ahead\" width=\"500\" height=\"200\"><\/figure>\n<p>Personally, I don\u2019t get why the Webkit provided two values that essentially do the same thing since I think that could lead to confusion for some people.<\/p>\n<pre>\r\n -webkit-marquee: up medium infinite scroll normal;\r\n overflow-x: -webkit-marquee;\r\n <\/pre>\n<p>Furthermore, I\u2019ve compiled some more examples, but they will be overwhelming if they are all explained here.<\/p>\n<h2>Final thoughts & References<\/h2>\n<p>I was first surprised that there is still interest in the marquee, which I thought had met its end. This also led me to question how a CSS module <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-marquee\/\">like<\/a> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-infos.net\/property\/-webkit-marquee\">this<\/a> is going to be useful. In fact every browser is still supporting the legacy of the <code>&lt;marquee&gt;<\/code> tag.<\/p>\n<p>So, what do you think? Is the marquee still relevant at this age and would it be useful in modern <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/design\/\">web design<\/a>?<\/p>\n<p>If you are still curious about this marquee stuff, you can visit some of the following references:<\/p>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/safari\/resources\/\">Safari CSS Reference<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/demo\/safari-marquee.php\">Webkit marquee generator<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sitepoint.com\/marquee-html-element\/\">Comprehensive documentation of the old <code>&lt;marquee&gt;<\/code> tag<\/a> from Sitepoint.<\/li>\n<li>And there is always a generator for almost everything, including this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.quackit.com\/html\/html_generators\/html_marquee_generator.cfm\">Marquee Generator<\/a>.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Marquee was first introduced in Internet Explorer and was very popular in the \u201990s before W3C ultimately decided to exclude it from the HTML standard element due to usability issues. Web designers were encouraged to not use the tag. Surprisingly though, the marquee is now making a comeback, not in a tag &lt;marquee&gt; format like&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":[507],"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.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Marquee in CSS - Beginner&#039;s Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Marquee was first introduced in Internet Explorer and was very popular in the &#039;90s before W3C ultimately decided to exclude it from the HTML standard\" \/>\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\/css-marquee\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Marquee in CSS - Beginner&#039;s Guide\" \/>\n<meta property=\"og:description\" content=\"Marquee was first introduced in Internet Explorer and was very popular in the &#039;90s before W3C ultimately decided to exclude it from the HTML standard\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-marquee\/\" \/>\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-25T13:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:09:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.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=\"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\\\/css-marquee\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Marquee in CSS &#8211; Beginner&#8217;s Guide\",\"datePublished\":\"2012-06-25T13:01:33+00:00\",\"dateModified\":\"2025-04-03T17:09:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/\"},\"wordCount\":563,\"commentCount\":28,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-in-css\\\/marquee-scroll.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/\",\"name\":\"Marquee in CSS - Beginner's Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-in-css\\\/marquee-scroll.jpg\",\"datePublished\":\"2012-06-25T13:01:33+00:00\",\"dateModified\":\"2025-04-03T17:09:47+00:00\",\"description\":\"Marquee was first introduced in Internet Explorer and was very popular in the '90s before W3C ultimately decided to exclude it from the HTML standard\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-in-css\\\/marquee-scroll.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/marquee-in-css\\\/marquee-scroll.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-marquee\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Marquee in CSS &#8211; Beginner&#8217;s Guide\"}]},{\"@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":"Marquee in CSS - Beginner's Guide - Hongkiat","description":"Marquee was first introduced in Internet Explorer and was very popular in the '90s before W3C ultimately decided to exclude it from the HTML standard","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\/css-marquee\/","og_locale":"en_US","og_type":"article","og_title":"Marquee in CSS - Beginner's Guide","og_description":"Marquee was first introduced in Internet Explorer and was very popular in the '90s before W3C ultimately decided to exclude it from the HTML standard","og_url":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-06-25T13:01:33+00:00","article_modified_time":"2025-04-03T17:09:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Marquee in CSS &#8211; Beginner&#8217;s Guide","datePublished":"2012-06-25T13:01:33+00:00","dateModified":"2025-04-03T17:09:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/"},"wordCount":563,"commentCount":28,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.jpg","keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-marquee\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/","url":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/","name":"Marquee in CSS - Beginner's Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.jpg","datePublished":"2012-06-25T13:01:33+00:00","dateModified":"2025-04-03T17:09:47+00:00","description":"Marquee was first introduced in Internet Explorer and was very popular in the '90s before W3C ultimately decided to exclude it from the HTML standard","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-marquee\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/marquee-in-css\/marquee-scroll.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-marquee\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Marquee in CSS &#8211; Beginner&#8217;s Guide"}]},{"@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-3F0","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14074","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=14074"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14074\/revisions"}],"predecessor-version":[{"id":73526,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14074\/revisions\/73526"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14074"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}