Project Feedback - Tribute Page Alfred the Great

I’ve not put in the details concerning text but I feel like I’ve got to share this as I had a bit of a break over the Christmas period and I want to just get straight on with this.

I’m looking for critique on the design, how I’ve structured my HTML and CSS and how I could be closer to a best practice with my work.

1 Like

Really really like the display mechanism, the parallax is great! Very clean, very easy to use, and I like the fact that, when I click on the links in your header, I don’t blow right by the section title. All too often, the header menu overlays the section title. Kudos.

Now for the constructive criticism. I like the layout, yes, but from an HTML perspective your page looks just like those I might have designed in 1998. It works, and you can do a lot with it, but the tags, man. sigh.

There are two different schools of HTML design:

  • layout-based. The layout is established first, and the content is fit to that. Often this can be identified by use of div tags with classes or ids all over the place, and styling them accordingly.
  • content-based. HTML5 gave us a number of semantic tags: <main>, <article>, <section>, <header>, <footer>, or <aside>, to name a few. The content itself is stating its purpose.

So, for example, your header could be contained in a <header> tag, rather than a <div>. They are both block-level elements, they both can take classes or ids, they function exactly the same. But from a pure HTML perspective, the content becomes meaningful.

In the same way, the content about Alexander the great would fit nicely in an <article> tag, and each section (or pane of data) a <section>. Doing this, the content itself says what its purpose is.

An easy way to look at this might be something like:

<header>
  <h1>...</h1>
  <nav id="nav-list">
    <ul>
      <li>...</li>
      ...
    </ul>
  </nav>
<header>
<article>
  <section id="img-div">
    <figure>
      <img .../>
      <figcaption>lorem ipsum caption text</figcaption>
    </figure>
  </section>
  <section id="early-life">
  ...
  </section>
  <section id="reforms">
  ...
  </section>
  <section id="legacy">
  ...
  </section>
</article>
<footer>
  <a ...>Learn more about...</a> | Page design by <a ...>me</a>
</footer>
  

I can still use div tags, if they are appropriate, but the content shown above makes each part of the page not only tell you about itself, but its relationship to the rest of the page.

Not saying you must, but as you move forward and become more sophisticated with your design skillz, you may find that a knowledge of the semantic web is what separates you from the rest of the pack.

Thank you so much for your advice!

I thought my HTML looked a little bit funny but its good to hear what I need to work on. Hopefully my next project will show a bit of development on the semantic side.