Semantic Restructuring

A while ago, a friend introduced me to Simple CSS, a CSS file (not framework), that focused on the use of semantic markup in styling a web page. After "pressure and feedback from the community", the creator added classes to Simple CSS, two of them.

The point I'm trying to make here, is that there is actually a lot of semantic HTML. Just take a look at the Simple CSS demo to see for yourself. The details element blew my mind a little, it is the perfect example of something that I would typically have just started coding some CSS styling rules and a JavaScript class toggle for - I honestly had no idea that HTML did that on it's own!

With online web development courses, you're taught that semantic HTML is important. You are taught h1 through to h6, as well as div, article, and section, and then you are taught the div-tastic Bootstrap CSS framework. Semantics is an honourable mention, where the concept is explained, but it's depth is not even hinted at.

I can understand why this is; a web developer course aims to teach a learner the relevant technologies of the day, because that's what most people are using. It's what someone hiring will likely expect you to know. But semantic HTML does a lot on it's own, and paired with something like Simple CSS, it can make the job of building a web page quicker - I would even argue much quicker than Bootstrap could.

And so, I tried to make my main website conform to semantic HTML, to avoid unnecessary JavaScript and to simplify and speed up styling, as well as making the overall website less complicated and lighter in kilobytes. Lately, I've been investigating semantics more, and their role in accessibility. I did try to make my website screen reader friendly, but after a bit of study I think I can do a better job of it, and so I've begun a restructure of the HTML across my website.

I will be running through the post pages in Vim and reorganising the document structure to be, hopefully, better. The content won't change, visually it won't look any different. But I will feel good about having done a heap of work that very few people will ever be aware of .. priorities.

Of course, my CMS will be temporarily broken, but I'm confident that I've built it in such a way that accommodating the site's structural changes shouldn't be hard, or time consuming, to implement within the Python program,

In the interest of accessibility, I have also decided to do away with my splash page at index.html, and replace it with what is currently at home.html.

It's a nice homage to an earlier year of the internet, when most websites had a front gate inviting users to visit or enter, but I do wonder if anyone who is not a millennial would even know what to do when presented with this screen!

Instead I've opted to incorporate the h1 into the home page, which will now live at the main site index. I've given it a hero sized block-margin, and left aligned it because is supposed to be the terminal. I've also used the colours in the breadcrumb navigation used in the other pages. I had been using only system fonts previously, but I realised to keep the h1 on one line and with the page margins at all times, I had pick a font so that it remained consistent across browsers and operating systems. I chose JetBrainsMono, which brings with it font ligatures in my pre and code blocks. Oh, and one last change I made to it was the cursor animation is now slower, only flashes twice, and finishes as 'hidden' - this was all to make the header less obnoxious and distracting as it is now sharing screen space with other text and must learn to share the users attention.