https://github.com/scriptex/no-html
A minimalistic responsive website using only one HTML tag and a handful of CSS
https://github.com/scriptex/no-html
blank-page html
Last synced: 5 months ago
JSON representation
A minimalistic responsive website using only one HTML tag and a handful of CSS
- Host: GitHub
- URL: https://github.com/scriptex/no-html
- Owner: scriptex
- Created: 2018-10-26T13:28:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-09-08T12:43:22.000Z (over 3 years ago)
- Last Synced: 2025-03-14T06:12:31.115Z (10 months ago)
- Topics: blank-page, html
- Language: HTML
- Homepage: https://no-html.atanas.info
- Size: 13.7 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# NO HTML [](https://github.com/scriptex/no-html/)
A minimalistic responsive website using only one HTML tag and a handful of CSS
## Why?
The idea was to show how a website can be built without using any HTML (well only one tag, but it's a `` anyway).
Browsers are such nice fellows that they will add the missing markup for you.
If you provide a blank HTML page, the browsers will add the `html`, `head` and `body` tags for you.
So, if you only add style to the blank page, you have a working website with no markup.
## Example
The markup can be seen in the [index.html](https://github.com/scriptex/no-html/blob/master/index.html) page.
The result can be seen [here](https://scriptex.js.org/no-html/).
## Bonus
The idea grew into something different.
Some friends tried to prove that current SEO, reliability, compatibility, etc. tools are not reliable at all.
Let's take for example Google's Page Speed Insights:
You can see the result of the speed audit [here](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fscriptex.js.org%2Fno-html%2F&tab=mobile)
The audit says:
> For best performance, reduce the amount of HTML needed to render above-the-fold content.
Okay, I know that it's automated and it says this for each website, but it's hilarious, don't you think?
Another funny part is the output of the Lighthouse tool, which is built into Google's Chrome web browser (can be found under Audit tab in developer tools).
## LICENSE
MIT
---
<div align="center">
Connect with me:
</div>
<br />
<div align="center">
<a href="https://atanas.info">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" height="20" alt="">
</a>
<a href="mailto:hi@atanas.info">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" height="20" alt="">
</a>
<a href="https://www.linkedin.com/in/scriptex/">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" height="20" alt="">
</a>
<a href="https://github.com/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" height="20" alt="">
</a>
<a href="https://gitlab.com/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" height="20" alt="">
</a>
<a href="https://twitter.com/scriptexbg">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg" height="20" alt="">
</a>
<a href="https://www.npmjs.com/~scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" height="20" alt="">
</a>
<a href="https://www.youtube.com/user/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" height="20" alt="">
</a>
<a href="https://stackoverflow.com/users/4140082/atanas-atanasov">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" height="20" alt="">
</a>
<a href="https://codepen.io/scriptex/">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" width="20" alt="">
</a>
<a href="https://profile.codersrank.io/user/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" height="20" alt="">
</a>
<a href="https://linktr.ee/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" height="20" alt="">
</a>
</div>
---
<div align="center">
Support and sponsor my work:
<br />
<br />
<a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet">
<img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
</a>
<a href="https://paypal.me/scriptex" title="Donate on Paypal">
<img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
</a>
<a href="https://revolut.me/scriptex" title="Donate on Revolut">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
</a>
<a href="https://patreon.com/atanas" title="Become a Patron">
<img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
</a>
<a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee">
<img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
</a>
<a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay">
<img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" title="Donate Bitcoin">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" title="Donate Etherium">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" title="Donate Shiba Inu">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />
</a>
</div>