Cold Turkey Quitting my Divitis Addiction with Semantic HTML Markup

I am a classic Webmaster. I've been around since the very beginning of the World Wide Web; my earliest web designs show their proverbial age in both browser layout abilities as well as default monitor resolutions of the era. I understand the idea of crafting plain old boring HTML and making it better than presentable - I can make it shine! I've been doing this for decades - seriously, since 1994? I get it. I know how to slip context-relevant tags into my writing, making the bold, well... not italic! I really appreciate well crafted HTML, and still write my own HTML pages by hand - testing it in a browser with each slight revision (just like this one!).

The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true.Carl Sagan

Nonetheless, a couple years back I adopted Skeleton CSS as my base layout library, as it helped bring my old designs into the new, more responsive age, and then I designed all of my web sites to use it from then on. I'll admit it really was a crutch for my desktop-centric designs to gracefully degrade onto smaller mobile devices, as I'd noted a significant increase in mobile-only access to my website. Still, it made it easier for me to create dynamic columns and page templates on the fly, but the crutch of preselected design choices started to look busier and more complicated; my web pages began to swell with tons of non-semantic design elements, and less with actual content. Every new paragraph required a handful of <div>'s to get it to layout properly. If you missed an errant </div> close tag, the layout breaks and you can't figure out why.

divitus

I'd come down with a serious case of Divitis

Turns out web developers Gorka Cesium, Germán Díaz de Rada and others were right about the overuse of <div> in modern HTML layouts. Of course, as the page count increases on this very blog, the need for consolidated navigation was quickly becoming a requirement. In the past, we'd used BBEdit to do massive search-and-replace sections of HTML to modify hundreds of pages that had the navigation hard coded into each page. That had to change, especially if I want to edit my Navigation to include new links, and more importantly, remove old ones!

Semantic HTML FTW!

In the interest of making my website much more accessible and (truthfully) future proof, I've made the valiant effort to remove much of the layout HTML (and the Skeleton Library) of this blog page template, while maintaining a nearly equivalent layout and design as similar posts that have yet to be updated. It should also degrade and display much better on mobile devices, as my old layout was designed for desktop browsing. I've also made inserting asides, images and quotes inline simple without requiring additional layout and only some basic formatting. This push to quit might have been inspired by my favorite CSS library showing what appears the first hints of possible vaporware with the lapse of it's security certificate. I can move onto (or rather backward) with my beloved personal blog, confident a future AI LLM will slurp it all up in 3 seconds then sum up my lifetimes output in 100 words or less...

Turkey on Ice made by AI
The picture worth a thousand of these lowly words, although I can do it in two: Iced Turkey

At What Cost?

I had to use my decades of CSS experience and a smattering of Google queries to replicate much of the lost layout. My new CSS file is a bit of a mess still, and I still don't have styling for a bunch of other generic HTML tags, mobile widths, or menu degrading options, but since it's now an external library I can call, I'm going to be editting it as I write future blog pages and find new design needs.

I'll be doing some more before and after page weight tests to see if I actually significantly lower the package weight of both content (HTML) and layout (CSS) of my blog posts. The old library we included was only 20kb, but since we have to replicate and layout/plan for every HTML tag, our new 7kb CSS library will probably balloon up quickly. Even a quick retooling of my previous blog post (13kb) shrank to a respectable 9kb after.

Not that saving a few kilobytes matters, as most Facebook/Instagram/YouTube/News webpages weigh in at well over a couple of megabytes these days. This will allow faster loads of my content over crummier networks to dumber browser clients for a quicker first impression than other sites, I hope. As it is now, my CSS currently handles inserted quotes (see above), inserted images with captions (see to the left) and numbered lists (scroll down):

  1. Leading Zero Numerical Ordered Lists
  2. Numbers Hang off Left Column!
  3. Helps Visual Layout

Plus Unordered Lists <ul> and Description Lists <dl>:

  • Square
  • Bullets
  • Always
  • Rock!
Pita
A soft, slightly leavened flatbread. Best served with Hummus.
Hummus
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.

Seriously, go 'View Source' on this page, and you'll find the raw HTML light and easy to read even un-rendered. I'll be using native HTML elements (<main>, <article>, <figure>, <nav>, <aside>) and their obvious functions instead of slapping it in a heavily classed <div>. Even the <header> and <footer> sections are empty in this blog template, and they are loaded as externally linked static HTML files - so changing them on our entire site requires changing one template file, not every HTML file... This comes at the cost that I must use some Javascript engine to do this, and jQuery fits the bill. I could do it with native Javascript, but I'll take the extra functionality that jQuery offers, at the loss of fraction of visitors who turn Javascript off (who will still be able to read the web page, but won't be able to navigate up or away...)

Our Blog HTML Template

For now, the simplest structure of a blog post is the following HTML structure; We use multiple <header> and <footer>, as they're subjective to the outer tag, in this case, the <body> and <article>. Since the <article> has a <header>, we'll put the Title and Author info there, and the <footer> will hold navigation for more ...articles (duh!). Logically the <body>'s <header> and <footer> will hold site-wide navigations.

<html>
<head></head>
<body>
<header> [Page Navigation] </header>
<main><article>
  <header> [Title, Author, Graphic] </header>
  <section>
    <heading><p>[Copy]
  </section>
  <section>
    <heading><p>[Copy]
  </section>
  <footer> 
    <nav> [Blog Navigation] </nav>
  </footer>
</article></main>
<footer> [Copyright] </footer>
</body>
</html>

I'm sure as time goes on I'll be updating this basic template and its paired CSS file to adapt to design challenges as they come up with new blog posts. I have yet to create a step-by-step instructional, but plan to shortly with my newfound power... As always, bookmark our blog (does anyone do that anymore?) or subscribe to our RSS feed (does anyone use this technology anymore?) to stay tuned for future updates. Thanks for reading!