{"id":17337,"date":"2013-06-06T21:01:09","date_gmt":"2013-06-06T13:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17337"},"modified":"2025-04-04T01:33:53","modified_gmt":"2025-04-03T17:33:53","slug":"web-content-with-markdown","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/","title":{"rendered":"A Guide to Writing Web Content Using Markdown"},"content":{"rendered":"

If you\u2019re not an HTML expert<\/a>, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling between your code editor and browser to preview the output.<\/p>\n

For those who write online content regularly, using Markdown<\/strong> is a more convenient option. Markdown enables you to draft your articles in plain text<\/strong>, which can later be converted into valid HTML. Plus, with the right tools, you can see the rendered output instantly.<\/p>\n

Interestingly, Markdown is becoming the go-to format for new publishing platforms like Ghost<\/a>, AnchorCMS<\/a>, and ScriptoGram<\/a>. These platforms prefer Markdown because it keeps their interface clean and free from bulky WYSIWYG<\/strong> JavaScript libraries.<\/p>\n

In this article, we\u2019ll guide you through the Markdown format and introduce you to some tools that make writing in Markdown a breeze. Let\u2019s dive in.<\/p>\n

Quick Guide to Markdown Syntax<\/h2>\n

Markdown uses a variety of notations to structure your content. Let\u2019s explore some of these.<\/p>\n

Creating Paragraphs<\/h3>\n

Creating a paragraph in Markdown is straightforward. Simply write your text and press Enter to start a new paragraph. For example:<\/p>\n

\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n \r\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\r\n<\/pre>\n
This will be converted into:<\/p>\n
\r\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\r\n \r\n <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\r\n<\/pre>\n
Formatting Text: Bold and Italic<\/h3>\n
You can use asterisks to format text as either bold or italic. Specifically, a single asterisk is used for italic<\/em>, and double asterisks are used for bold<\/strong>.<\/p>\n
\r\n *Lorem ipsum*\r\n **Lorem ipsum**\r\n<\/pre>\n
The above example will be rendered as:<\/p>\n
\r\n <em>Lorem ipsum<\/em>\r\n <strong>Lorem ipsum<\/strong>\r\n<\/pre>\n
If you wish to make the text both bold and italic, you can wrap it with three asterisks, like this:<\/p>\n
\r\n ***Lorem ipsum***\r\n<\/pre>\n
Creating Headings<\/h3>\n
In Markdown, you can create headings using hash tags. A single hash tag represents a level 1 heading, two hash tags for a level 2 heading, and so on.<\/p>\n
\r\n #Heading 1\r\n ##Heading 2\r\n ###Heading 3\r\n ####Heading 4\r\n #####Heading 5\r\n ######Heading 6\r\n<\/pre>\n
This will be converted into the following HTML tags:<\/p>\n
\r\n <h1>Heading 1<\/h1>\r\n <h2>Heading 2<\/h2>\r\n <h3>Heading 3<\/h3>\r\n <h4>Heading 4<\/h4>\r\n <h5>Heading 5<\/h5>\r\n <h6>Heading 6<\/h6>\r\n<\/pre>\n
Creating Lists: Ordered and Unordered<\/h3>\n
For unordered lists in Markdown, you can start each line with either an asterisk or a dash.<\/p>\n
\r\n - this is a list item\r\n - this is another list item\r\n - this is yet another list item\r\n<\/pre>\n
For ordered lists, you can start each line with a number, like so:<\/p>\n
\r\n 1. this is list item 1\r\n 2. this is list item 2\r\n 3. this is list item 3\r\n 4. this is list item 4\r\n 5. this is list item 5\r\n<\/pre>\n
You can also create nested lists by simply using spaces to indent the items.<\/p>\n
\r\n 1. Hello\r\n  1.1 Nested Hello\r\n 2. Hello\r\n  2.1 Nested Hello\r\n 3. Hello\r\n<\/pre>\n
In HTML, these list types will be translated into <ul><\/code> for unordered lists and <ol><\/code> for ordered lists.<\/p>\n
Creating Horizontal Lines<\/h3>\n
In Markdown, you can create horizontal lines, equivalent to the HTML <hr><\/code> tag, by using dashes or equal signs. Here\u2019s an example:<\/p>\n
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat.\r\n \r\n --------------------------------\r\n \r\n Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n \r\n ================================\r\n<\/pre>\n
The output will resemble the following:<\/p>\n
\"Markdown<\/figure>\n
Creating Blockquotes<\/h3>\n
To create a blockquote in Markdown, start each line with a ><\/code> sign, as shown below:<\/p>\n
\r\n > Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n > cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n > proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n<\/pre>\n
This will be wrapped in an HTML <blockquote><\/code> element.<\/p>\n
Creating Links<\/h3>\n
To create a clickable text link in Markdown, wrap the text in square brackets and the URL in parentheses, like this:<\/p>\n
\r\n [Hongkiat.com](https:\/\/www.hongkiat.com\/blog\/)\r\n<\/pre>\n
Adding Images<\/h3>\n
Inserting an image in Markdown is similar to creating a text link. Start with an exclamation mark, followed by the image\u2019s alt text in square brackets and the image URL in parentheses. Here\u2019s how:<\/p>\n
\r\n ![image](http:\/\/imageurl.jpg)\r\n<\/pre>\n
You can also include a title for the image as follows:<\/p>\n
\r\n ![image](http:\/\/imageurl.jpg \"Image Title\")\r\n<\/pre>\n
Markdown Limitations<\/h2>\n
It\u2019s important to note that Markdown\u2019s formatting syntax is designed to address issues that can be conveyed in plain text<\/strong>. As such, it doesn\u2019t support some HTML tags like table<\/code>, pre<\/code>, and div<\/code>.<\/p>\n
Top Markdown Editors<\/h2>\n
Here are some Markdown editors that make writing in this format a breeze:<\/p>\n
Mou<\/a><\/h3>\n
\"Mou<\/figure>\n
Dillinger<\/a><\/h3>\n
\"Dillinger<\/figure>\n
Markable<\/a><\/h3>\n
\"Markable<\/figure>\n
Markdown Pad<\/a><\/h3>\n
\"Markdown<\/figure>\n
TextDown<\/a><\/h3>\n
\"TextDown<\/figure>","protected":false},"excerpt":{"rendered":"
If you\u2019re not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling between your code editor and browser to preview the output. For those who write online content regularly, using Markdown is a more convenient option. Markdown enables you to draft your articles in…<\/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":[3029,4593],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nA Guide to Writing Web Content Using Markdown - Hongkiat<\/title>\n<meta name=\"description\" content=\"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling\" \/>\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\/web-content-with-markdown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to Writing Web Content Using Markdown\" \/>\n<meta property=\"og:description\" content=\"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/\" \/>\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=\"2013-06-06T13:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:33:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.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\\\/web-content-with-markdown\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Guide to Writing Web Content Using Markdown\",\"datePublished\":\"2013-06-06T13:01:09+00:00\",\"dateModified\":\"2025-04-03T17:33:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/\"},\"wordCount\":533,\"commentCount\":25,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-content-with-markdown\\\/md-line.jpg\",\"keywords\":[\"Code Editors\",\"Writing Tips and Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/\",\"name\":\"A Guide to Writing Web Content Using Markdown - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-content-with-markdown\\\/md-line.jpg\",\"datePublished\":\"2013-06-06T13:01:09+00:00\",\"dateModified\":\"2025-04-03T17:33:53+00:00\",\"description\":\"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-content-with-markdown\\\/md-line.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-content-with-markdown\\\/md-line.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-content-with-markdown\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to Writing Web Content Using Markdown\"}]},{\"@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":"A Guide to Writing Web Content Using Markdown - Hongkiat","description":"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling","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\/web-content-with-markdown\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to Writing Web Content Using Markdown","og_description":"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling","og_url":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-06T13:01:09+00:00","article_modified_time":"2025-04-03T17:33:53+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.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\/web-content-with-markdown\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Guide to Writing Web Content Using Markdown","datePublished":"2013-06-06T13:01:09+00:00","dateModified":"2025-04-03T17:33:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/"},"wordCount":533,"commentCount":25,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.jpg","keywords":["Code Editors","Writing Tips and Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/","url":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/","name":"A Guide to Writing Web Content Using Markdown - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.jpg","datePublished":"2013-06-06T13:01:09+00:00","dateModified":"2025-04-03T17:33:53+00:00","description":"If you're not an HTML expert, crafting articles directly in HTML can be cumbersome. It requires meticulous tagging for formatting and constant toggling","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-content-with-markdown\/md-line.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to Writing Web Content Using Markdown"}]},{"@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-4vD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17337","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=17337"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17337\/revisions"}],"predecessor-version":[{"id":73603,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17337\/revisions\/73603"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17337"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}