Basic Blog Blocks - HTML Shell
The domain is connected to the (virtual) server, the web server software is idling for requests. So finally, we are ready to write our content, aren’t we? Not quite. We still lack the basic HTML that structures our content. Otherwise, we might just hand out plain text and that is something nobody likes. Plain text tends to be hard to parse for machines and for humans, as well (kind of).
I refer here to the general surrounding of the content as shell. This term is used for Progressive Web Apps (PWAs), and is described as
I will come back on the CSS part in a later post. For now, let us focus on the HTML topic. We want to have nice, semantic elements that structure each site. Thanks to HTML 5 we can avoid semantic-less
divs completely for the shell.
Okay, enough with the foreplay, show me the code!
Even if you do not know anything about HTML, one can probably make some sense of this structure. Quickly going through it from top to bottom
- all HTML pages must start with a
DOCTYPE. The doc type is not an HTML tag, but a “information” to the browser about what document type to expect.
- all tags are wrapped into an
headpart contains meta information so other machines can make sense of your page. Meta information is often related to SEO (Search Engine Optimization), but is not limited to it. For instance, to get a nice preview picture on your mastodon toot, you want to put some special tag in the
bodycontains the actual content of your page. These are also the parts that will be visible to your readers.
headerrefers to the actual page header.
mainwill be different on each page (otherwise your page would be pretty boring :D) and contain the actual content, like a blog post
footermight contain a copy left/right statement and a way to get in contact or an imprint. This is normally the same on each page.
And that’s it. In the next post we will fill each part with live. And we will talk about the nerdy beauty contest of the web: the Lighthouse measure and how to score 💯 at it.