HTML

HTML is the foundational building block of the web, and is the language used to express documents in a tree structure. It's defined by the W3C.

The standard has been based on both SGML (HTML versions 1-5) and XML (XHTML).

Concepts

Nodes are individual objects that make up the document. There are a number of node types:
- The Document Type node defines the version of the HTML specification that browsers should use to interpret the document.
- Text nodes are the simplest of these, and contain only text visible in the document.
- Comment nodes are used to denote comments for developers.
- The Document node is the root of the document, and ordinarily contains the <html> tag.
- Document Fragment nodes are similar to Document nodes, and are usually used to prepare a tree of nodes for insertion into the document together
- Processing Instruction nodes instruct the browser to do something with the document.
- Elements are the building blocks of HTML documents.
  - Tag names define the type of the element, and may be defined by the DOM or the developer.
  - Attributes are properties of elements, and can be either key-value pairs or keys whose presence alters behaviour.
  - Elements which can contain other nodes are have separate opening and closing tags. Elements which can't are known as self-closing.

Nodes

HTML documents comprise nodes of various types.

Document Type

The document type instructs a browser to interpret the document using a set version of the HTML specification.

<!doctype html>

Text

Text nodes are expressed as text:

This is a text node.

Elements

Elements are the building blocks of HTML documents. They're expressed with tags. Since a paragraph can contain other elements, it has both an opening and a closing tag:

<p>
  This is a text node inside of a paragraph.
</p>

Elements that can't have child nodes (don't have contents) are self-closing:

<br>

In XHTML these tags need to be closed with a trailing slash, but this is no longer the case in HTML5:

<br />

They can be nested inside one another:

<ul>
  <li>Here's a list item</li>
  <li>Here's another list item</li>
</ul>

And they can have attributes:

<a href="https://luke.carrier.im/">My link</a>

Not all attributes require values:

<input type="text" name="required-input" required>

Comments

Comments are denoted by the  syntax:

<p>
  <!-- This is a comment, and won't be visible on-screen. -->
  This is a text node, and will be visible on-screen.
</p>

Document

The Document node isn't defined in HTML, but it serves as the root of the document tree. In JavaScript it's accessible via the global document.

Document Fragment

Like Documents, Document Fragments aren't expressed using HTML itself but are created using JavaScript.

Processing Instruction

Processing Instructions were inherited by XHTML from XML.

Note that the XML Declaration as used in XHTML documents is not a Processing Instruction:

<?xml version="1.0" encoding="UTF-8" ?>

Children

Backlinks