Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Originally published atwhitep4nth3r.com

     

HTML is all you need to make a website

I recently wrote aboutHow I massively improved my website performance by using the right tool for the job, and the TL;DR is that being mindful and purposeful about using less JavaScript, CSS, third-party scripts and whatever else we build websites with these days — dramatically increases site performance, accessibility and the end-user experience.

This got me thinking about agreat post by Cassidy Williams about adding less.

Your websites start fast until you add too much to make them slow. Do you need any framework at all? Could you do what you want natively in the browser?

Websites are natively fast. And at the heart of every website is pure, unassuming, unadulterated HTML. At the dawn of Web 1.0, there was only HTML.The first websiteever is still online, and yes — it's just HTML. It's fast and it just works™.

On a quiet Sunday afternoon I threw out a tweet in support of this. In a world full of JavaScript frameworks, SPAs, cutting-edge CSS animations, powerful devices and fast internet connections, I wanted to celebrate the perfect validity of HTML-only websites and see what people were building.

HTML-only showcase

After kicking off the showcase withthis iconic website (don't click if you're uncomfortable with profanity!), I received some great submissions. It was wonderful to see that there are plenty of developers out there who are unashamedly building HTML-only websites.

Alan Smith had fun with creating pixelart using HTML tables and a few deprecated HTML tags onhttps://pixel-art.alanwsmith.com/.

A screenshot of pixel-art.alanwsmith.com showing a pixel version of the man with the apple on his face.

Taylor Hunt shared a very cleverHTML-only math quiz built by his friend Michael Bryant.

A screenshot of a plain HTML only quiz, asking the question what is 9 divided by 3.

Alex Riviere showed us what's possible using HTML table attributes to "fake" CSS onhttps://html-only.netlify.app/. I love that Alex calls out that "Pretty HTML only pages are difficult to make well, and accessible. But here we are. I'm trying my best."

A screenshot of Alex's website, showing three tables with the headlines

Design engineerLochie Axon sharedtheir website with us. "My website has been html only for years now, excluding one very important element."

A screenshot of Lochie's website, showing their name, job title and some simple internet-blue links. The bonus element is a green sentence

Dom shareda popular blog site in Germany — and it comes complete with an RSS feed!

A screenshot of blog.fefe.de showing plain text and internet blue links, beautifully laid out.

Stephanie Eckles showcasesnojson.dev — a site "lovingly crafted with NoJSON HTML".Read the full story here (it's a good read!).

A screenshot of nojson.dev. It reads: In a move considered revolutionary by many... This site has been delivered straight to your device with pure, unadulterated HTML. Our exclusive method is called NoJSON and is able to deliver just HTML over the wire. They said it couldn't be done! - Internet People

And finally,Adrian baked usa delicious HTML cake he made using a delicious HTML table.

HTML-only is controversial, apparently

Amidst the fun showcase of HTML-only websites, as with anything on the internet, there was of course, some controversy.

HTML is all you need to build a website!

Some people asked, "Why?" I say,"Why not?"

Some people claimed that websites without CSS and JavaScript are "bland".Who cares? If your content is readable and accessible without the noisy bells and whistles of loading animations and a fancy-pants design, then ship it.

Someone else said HTML-only websites are "ugly as hell." I disagree. They'rebeautiful.

Why all this backlash against HTML-only websites? It is, after all, the fundamental tool of the web — our history. In the web ecosystem of the 2020s, developers are inundated with shiny things. Build tools, JavaScript frameworks, CSS frameworks, and more. These are all fun toys to play with — and a lot of them do a great job —but at what cost? Do we run the risk of losing our roots and where it all started? Or do we view HTML-only websites as being too easy? Too simple?Not impressive enough?

I'm not sure. But what I am sure about, is that websites don't need to be complicated to be effective. Add less. Ship less. Worry about less. And remember — HTML is where it all started.And it's all you ever need to get started.

Do you need complicated and impressive code in your portfolio?

Top comments(18)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
curiousdev profile image
CuriousDev
  • Location
    Germany
  • Joined

This is well written and I enjoyed it, but somehow loses the focus on the core part: That there are requirements, that could be implemented by only using HTML and/or CSS or at least be limited to the necessary technologies. Then suddenly examples are provided showing in an enjoyable way, what you could do with HTML, but if you want to be serious and need to convince a customer with your results, of course you will use what is needed to design a nice website. If it needs a lot of JavaScript, then you would add it. Anyway the more your Website actually is a Web App, the more you will need to do some programming, which cannot be done only with HTML.
But I like how your article reminds people of the importance of understanding the main parts of any website, beginning with HTML, most likely with some CSS and in case of need the code which could be extended by Frameworks etc., when it is acceptable.

CollapseExpand
 
whitep4nth3r profile image
Salma Alam-Naylor
I write code for your entertainment.
  • Location
    Manchester, UK
  • Pronouns
    she/her
  • Work
    Head of Developer Education at nordcraft.com
  • Joined

But I like how your article reminds people of the importance of understanding the main parts of any website, beginning with HTML, most likely with some CSS and in case of need the code which could be extended by Frameworks etc., when it is acceptable.

Thank you!

CollapseExpand
 
elijahtrillionz profile image
Elijah Trillionz
Web developer ☆ Technical Writer @logrocket, http://dev.to and @hashnode ☆ 💖 CSS && JS ☆ open-source enthusiast | hacking @json_db ☆ 🌐 http://elijahtrillionz

Nice piece.
I totally agree with you on this for building websites, but I can't say the same for web apps.

Also I don't think I'd agree with this

Someone else said HTML-only websites are "ugly as hell." I disagree. They're beautiful.

Because honestly I don't think an HTML only website is beautiful in most people's eyes, it can appear well structured, but not beautiful.

But again they say "beauty is in the eyes of the beholder ", if you and your clients find it beautiful, then it is what it is.

CollapseExpand
 
elizadora00 profile image
elizadora00
Developer
  • Joined
• Edited on• Edited

I'ts an amazing article and good to share. Very helpful for creating a html website. Many important things are considered for developing a good and interactive website. This might be help me for implementing many good functionalities intoWheels & Tires. Thanks for sharing.

CollapseExpand
 
waylonwalker profile image
Waylon Walker
👋 Hey there, I am Waylon WalkerI am a Husband, Father of two beautiful children, Senior Python Developer currently working in the Data Engineering platform space. I am a continuous learner, and sha
  • Location
    Peoria, Illinois
  • Work
    Python Dev
  • Joined
• Edited on• Edited

markata.dev/ is html only out of the box and I argue its beautiful.

markata.dev is beautifully grey and with white and purple text

CollapseExpand
 
grahamthedev profile image
GrahamTheDev
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
  • Location
    United Kingdown
  • Work
    Head of Accessibility - SFG20
  • Joined

That uses CSS 😜

CollapseExpand
 
waylonwalker profile image
Waylon Walker
👋 Hey there, I am Waylon WalkerI am a Husband, Father of two beautiful children, Senior Python Developer currently working in the Data Engineering platform space. I am a continuous learner, and sha
  • Location
    Peoria, Illinois
  • Work
    Python Dev
  • Joined

It fits@peerreyndersdescription down below. It's one network request for one document.... plus an oversized favicon thats significantly larger than the rest of the page.

only html in the network tab

Thread Thread
 
grahamthedev profile image
GrahamTheDev
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
  • Location
    United Kingdown
  • Work
    Head of Accessibility - SFG20
  • Joined

Ah I missed that, not sure how 🤦, in that case if you don’t mind excessive profanity / swearing I have a follow up for “motherf**kingwebsite” I built you might enjoy:

ultimatemotherf**kingwebsite.com

Thread Thread
 
waylonwalker profile image
Waylon Walker
👋 Hey there, I am Waylon WalkerI am a Husband, Father of two beautiful children, Senior Python Developer currently working in the Data Engineering platform space. I am a continuous learner, and sha
  • Location
    Peoria, Illinois
  • Work
    Python Dev
  • Joined
• Edited on• Edited

Love that series of sites, your implementation is superb, possibly my favorite one. I'll have to look closer at some point to see if I have made any of these mistakes. satire aside I have taken a lot of inspiration from these to build mypersonal site (not the home page with it's bloated video at a whopping 4.7kb raw, but the rest of the site.), as well asmarkata.dev.

