The Foundation of the Web: HTML

HTML is relevant to everyone who builds a website, but what it is, and how to use it, is a bit more tricky. Some would call it code. Others would call it difficult. HTML is actually quite easy to learn; you just need to know what it can do well and what it can't.

HTML (the HyperText Markup Language) is the language that defines the elements of a web page. HTML isn't code, but rather, markup—all it does is represent the content and structure of the page. It says absolutely nothing about how the content is rendered. This is important—and I'll show you why.

Markup languages

A markup language is a way to annotate text so both a human and computer can read it. Markup, on its own, does absolutely nothing. It's simply text. It requires a program to display it properly. Depending on your field, you might've heard of other markup languages: LaTeX, RTF, Markdown.

HTML marks page elements using snippets of text called tags. Tags are often in pairs, one for the start of the element and one for the end of it. The end tag is defined with a forward slash (/). So for instance, bold text is marked using the <strong>...</strong> tags, the former for the start of the bold text, and the latter for the end of the bold text.

Some page elements have no end tag, because their content is defined in the tag itself. These are called void elements. Void elements usually load assets outside of the page, like images or sound.

The structure of an HTML document

A basic, valid HTML document looks something like this:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Hello world!</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>Hello world!</h1>
</body>
</html>

Explanation

Breaking this up line-by-line:

  1. <!DOCTYPE html> (document type declaration)—Every HTML file needs to start with a DOCTYPE. This tells the browser what flavor of markup is being used. Without a DOCTYPE, the browser will assume your page is old and broken and display it accordingly. Our particular DOCTYPE refers to HTML5, though other DOCTYPEs for HTML4, XHTML, and earlier exist.
  2. <html lang="en">...</html> (document start + page language)—These mark the official beginning and end of the page. Everything aside from the DOCTYPE should be within these tags. the lang="en" parameter tells the browser this page is in English.
  3. <head>...</head> (page head)—Nothing in the page head is rendered. It is used exclusively for metadata (information about the page itself) and rendering information, such as external stylesheets. The single exception is the <title>...</title> tags, which define the title of the page. The title will be displayed in the tab, the name of the browser window, and when the page is bookmarked.
  4. <body>...</body> (page body)—The page body is actually what gets rendered. External JavaScript scripts are also stored here and loaded when the browser gets to it.
  5. <h1>Hello world!</h1> (Header, top level)—This is a top-level header. It'll look like big text, yes, but semantically, this defines the most important header on the page (usually for the name).

Keeping your pages clean

As you can tell, HTML is very good at defining what things are, but not very good at defining how those things look. Visual presentation is the domain of CSS, not HTML. Early versions of HTML featured tags for styling, and these shouldn't be used under any circumstance.

The reasons why are too numerous to get into here, but in short, keeping your pages clean and easy to understand is important for both you, different browsers, and others viewing your pages. Mixing styling and content will only serve to confuse you in the end. As you go through Tesserae, just remember: HTML is great at describing the point of the content, not how the content should look.

If you are interested in learning the why and how of writing clean pages, check the last three pages in this section, Page Structure (Parents and Children), Semantics and Why Write Valid HTML?.

Summary:

  1. HTML isn't code, but markup—it marks what things are, not how they look or how they function.
  2. HTML uses tags, pairs of text, to define where an element starts and where it ends. The second tag has a forward slash to mark the end of that element.
  3. Tags are only good for defining elements and linking to other files. Tags should not be used for styling information.