Last week I wrote about creating a page on Quinnipiac’s mywebspace server in my blog Blue Pencil. Today I’m going to tell you how I restructured that page to incorporate the use of semantic HTML.

Never heard of semantic HTML?

If you’d like to get into the weeds, check out my blog Becoming More Accessible with Semantic HTML. If not, here’s a couple of reasons why it’s important.

” … semantic HTML can make your site more accessible and generate more traffic based on higher search engine rankings” (Foster, 2019).

Where I Started

Here’s what my original hand coded HTML page looks like.

To begin the restructuring, I added the following semantic tags:

  • <header>
  • two <nav> sections
  • <article>
  • <footer>

I also added tags for:

  • subheaders <h2> <h3> <h4> <h5> <h6>
  • an unordered list <ul>
  • an ordered list <ol>
  • a strong tag <strong>
  • an emphasis tag <em>

Next I optimized my images using Photoshop’s Save for Web function and ImageOptum. See my blog Optimize if you want to learn how.

Finally, I used the W3 validator to make sure my code was “clean.”

Where I Finished

Here’s the final product. You can use this link to see it in real time.

It’s more organized, has better structure, and is accessible. As a result it will have a faster load time.

As Adam Sandler says in the Hanukkah song, “not too shabby.” I’m sorry — I couldn’t resist 🙂

There’s even a bit of whimsy. Check out the links on the right hand navigation section if you want to read the history of wine, beer and liquor.

More HTML to come next week.

until nxt time …


Foster, H. (2019, July 28). Blue pencil. [Blog post]. Retrieved from:

Foster, H. (2019, July 28). Becoming more accessible with semantic HTML. [Blog post]. Retrieved from:

Foster, H. (2019, August 4). Optimize. [Blog post]. Retrieved from:

Written by

Leave a Reply

Your email address will not be published. Required fields are marked *