Thread Thread
 
grahamthedev profile image
GrahamTheDev
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
  • Location
    United Kingdown
  • Work
    Head of Accessibility - SFG20
  • Joined

Love both sites, sometimes simplicity is better as the information should be the star!

CollapseExpand
 
svgatorapp profile image
SVGator
SVGator is a #nocode online tool designed to simplify the way you animate scalable vector graphics (SVG).

Now this is something you don't see every day :) Brilliant!

CollapseExpand
 
grahamthedev profile image
GrahamTheDev
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
  • Location
    United Kingdown
  • Work
    Head of Accessibility - SFG20
  • Joined
• Edited on• Edited
CollapseExpand
 
whitep4nth3r profile image
Salma Alam-Naylor
I write code for your entertainment.
  • Location
    Manchester, UK
  • Pronouns
    she/her
  • Work
    Head of Developer Education at nordcraft.com
  • Joined

Clever :D

CollapseExpand
 
waylonwalker profile image
Waylon Walker
👋 Hey there, I am Waylon WalkerI am a Husband, Father of two beautiful children, Senior Python Developer currently working in the Data Engineering platform space. I am a continuous learner, and sha
  • Location
    Peoria, Illinois
  • Work
    Python Dev
  • Joined

Adding css vs inlining css feels a bit of a moot point, same effect, but potentially less network traffic if you reuse the same sheet on multiple pages. right?

CollapseExpand
 
peerreynders profile image
peerreynders
  • Joined
• Edited on• Edited

The target is to produce a page that isn't larger (give or take) than 14Kb (10 TCP packets worth, typically themaximum a server will send on the first round-trip on a new connection). And the inline CSS is typically for the above-the-fold content. Hypothetically that should improveFirst Contentful Paint (FCP) for the page.

CollapseExpand
 
lexis00 profile image
Alexis Simmons
What’s up everyone, I’m learning to code and would love any suggestions or tips! Really excited but a little nervous about this journey.
  • Joined

I’m new to my coding journey and I was told I should not learn HMTL because it is useless. Can you give me more insight?

CollapseExpand
 
whitep4nth3r profile image
Salma Alam-Naylor
I write code for your entertainment.
  • Location
    Manchester, UK
  • Pronouns
    she/her
  • Work
    Head of Developer Education at nordcraft.com
  • Joined

HTML is fundamental to understanding how a browser page works! What else would you start with? Check out freecodecamp.org and the FIRST module is HTML.

CollapseExpand
 
lexis00 profile image
Alexis Simmons
What’s up everyone, I’m learning to code and would love any suggestions or tips! Really excited but a little nervous about this journey.
  • Joined

Thank you!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I write code for your entertainment.
  • Location
    Manchester, UK
  • Pronouns
    she/her
  • Work
    Head of Developer Education at nordcraft.com
  • Joined

More fromSalma Alam-Naylor

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp