Exercises in Semantic HTML

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 in 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

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.