Look at the source of many modern websites and you’ll see something like this:
<body class="home page-template page-template-page-templates page-template-front-page page-template-page-templatesfront-page-php page page-id-13 template-front">
<div id="container">
<header id="masthead" class="cf" role="banner">
<nav id="header-top-nav">
<ul id="menu-footer-social" class="menu"><li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40"><a href="https://facebook.com/everydaymtb">Facebook</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41"><a href="https://twitter.com/everydaymtb">Twitter</a></li>
<li id="menu-item-186" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-186"><a href="https://www.instagram.com/everydaymtb/">Instagram</a></li>
<li id="menu-item-462" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-462"><a href="https://www.youtube.com/everydaymtb">YouTube</a></li>
</ul>
</nav>
A sea of DIVS, mixed with other tags mixed with IDs mixed with classes mixed with inline HTML parameters. Not very readable. Most content is pretty hard to decipher what exactly it is. For every project you look at you need to remember a different set of class names, what ids do what other parameters do etc. When I rebuilt this site I decided to do things a little differently.
Classes and ids are needed for big projects with lots of UI elements, user interaction and Javascript. However this site is none of those things. So, inspired by new.css I decided to write this entire site in plain HTML.
Now right click and view the source… for real! No classes, no ids, just HTML elements. Here’s an example if you don’t want to right click:
<body>
<header>
<a href="https://mattstenson.com/">
<h1>Matt Stenson</h1>
</a>
<p style="font-size:small">This is the personal site of Matt Stenson. I'm a programmer, nerd, mountain biker, dirt biker and outdoors enthusiest. I'll blog about different stuff here. I like open software and privacy focused tools.</p>
<nav>
<ul>
<li><a href="/photos/">Photos</a></li>
<li><a href="/posts/">Posts</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>A Modern, Retro Blog Workflow</h1>
<time>Jun 03, 2020</time>
<p>I recently experimented with moving this blog from WordPress to a simpler system in Tumblr. However, this setup never felt great and
It’s just plain HTML. Also, if you check out the network console, you’ll find a single CSS file loaded, styles.css. I’ve got news for you, this isn’t compiled or built from something else, it’s literally a file that sits on my computer. The basis for this file is new.css, which proved a great starting point for writing in pure HTML.
Now admittedly this is not a very complicated layout. But, it doesn’t need to be. Plus, HTML defines more tags for things than I thought. Did you know that <header>, <footer>, <nav>, <article>,<time>, <summary> and <details> are all valid HTML elements?
Most things needed for a very basic site like a blog are right there in the HTML spec.
So we’ll see how long in the development of this site template that I can keep this up. So far, all of my needs could be addressed by targeting tags or hierarchies of tags in my css. It almost feels like cheating!
P.S.
A funny side effect of this is that this site looks pretty nice in LYNX.
Leave a Reply