Skip to content

HTML 4 – Semantic SEO

For this exercise, I’d like you to take the content from this page, and mark it up semantically, and so that it would perform better with the search engines.

Semantics

Add the following tags:

  • <h1>, <h2>, <h3>, <h4> so that there is a sensible outline
  • <header>, <nav> and <footer> for your navigation and authorial information
  • <article>, <section>, <aside>, <figure>, <figcaption>, <time> to describe the content appropriately

SEO

  • Try to include keywords at the beginnings of tags. Add a <title> and <meta> description to the <head>
  • Include an alt tag on the image
  • In your <nav> tag, create a jump menu (or Table of Contents) that links to the sections

CSS

  • Put the entire article in a readable column width
  • Style the jump menu with different colors for the linking style and visited style. Add a hover effect too
  • Anything else you want to do to gussy it up!