I was keeping the main-content class on the main element as a hook for my Skip to main content link at the top of the page, but I'll strip all the other classes out for now.
I doubt I really need to wrap my article content with a section element, so I'll drop that, too. Articles are already wrapped within an article element.
The aside content was a sidebar area and that's what it will continue to be. The byline area is text so I'll make that plain p element right now. The Categories heading was an h4 purely for sizing. Semantically, I think that should maybe be a header instead to leave the h1/h2/h3/etc. tags more relevant to the main content area.
That leaves me with main content area looking more like this.
That feels better, but I may want some tweaking there once I start implementing a design.
Article Content
For the article content itself, the broad building blocks are in a template with CraftCMS but what you're reading comes mainly from me typing into a content editor.
<article>
<header>
<h1>-- title --</h1>
</header>
<p>Start of the actual post</p>
<pre><code>A code block</code></pre>
<h3>A subheading</h3>
<p>More content</p>
<div class="metadata">
<time class="text-sm block pb-4" datetime="2024-01-21">21 Jan 2024</time>
in <a href="">--category 1--</a> <a href="">--category 2--</a>
</div>
</article>
Everything's wrapped in an article element which I'll keep as that's exactly what this content is wrapping.
The title is wrapped in both a header and h1 element. I'm not sure if I really need both, but I'm leaving them.
Running my existing content through an accessibility checker, I got some marks against me because I was using h3 tags for the subheadings when it expected h2 in order for the page hierarchy to not be confusing for screen readers. I'll start using h2's from now on and keep them in proper order. It's another instance of me using elements for styling. Other than that, the majority of the content would be img and p elements.
The metadata div is really an article footer. So if the article can have a header, it can have a footer. I'll update that. The time element has some classes on it that I probably copy/pasted from some example. I'll take those out.
That leaves us with this, which is much cleaner.
<article>
<header>
<h1>-- title --</h1>
</header>
<p>Start of the actual post</p>
<pre><code>A code block</code></pre>
<h2>A subheading</h2>
<p>More content</p>
<footer>
<time datetime="2024-01-21">21 Jan 2024</time>
in <a href="">--category 1--</a> <a href="">--category 2--</a>
</footer>
</article>
I think that wraps up what I feel is much better for the HTML layout and structure of the site. I'm skipping at least the search listing page, but it won't be too much different from the home page, just not displaying as much content.
Next up, I'll need to drop the temporary styling I've been using and go to work on the CSS. Initially it will be around layout before I get into fonts/colors.
After my last post, therealadam posted about some Low-key CSS libraries. These are small CSS libraries which don't do anything much more than style your baseline HTML elements.
Which was perfect for the current state of my site since I stripped my own styles away. I've gone with new.css as it's decently close to what I'm aiming for although I do plan to go with my own custom CSS long-term. This works until I actually start working on that to have something.
That said, let's start with the intent of this post which is the HTML structure of my header and footer sections.
Footer
The footer is really simple. I don't think it needs to change.
A literal line of copy. If anything, I'm just not sure if the copyright should be me personally or Updrift, but I'll check that out later as that doesn't really pertain to the HTML structure.
Header
There's a bit more to the header section. I'll exclude the skip to content link, as that exists outside the header.
There are three different things that are kind of related.
Logo / nav link to the home page
Actual nav links to the main areas of the site
Search form
The logo is technically navigation, so It should be included in the nav block. I'll move that into the unordered list that's a child of that element. As it's a secondary link to the home page, I'll go by the W3C recommendations for functional images and set the alt value to an empty string since it performs the same function as the Home link. I'm leaving the Home link as it's text that can be read by a screen reader.
Speaking of the unordered list (ul), I feel it's appropriate because it literally is a list of nav items. The nav element itself gives me enough of a hook for styling that I shouldn't need any additional classes except for a selected class that goes on the li tag if you're on the About or Contact pages.
The search form is also navigation related in the sense that it will take you to a different page.
That's not a drastic change from what I had. Ironically, having an empty alt tag on the logo is flagged by accessibility checkers, however, I'm doing exactly what W3C recommends so I'll go with W3C for now.
I know there's likely a bit of aria attributes I should add, but I'll defer that to a broader accessibility effort later on.
Next up, I'll look at the main content which, for this site, would be blog post content.
With this post, I'm going to remove the styles from the site completely and focus on the HTML elements and structure alone.
For now, I'll focus on the HTML elements for the overall page alone then dive into the individual parts in future posts.
For posterity, here's what my current site's home page looks like with a bit cut out so we can see the top/bottom of the page.
Removing the styles, I fortunately have something that's still functional and not a complete mess. Things will just be a bit unstyled for a while as I work through things. If I actually have any followers anymore, they likely read my stuff through an RSS feed and the styling doesn't matter anyway.
This isn't really the best. Looking at current HTML documentation, I should probably replace the page section with a main element, and the sidebar section with an aside element that exists within the main element.
Additionally, as stated in the main element's HTML documentation, adding an id to it allows it to be a target for a skip navigation link. I want that, so I'll go ahead and add it along with the skip link at the top of the document.
I'm not sure if I'll need the class for the footer element. So I'll drop that for now and add it if needed later.
Resulting Page Structure
This leaves us with a much more modern html structure.
