Using HTML And CSS Properly — Part 2 of 3 — Example Site Markup

Cut them apart!

In the first article of this series I outlined the history, reasoninng, and logic behind HTML that it seems most people never seem to grasp. This time around I want to from scratch code a simple “personal website” homepage to show the “you don’t need classes on everything” semantic markup approach.

Note that when I talk about “DIV for nothing” or “classes for nothing” I am not saying you don’t need classes or DIV! What I’m saying is don’t use so blasted many of them.

Again not to go back to the gormless inanity that are frameworks, but when I see code like this:

  <footer class="mt-32 flex-none">
      <div class="sm:px-8">
        <div class="mx-auto w-full max-w-7xl lg:px-8">
          <div class="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
            <div class="relative px-4 sm:px-8 lg:px-12">
              <div class="mx-auto max-w-2xl lg:max-w-5xl">
                <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
                  <div class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                    <a class="transition hover:text-teal-500 dark:hover:text-teal-400" href="/about">About</a>
                    <a class="transition hover:text-teal-500 dark:hover:text-teal-400"…