{"id":333428,"date":"2021-01-28T12:23:15","date_gmt":"2021-01-28T20:23:15","guid":{"rendered":"https:\/\/css-tricks.com\/?p=333428"},"modified":"2021-01-28T12:23:25","modified_gmt":"2021-01-28T20:23:25","slug":"a-whole-website-in-a-single-html-file","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-whole-website-in-a-single-html-file\/","title":{"rendered":"A Whole Website in a Single HTML File"},"content":{"rendered":"\n<p>I can\u2019t stop thinking about <a href=\"https:\/\/john-doe.neocities.org\/\" rel=\"noopener\">this site<\/a>. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that&#8230; <strong>the whole website is contained within a single HTML file<\/strong>.<\/p>\n\n\n\n<p>What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of  the HTML.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section id=\"home\">\n  &lt;!-- home content goes here -->\n&lt;\/section>\n&lt;section id=\"about\">\n  &lt;!-- about page goes here -->\n&lt;\/section><\/code><\/pre>\n\n\n\n<p>Each <code>&lt;section&gt;<\/code> is hidden with CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section { display: none; }<\/code><\/pre>\n\n\n\n<p>Each link in the main navigation points to an anchor on the page:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a href=\"#home\">Home&lt;\/a>\n&lt;a href=\"#about\">About&lt;\/a><\/code><\/pre>\n\n\n\n<p>And once you click a link, the <code>&lt;section&gt;<\/code> for that particular link is displayed via:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section:target { display: block; }<\/code><\/pre>\n\n\n\n<p>See that <code>:<a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/t\/target\/\">target<\/a><\/code> pseudo selector? That&#8217;s the magic! Sure, it&#8217;s been around for years, but this is a clever way to use it for sure. Most times, it&#8217;s used to highlight the anchor on the page once an anchor link to it has been clicked. That&#8217;s a handy way to help the user know where they&#8217;ve just jumped to.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYRKKxj\" src=\"\/\/codepen.io\/anon\/embed\/LYRKKxj?height=450&amp;theme-id=1&amp;slug-hash=LYRKKxj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYRKKxj\" title=\"CodePen Embed LYRKKxj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Anyway, using <code>:target<\/code> like this is super smart stuff! It ends up looking like just a regular website when you click around:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/01\/target-pseudo-website.mov\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I can\u2019t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that&#8230; the whole website is contained within a single HTML file. What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":333452,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[18890],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/target-pseudo-website.png?fit=2408%2C1620&ssl=1","jetpack-related-posts":[{"id":302462,"url":"https:\/\/css-tricks.com\/creating-an-editable-webpage-with-google-spreadsheets-and-tabletop-js\/","url_meta":{"origin":333428,"position":0},"title":"Creating an Editable Webpage With Google Spreadsheets and Tabletop.js","date":"February 5, 2020","format":false,"excerpt":"Please raise your hand if you\u2019ve ever faced never-ending content revision requests from your clients. It\u2019s not that the changes themselves are difficult, but wouldn't it be less complicated if clients could just make the revisions themselves? That would save everyone valuable time, and \u00a0allow you to turn your attention\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/google-sheets.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":176856,"url":"https:\/\/css-tricks.com\/how-css-selectors-work\/","url_meta":{"origin":333428,"position":1},"title":"Beginner Concepts: How CSS Selectors Work","date":"August 9, 2014","format":false,"excerpt":"Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting. In\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325013,"url":"https:\/\/css-tricks.com\/parsing-markdown-into-an-automated-table-of-contents\/","url_meta":{"origin":333428,"position":2},"title":"Parsing Markdown into an Automated Table of Contents","date":"November 13, 2020","format":false,"excerpt":"A table of contents is a list of links that allows you to quickly jump to specific sections of content on the same page. It benefits long-form content because it shows the user a handy overview of what content there is with a convenient way to get there. This tutorial\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/smooth-scroll-nav.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312635,"url":"https:\/\/css-tricks.com\/on-adding-ids-to-headers\/","url_meta":{"origin":333428,"position":3},"title":"On Adding IDs to Headings","date":"June 11, 2020","format":false,"excerpt":"Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often useful to link directly to a specific section of content. <h3 id=\"step-2\">Step 2<\/a> Should I be so inclined, I could link right\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/hashes-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373081,"url":"https:\/\/css-tricks.com\/the-basics-of-remix\/","url_meta":{"origin":333428,"position":4},"title":"The Basics of Remix","date":"September 13, 2022","format":false,"excerpt":"You\u2019ve probably heard a lot of hype around one of the newest kids on the framework block, Remix. It may be surprising that it got its start back in 2019, but it was originally only available as a subscription-based premium framework. In 2021, the founders raised seed funding and open\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/remix-logo-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350070,"url":"https:\/\/css-tricks.com\/mars-theme-a-deep-look-at-frontitys-headless-wordpress-theme\/","url_meta":{"origin":333428,"position":5},"title":"Mars Theme: A Deep Look at Frontity\u2019s Headless WordPress Theme","date":"September 9, 2021","format":false,"excerpt":"Frontity is a framework for creating de-coupled (or \"headless\") WordPress sites. In this article, we dive into the process of spinning up such a site, with a detailed overview of the building blocks provided by Frontity and its flagship theme, Mars.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/frontity-wordpress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/target-pseudo-website.png?fit=1024%2C689&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333428"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=333428"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333428\/revisions"}],"predecessor-version":[{"id":333587,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/333428\/revisions\/333587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/333452"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=333428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=333428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=333428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}