Skip to main content

Redesign: Header and Footer

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.

<footer>
  <p>
    Copyright © Updrift, all rights reserved.
    Powered by <a href="//www.craftcms.com">Craft CMS</a>.
  </p>
</footer>

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.

<header>
  <div class="logo">
   <a href="/"><img src="/assets/general/updrift-logo.svg" alt="Updrift logo" height="25" /></a>
  </div>
  <nav>
    <ul>
      <li class="selected"><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
      <li class="search">
        <form action="https://updrift.com/search/results">
          <input type="search" name="q" aria-label="search" placeholder="search">
          <button type="submit">Go</button>
        </form>
      </li>
    </ul>
  </nav>
</header>

There are three different things that are kind of related.

  1. Logo / nav link to the home page
  2. Actual nav links to the main areas of the site
  3. 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.

This leaves me with the following structure.

<header>
  <nav>
    <ul>
      <li><a href="/"><img src="/assets/general/updrift-logo.svg" alt="" height="25" /></a></li>
      <li class="selected"><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
      <li class="search">
        <form action="https://updrift.com/search/results">
          <input type="search" name="q" aria-label="search" placeholder="search">
          <button type="submit">Go</button>
        </form>
      </li>
    </ul>
  </nav>
</header>

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.