5HTML and CSS: the basics


Hypertext mark-up language (HTML) is a mechanism for formatting and displaying text and images on a web page.

An HTML document contains both text (the words displayed on the web page) and elements that control how the text is formatted (how the text appears, its colour, size &c.).

HTML elements are usually made up of a start tag and an end tag:

<tagname> content </tagname>

The start tag and the end tag always have the same tag name and this is always surrounded by the less than “<” and greater than “>” symbols (these denote that what is within is a tag). The tag name for an end tag is always the same as the start tag but is preceded by an oblique “/”.

  • Some elements do not have an end tag; e.g. <br>, <img> &c.

The content between the start and end tags will be formatted to match the HTML element; thus:

<h1>This is a heading</h1>

The text “This is a heading” will be formatted in larger text to indicate that it is a heading.

HTML elements can be nested (and indeed this is standard practice for most HTML documents):

<h1>This is a <em>heading</em></h1>

Here, the <em> element (makes the text appear in italics) is contained within the <h1> element (is nested within the <h1> element).

HTML documents are usually saved with the file extension .html, sometimes with the extension .html; there is no real difference between the two, the .htm stems from the Windows operating system which was originally limited to a three character extension.

The .html extension is now by convention, the correct extension to use. All HTML files in this website will be given the .html file type.


HTML 5 is the latest version of HTML. I only concern myself with HTML 5—I’ve written the website to work with HTML 5 and if that causes problems with earlier browsers then tough—my advice is get a better browser.

HTML 5 is backwards compatible with earlier versions of HTML, so older HTML code will always work in HTML 5, when I refer to HTML (without the 5), I’m still referring to HTML 5 (just in a less formal way). I don’t generally refer to earlier versions (unless there is a specific reason to do so—see Document types in the next section), we’re doing things the HTML 5 way, I don’t explain how this differs from earlier versions or what could and couldn’t be done in these versions.

It’s all just HTML now.

End flourish image