Building a webpage from scratch

computing
1

I’m building a new website from scratch. That starts with making a single webpage.

I’ll use this process to share some of my thoughts on knowledge design, while exploring each HTML element.

I’ll be focusing on creating a text-only webpage layout, without CSS or JS. The idea is to create a base and build up from it.

2

The elements I’ll be using:

  • <!doctype html>
  • <html>
  • <head>
  • <title>
  • <meta charset="UTF-8">
  • <body>
  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <details>
  • <summary>
  • <footer>

Wow, that’s a lot! Here’s how I think of them:

Stuff at the top

  • <!doctype html>
  • <html>
  • <head>
  • <title>
  • <meta charset="UTF-8">

This stuff is document structure and metadata, and most web authoring software will common templates that are basically the same on every page on a site, tho of course there may be resources which load on a page conditionally.

First stuff users see

  • <body>
  • <header>
  • <nav>

This stuff is the common navigation that might appear at the top of a webpage. Same deal with software, there is usually a template to apply to most or all pages on a site, providing a unified navigation interface for users.

Stuff users read

  • <main>
  • <section>
  • <article>
  • <aside>
  • <details>
  • <summary>

These elements give us a lot of reading power! Understanding how they work together provides web authors a surprising amount of options, all without CSS or JS.

Stuff that completes the thing

  • <footer>

This could be metadata at the bottom of publications, action links provided for each article, or contact info at the bottom of each page on a site. It is also a great reminder to close the parent element.

3

<!doctype html>

This is a declaration at the top of document, so the web browser knows it is a standardized HTML document and use “no-quirks” mode.

There used to be different modes, based on arbitrary extensions to HTML by different browser builders. Oh, also HTML used to be based on SGML, which liked DTDs like it was XML… IYKYK.

A lot of history, but just make sure to use it as the first line in your documents, it is required.

In the standards it is common to see <!DOCTYPE html>. It is technically case-insensitive. Since there are 11 letters, each being upper- or lower-case means there are 2^11 combos, or 2048. You could use <!DoCtYpE HtMl>, yet you should probably not.

4

<html lang="en">

This element is not technically required, but it serves two purposes:

  1. Ensuring a variety of tools processing the document understand it is HTML, and
  2. By including the lang attribute, we ensure all child elements inherit it automatically, and of course declaring the language assists browsers and other systems process the document content

Is there a reason to not include lang? Probably not. Your content could theoretically be equal parts many languages… but that is such an edge case, and you should probably be providing a robust navigation in any case, hence requiring language to be set.

This will become important when we get into multilingualism on the web. The lang attribute may be set on child elements, when it varies from the parent element.

More info about the language tags is at IETF language tag - Wikipedia, which includes a list of commons tags.

Should you include </html> as a closing tag?

If there were ever a place to skimp on including closing tags, it seems like this would be it! However, I always include </html>.

As a web author, it is important to me to be able to read the code I produce, and “closing” an element that has content makes it easier for me to know where I am in the document layout.

Incidentally, empty element pairs never made sense to me, which made it easy to use <img ... />.

There are a couple of XML (XHTML) specific attributes for html, but I do not use them, successfully.