Redesign: Article Content

I now have a main element to contain the primary content of the site. As I write this, here's the generalized code.

<main id="main-content">
  <section class="main">
    -- article content --
  </section>

  <aside>
    <div class="byline">--content--</div>
    <section class="lists">
      <h4>Categories</h4>
      <ul>
        <li><a href="">--category 1--</a></li>
        <li><a href="">--category 2--</a></li>
      </ul>
    </section>
  </aside>
</main>

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.

<main id="main-content">
  -- article content --

  <aside>
    <p>--content--</p>
    <section>
      <header>Categories</header>
      <ul>
        <li><a href="">--category 1--</a></li>
        <li><a href="">--category 2--</a></li>
      </ul>
    </section>
  </aside>
</main>

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.