{"id":16687,"date":"2020-04-20T21:42:28","date_gmt":"2020-04-20T13:42:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16687"},"modified":"2022-07-15T17:01:36","modified_gmt":"2022-07-15T09:01:36","slug":"html5-section-article-elements","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/","title":{"rendered":"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/html\/\" rel=\"noopener noreferrer\">HTML5<\/a> comes with a bunch of <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-basic-elements\/\" rel=\"noopener noreferrer\">new elements<\/a> with more to be recommended in the future. However, there are some elements that might be a little confusing in their implementation, including the following two new elements: <code>&lt;article&gt;<\/code> and <code>&lt;section&gt;<\/code>.<\/p>\n<p>Some most frequently asked questions I found in the forums are: <strong>In what circumstances should we use these elements?<\/strong> And <strong>similarly, How do we use these elements correctly?<\/strong><\/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\/html-5-semantics\/\" class=\"ref-block__link\" title=\"Read More: A Look Into Proper HTML5 Semantics\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Look Into Proper HTML5 Semantics<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html-5-semantics.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-24930 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/html-5-semantics.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Look Into Proper HTML5 Semantics<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIf you carefully plan the structure of your HTML documents, you can help computers make sense of the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>&lt;section&gt; Element<\/h2>\n<p>This is probably one of the most ambiguous elements. All these years, we have used &lt;div&gt; element for <strong>sectioning<\/strong> in our web structure. So the question arises as how is it different than <code>&lt;div&gt;<\/code> element and when should we use this element apart from <code>&lt;div&gt;<\/code> element.<\/p>\n<p>To demystify it, we need to refer to the official documentation. According to WHATWG documentation, the <code>&lt;section&gt;<\/code> is described as follows:<\/p>\n<p><em>\u201cThe <code>&lt;section&gt;<\/code> element represents a generic section of a document or application. ~ WHATWG\u201d<\/em><\/p>\n<p>From that description we can conclude that the <code>&lt;section&gt;<\/code> element is definitely intended for sectioning, more or less like a <code>&lt;div&gt;<\/code> element. But there is an exception to it. The documentation added some specific extra note that said:<\/p>\n<p><em>\u201cWhen an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead\u2026A general rule is that the section element is appropriate only if the element\u2019s contents would be listed explicitly\u2026 ~ WHATWG\u201d<\/em><\/p>\n<p>At this point, things got lighter, and we can summarize that description in two points:<\/p>\n<ol>\n<li>Although the section element is technically styleable, it is suggested to use <code>&lt;div&gt;<\/code> instead when we are more likely to apply heavy styles or script to the element.<\/li>\n<li>Similar to <code>&lt;li&gt;<\/code> element, the general idea of section element is to <strong>list content<\/strong>.<\/li>\n<\/ol>\n<p>So in real cases, one of the sensible reason to use <code>&lt;section&gt;<\/code> element is to structure list of blog post content, as shown in the following code snippet:<\/p>\n<pre>\r\n&lt;div class=\"blog\"&gt;\r\n\t&lt;section class=\"post\"&gt;\r\n\t\t&lt;h2 class=\"post-title\"&gt;Blog Post Title&lt;\/h2&gt;\r\n\t\t&lt;p class=\"post-excerpt\"&gt;Ice cream tart powder jelly-o. \r\n\t\tGummies chocolate cake ice cream cookie halvah tiramisu jelly-o.&lt;\/p&gt;\r\n\t&lt;\/section&gt;\r\n\t&lt;section class=\"post\"&gt;\r\n\t\t&lt;h2 class=\"post-title\"&gt;Blog Post Title&lt;\/h2&gt;\r\n\t\t&lt;p class=\"post-excerpt\"&gt;Ice cream tart powder jelly-o. \r\n\t\tGummies chocolate cake ice cream cookie halvah tiramisu jelly-o.&lt;\/p&gt;\r\n\t&lt;\/section&gt;\r\n\t&lt;section class=\"post\"&gt;\r\n\t\t&lt;h2 class=\"post-title\"&gt;Blog Post Title&lt;\/h2&gt;\r\n\t\t&lt;p class=\"post-excerpt\"&gt;Ice cream tart powder jelly-o. \r\n\t\tGummies chocolate cake ice cream cookie halvah tiramisu jelly-o.&lt;\/p&gt;\r\n\t&lt;\/section&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>This is just an example; we can use this element for other purposes.<\/p>\n<h2>&lt;article&gt; Element<\/h2>\n<p>The name itself is quite self-explanatory, but let\u2019s see how the official documentation describes it:<\/p>\n<p><em>\u201cA self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.<\/em>\u201c<\/p>\n<p>From the above explanation, we can conclude that <code>&lt;article&gt;<\/code> element is exclusively recommended to be used for <strong>structuring articles<\/strong>, especially the article that we are likely to syndicate, such as a blog post, page content, or forum posts.<\/p>\n<p>The following example shows how we structure a blog post content with <code>&lt;article&gt;<\/code>.<\/p>\n<pre>\r\n&lt;article class=\"post\"&gt;\r\n\t&lt;header&gt;\r\n\t&lt;h1&gt;This is Blog Post Title&lt;\/h1&gt;\r\n\t&lt;div class=\"post-meta\"&gt;\r\n\t\t&lt;ul&gt;\r\n\t\t\t&lt;li class=\"author\"&gt;Author Name&lt;\/li&gt;\r\n\t\t\t&lt;li class=\"categories\"&gt;Save in Categories&lt;\/li&gt;\r\n\t\t&lt;\/ul&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;\/header&gt;\r\n\r\n\t&lt;div class=\"post-content\"&gt;\r\n\t\tSweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. \r\n\t\tBiscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat \r\n\t\tcake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies \r\n\t\thalvah gummies danish biscuit applicake gingerbread jelly-o pastry.\r\n\t&lt;\/div&gt;\r\n\r\n&lt;\/article&gt;\r\n<\/pre>\n<p>Furthermore, the <code>&lt;article&gt;<\/code> element can be used in conjunction with the section element, so the article can be divided into several sections with <code>&lt;section&gt;<\/code> element when the case is reasonable to do so, such as the example below.<\/p>\n<pre>\r\n&lt;article class=\"post\"&gt;\r\n\t&lt;header&gt;\r\n\t&lt;h1&gt;This is Blog Post Title&lt;\/h1&gt;\r\n\t&lt;div class=\"post-meta\"&gt;\r\n\t\t&lt;ul&gt;\r\n\t\t\t&lt;li class=\"author\"&gt;Author Name&lt;\/li&gt;\r\n\t\t\t&lt;li class=\"categories\"&gt;Save in Categories&lt;\/li&gt;\r\n\t\t&lt;\/ul&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;\/header&gt;\r\n\r\n\t&lt;div class=\"post-content\"&gt;\r\n\t\t&lt;section&gt;\r\n\t\t&lt;h2&gt;This is the Sub-Heading&lt;\/h2&gt;\r\n\t\tSweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. \r\n\t\tBiscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake \r\n\t\ttootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah \r\n\t\tgummies danish biscuit applicake gingerbread jelly-o pastry.\r\n\t\t&lt;\/section&gt;\r\n\r\n\t\t&lt;section&gt;\r\n\t\t&lt;h4&gt;This is another Sub-Heading&lt;\/h4&gt;\r\n\t\tTopping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops\r\n\t\ttoffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate\r\n\t\tcake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. \r\n\t\tCheesecake gummi bears drag\u00e9e jujubes drag\u00e9e drag\u00e9e brownie jelly biscuit. Powder croissant jelly beans pastry.\r\n\t\t&lt;\/section&gt;\r\n\t&lt;\/div&gt;\r\n\r\n&lt;\/article&gt;\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>All the new elements in HTML5 are invented to make the web structure more Semantic as how the founder of the World Wide Web and the director of W3C has prevised. There are still being debated among web developers and designers, though, on how to apply these elements more correctly, some say this, others might say differently.<\/p>\n<p>However, don\u2019t get confused with the idea. As I have mentioned above, as long as the case is reasonable to use them and you see that the structure is quite meaningful when you examine it, then go for it. After all, it does not matter in the end.<\/p>","protected":false},"excerpt":{"rendered":"<p>HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in their implementation, including the following two new elements: &lt;article&gt; and &lt;section&gt;. Some most frequently asked questions I found in the forums are: In what circumstances should we&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":[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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML5 and Elements<\/title>\n<meta name=\"description\" content=\"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in\" \/>\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-section-article-elements\/\" \/>\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 &lt;article&gt; and &lt;section&gt; Elements\" \/>\n<meta property=\"og:description\" content=\"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/\" \/>\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=\"2020-04-20T13:42:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T09:01:36+00:00\" \/>\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=\"6 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-section-article-elements\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements\",\"datePublished\":\"2020-04-20T13:42:28+00:00\",\"dateModified\":\"2022-07-15T09:01:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/\"},\"wordCount\":603,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/\",\"name\":\"HTML5 and Elements\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2020-04-20T13:42:28+00:00\",\"dateModified\":\"2022-07-15T09:01:36+00:00\",\"description\":\"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-section-article-elements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements\"}]},{\"@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 and Elements","description":"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in","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-section-article-elements\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements","og_description":"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-04-20T13:42:28+00:00","article_modified_time":"2022-07-15T09:01:36+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements","datePublished":"2020-04-20T13:42:28+00:00","dateModified":"2022-07-15T09:01:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/"},"wordCount":603,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/","name":"HTML5 and Elements","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2020-04-20T13:42:28+00:00","dateModified":"2022-07-15T09:01:36+00:00","description":"HTML5 comes with a bunch of new elements with more to be recommended in the future. However, there are some elements that might be a little confusing in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-section-article-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: HTML5 &lt;article&gt; and &lt;section&gt; Elements"}]},{"@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-4l9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16687","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=16687"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16687\/revisions"}],"predecessor-version":[{"id":49990,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16687\/revisions\/49990"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16687"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}