Blocks

Last chapter, we learned about the first and biggest “structure” in every HTML document: head and body. Now let’s go one step further, to the second largest subdivision you’ll create.

The body of every page can be further divided into blocks. For example, a typical web page has …

A header (at the top, with the menu, logo, etcetera)
The actual content
Perhaps a sidebar
Perhaps some remarks or notes about the content
A footer (at the bottom, with credits, copyright, more links, etcetera)

These are all different “blocks” or “sections” that, together, make up the website.

Thankfully, I’ve already taught you semantics. That means this chapter will be easy to understand, and you already know that it’s important to use the right tag for the right type of block.

Block vs Inline

An HTML element can be block level or inline.

Block level means that it’s supposed to stand on its own. Whenever there’s a big change in structure, use this type.
Inline means that the element stays in line with the text, or the other elements around it. Whenever there’s only a small change in structure, use this type.

For example, a paragraph (<p>) is a block element, while that emphasis tag (<em>) is inline.

Block-level elements

Below is the list of big, semantic block-level elements. The image displays the general skeleton of a webpage, with the code for it in the example below. After that, each element is named and explained in a little more detail.

Main

For the main part of a webpage. There should be only one, and it should be reserved for the “meat” of the webpage. A good metric is to check if the content is unique. If all your pages have the same content inside your <main> tag, it shouldn’t be in the main tag. It’s probably a menu, or a header, or something else.

For the header of a block. (Could be the header of the whole webpage, or the header of a single comment.) Remember that a header, typically, contains details / metadata about the content that follows.

For the footer of a block. Usually contains more details which are important, but not important enough to put before the content.

Article

The name says it all: for an article. One piece of content, preferably text, filled with headings and paragraphs.

There can be multiple of these, of course, if the webpage is a list of articles. Perhaps your homepage has a grid with many links to the most popular articles all over your website.

Section

A slightly more generic tag for a part of the webpage that’s separate from other parts. For example, we often talk of a “comment section” underneath articles. Obviously, you’d use a <section> tag for that.

Aside

Defines a section that contains remarks or side notes. A general rule is: if you can hide the section and it doesn’t ruin the core of the webpage, then they’re probably an <aside>.

Details

Similar to <aside>, but goes even further. It’s meant for a box that’s hidden by default, but can be opened when the user clicks it. (Or a similar mechanic in which information is so unimportant that it’s invisible by default, and the user must consciously search for it.)

Summary

The name says it all: for a summary of other content on the page. Typically meant as the visible portion of a <details> block, which summarizes the hidden details.

Div

Short for “division”. This is by far the most generic tag. It’s used for grouping elements that don’t have a better tag to describe them. It’s especially common in designs that need a lot of styling/interactivity afterwards. The easiest way to target many different elements, is by constantly grouping them inside <div>s.

Otherwise, as you know by now, refrain from using it. Pick a more specific tag, if possible.

Inline Elements

There’s only one generic inline tag. The other inline tags are discussed in the upcoming chapters, as they have very specific use cases. Because “inline” means you flow with the text, these tags aren’t typically used for “grouping” stuff.

Example

Remember the emphasis tag: it’s very specific and should only be applied to small pieces of content. If everything has emphasis, nothing has ;)

Span

The <span> element groups the elements inside, but stays inline. I rarely use it, but there are certainly situations where it’s the best thing you have. Situations where you need to group elements, but their relationship has no clear tag to describe it.

Horizontal Rule

This is a special one. By default, the tag <hr> just creates a horizontal line.

That’s why many people use it for its visual. But that’s bad, as you know by now. (There are many ways, easier and cleaner, to create such a line in CSS later.)

Instead, the tag simply means to separate content. Place a horizontal rule between two pieces of content to signal that they are different.

Example

I maintain a website filled with fantasy short stories (in Dutch, though English translations are coming). Sometimes, there’s a “scene break” within a chapter. It’s very rare for a novel to actually add a heading in those situations.

Instead, I use a horizontal rule to indicate we’re switching scenes. This is a fast and clean way to mark up my stories. Ereaders also like it. (Visually, it looks completely different, and there’s no actual line visible.)

Conclusion

I’m slowly giving you the tools to mark up your content more and more specifically. We’re moving from “big” to “small”.

First you separate head and body
Then you divide the body into main, header, footer, side notes, etcetera
And within each, you might go further with sections, breaks, or generic grouping

I highly recommend trying to structure your first web page now. Grab content from your favorite blog, or grab something you’ve written yourself, and create a clear HTML document for it.

Remember: it’s not supposed to look good at this moment. In fact, it probably looks awful. It’s supposed to have a good structure that says what each element is.

Now let’s continue to the next, slightly smaller elements: paragraphs and headings.

Continue with this course