Exercises in Semantic HTML

Modern HTML has come a long way

We're pretty lucky these days. HTML has come a long way since the days of <font> tags and <table> layouts.

Decades of pushing the standard along, addressing cross-browser compatibility, and pushing for a better webdev experience has resulted in a richer language. The new semantic elements provided in modern HTML can be used to not only make your markup more meaningful, but also provide additional functionality.

Even so, it's still pretty easy to find yourself drowning a big bowl of <div> soup, especially when it comes to styling.

Having spent most of my software career on the backend doing stuff with data, I'm a complete frontend newbie. Some say that frontend is easier than backend, but whenever I've taken a stab at designing, structuring, or styling a site, I've always found it to be a pretty humbling experience. I'm hopeful that with this site, I can start to get a better handle on all the front end things.

Some things I want to better understand along the way:

Text, from the elements to use, to typography and making text responsive
Designing a website from scratch, making it easy to navigate, fast, and fun to be on
How to make the perfect header for a website
How to make a formatted <code> block

So, let's get started!

Self-Imposed Constraints, aka "Yak-Shaving"

I've decided to make this site with a few constraints:

Use semantic HTML elements to the greatest extent possible
Use modern CSS for styling (no CSS tools)
Use only vanilla JavaScript for interactivity

Why make it this hard for myself? Sure, I could use an SSG tool or a full-fledged framework to make some of the development easier. But I would be depriving myself of a much-needed learning opportunity. I want to understand the fundamentals of web development, and I think that this is the best way to do it.

The web was intended to run on just plain 'ol HTML, CSS, and JavaScript, and I think for the most basic of sites, most tools are overkill. Of course, if I was a professional web developer working on a large, complex app, with multiple team members, I would be the first to reach for ALL the tools in a heartbeat.

Besides, it's just a blog we're talking about, how complicated can it get? 😅

Getting Text on the Page

You can combine the <code> element with the <pre> element to indicate that you want to show some preformatted text.

The main issue with the <pre> element is that most user agent stylesheets by default will preserve the white space within the element and won't wrap the text.

This will make your markup look uneven since you'll have to unindent everything. We end up with something like this:

function Panel(element, canClose, closeHandler) {
                this.element = element;
                this.canClose = canClose;
                this.closeHandler = function () { if (closeHandler) closeHandler() };}

This is obviously a far cry from what most people think of when they consider a code block.