{"id":63,"date":"2024-07-13T18:43:22","date_gmt":"2024-07-13T18:43:22","guid":{"rendered":"https:\/\/shaplakanon.com\/wdc\/?p=63"},"modified":"2024-07-13T18:43:23","modified_gmt":"2024-07-13T18:43:23","slug":"tutorial-responsive-web-design-with-html","status":"publish","type":"post","link":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/","title":{"rendered":"Tutorial: Responsive Web Design with HTML"},"content":{"rendered":"\n<p>Responsive Web Design is crucial in the modern web development landscape as it ensures that websites function well on various devices and screen sizes. This tutorial will guide you through the fundamentals of making your website responsive using HTML and CSS.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Introduction to Responsive Web Design<\/strong><\/h4>\n\n\n\n<p>Responsive Web Design (RWD) is a design approach aimed at crafting websites to provide optimal viewing experiences across a wide range of devices. This includes easy reading and navigation with minimal resizing, panning, and scrolling.<\/p>\n\n\n\n<p><strong>Key Concepts:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fluid Grid Layouts:<\/strong> Use of percentage-based widths instead of fixed widths.<\/li>\n\n\n\n<li><strong>Flexible Images:<\/strong> Images that scale within their containing elements.<\/li>\n\n\n\n<li><strong>Media Queries:<\/strong> CSS techniques to apply styles based on the device&#8217;s characteristics, like width, height, and orientation.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Setting the Viewport<\/strong><\/h4>\n\n\n\n<p>The viewport is the user&#8217;s visible area of a web page. You need to set the viewport to ensure your website renders correctly on all devices.<\/p>\n\n\n\n<p>Add the following meta tag inside the <code>&lt;head&gt;<\/code> section of your HTML document:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code><\/pre>\n\n\n\n<p>This tag sets the viewport to match the device&#8217;s width and ensures an initial scale of 1.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Fluid Grid Layouts<\/strong><\/h4>\n\n\n\n<p>Using a fluid grid layout involves using relative units like percentages instead of absolute units like pixels. This makes the layout flexible and adaptable to various screen sizes.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  .container {\n    width: 100%;\n    margin: 0 auto;\n  }\n  .column {\n    float: left;\n    width: 50%; \/* 50% width for each column *\/\n  }\n&lt;\/style&gt;\n\n&lt;div class=\"container\"&gt;\n  &lt;div class=\"column\" style=\"background-color:lightblue;\"&gt;\n    &lt;p&gt;Column 1&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"column\" style=\"background-color:lightgreen;\"&gt;\n    &lt;p&gt;Column 2&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>In this example, two columns are created, each taking up 50% of the container&#8217;s width, making them adjust fluidly with the viewport size.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Flexible Images<\/strong><\/h4>\n\n\n\n<p>Images should scale to fit within their containing elements without exceeding their maximum width.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n&lt;\/style&gt;\n\n&lt;img src=\"example.jpg\" alt=\"Example Image\"&gt;<\/code><\/pre>\n\n\n\n<p>This CSS ensures the image will not be wider than its container and will maintain its aspect ratio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>5. Media Queries<\/strong><\/h4>\n\n\n\n<p>Media queries allow you to apply different styles based on the device&#8217;s characteristics, providing a tailored experience for each device type.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  body {\n    font-family: Arial, sans-serif;\n  }\n  .container {\n    width: 100%;\n    margin: 0 auto;\n  }\n  .column {\n    float: left;\n    width: 100%; \/* Full width for small screens *\/\n  }\n\n  \/* Media Query for devices wider than 600px *\/\n  @media (min-width: 600px) {\n    .column {\n      width: 50%; \/* 50% width for larger screens *\/\n    }\n  }\n&lt;\/style&gt;\n\n&lt;div class=\"container\"&gt;\n  &lt;div class=\"column\" style=\"background-color:lightblue;\"&gt;\n    &lt;p&gt;Column 1&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"column\" style=\"background-color:lightgreen;\"&gt;\n    &lt;p&gt;Column 2&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>In this example, columns are full-width on smaller screens but switch to 50% width on devices wider than 600px.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>6. Practical Example: Responsive Navigation Bar<\/strong><\/h4>\n\n\n\n<p>Let&#8217;s create a responsive navigation bar that adjusts its layout based on screen size.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;style&gt;\n    body {\n      font-family: Arial, sans-serif;\n    }\n    .navbar {\n      overflow: hidden;\n      background-color: #333;\n    }\n    .navbar a {\n      float: left;\n      display: block;\n      color: white;\n      text-align: center;\n      padding: 14px 16px;\n      text-decoration: none;\n    }\n    .navbar a:hover {\n      background-color: #ddd;\n      color: black;\n    }\n\n    \/* Media Query for smaller screens *\/\n    @media (max-width: 600px) {\n      .navbar a {\n        float: none;\n        width: 100%;\n      }\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"navbar\"&gt;\n  &lt;a href=\"#home\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#about\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#services\"&gt;Services&lt;\/a&gt;\n  &lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>This code creates a navigation bar that displays horizontally on larger screens and stacks vertically on smaller screens.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h4>\n\n\n\n<p>Responsive Web Design ensures your website is user-friendly across all devices. By setting the viewport, using fluid grids, making images flexible, and applying media queries, you can create a seamless and adaptive web experience.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Web Design is crucial in the modern web development landscape as it ensures that websites function well on various [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[],"class_list":["post-63","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tutorial: Responsive Web Design with HTML - Web Development Course<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: Responsive Web Design with HTML - Web Development Course\" \/>\n<meta property=\"og:description\" content=\"Responsive Web Design is crucial in the modern web development landscape as it ensures that websites function well on various [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Course\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-13T18:43:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-13T18:43:23+00:00\" \/>\n<meta name=\"author\" content=\"ShaplaKanon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ShaplaKanon\" \/>\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:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/\"},\"author\":{\"name\":\"ShaplaKanon\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"headline\":\"Tutorial: Responsive Web Design with HTML\",\"datePublished\":\"2024-07-13T18:43:22+00:00\",\"dateModified\":\"2024-07-13T18:43:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/\"},\"wordCount\":392,\"commentCount\":0,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/\",\"name\":\"Tutorial: Responsive Web Design with HTML - Web Development Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\"},\"datePublished\":\"2024-07-13T18:43:22+00:00\",\"dateModified\":\"2024-07-13T18:43:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/tutorial-responsive-web-design-with-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: Responsive Web Design with HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\",\"name\":\"Web Development Course\",\"description\":\"Become a Web Developer from Home\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\",\"name\":\"ShaplaKanon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"caption\":\"ShaplaKanon\"},\"sameAs\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"],\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/author\\\/sabahat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: Responsive Web Design with HTML - Web Development Course","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:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial: Responsive Web Design with HTML - Web Development Course","og_description":"Responsive Web Design is crucial in the modern web development landscape as it ensures that websites function well on various [&hellip;]","og_url":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/","og_site_name":"Web Development Course","article_published_time":"2024-07-13T18:43:22+00:00","article_modified_time":"2024-07-13T18:43:23+00:00","author":"ShaplaKanon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ShaplaKanon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/#article","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/"},"author":{"name":"ShaplaKanon","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"headline":"Tutorial: Responsive Web Design with HTML","datePublished":"2024-07-13T18:43:22+00:00","dateModified":"2024-07-13T18:43:23+00:00","mainEntityOfPage":{"@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/"},"wordCount":392,"commentCount":0,"articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/","url":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/","name":"Tutorial: Responsive Web Design with HTML - Web Development Course","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/#website"},"datePublished":"2024-07-13T18:43:22+00:00","dateModified":"2024-07-13T18:43:23+00:00","author":{"@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"breadcrumb":{"@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shaplakanon.com\/wdc\/tutorial-responsive-web-design-with-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shaplakanon.com\/wdc\/"},{"@type":"ListItem","position":2,"name":"Tutorial: Responsive Web Design with HTML"}]},{"@type":"WebSite","@id":"https:\/\/shaplakanon.com\/wdc\/#website","url":"https:\/\/shaplakanon.com\/wdc\/","name":"Web Development Course","description":"Become a Web Developer from Home","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shaplakanon.com\/wdc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825","name":"ShaplaKanon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","caption":"ShaplaKanon"},"sameAs":["https:\/\/shaplakanon.com\/wdc\/"],"url":"https:\/\/shaplakanon.com\/wdc\/author\/sabahat\/"}]}},"_links":{"self":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":1,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/63\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/63\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/categories?post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/tags?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}