Skip to main content

Redesign: HTML structure

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.

Old design

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.

Here's what that looks like.

Current Page Structure

Here's the general structure of the page itself.

<body>
  <header>
    -- header content--
  </header>
  <section class="page">
    -- page content --
    <section class="sidebar">
      -- sidebar content --
    </section>
  </section>
  <footer class="site">
    -- footer content --
  </footer>
</body>

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.

<body>
  <a href="#main-content">Skip to main content</a>
  <header>
    -- header content --
  </header>
  <main>
    -- main content --
    <aside>
      -- sidebar content --
    </aside>
  </main>
  <footer>
    -- footer content --
  </footer>
</body>

Next time, we'll address the header and footer sections.