| Next page | Contents page |

A simple HTML page

HTML = HyperText Mark-up Language

HTML is not really a programming language but a way of marking a document to describe the meaning of each piece of content: whether it is a heading, a paragraph, a picture, and so on. In the beginning it also defined how to lay the document out but nowadays that is done by yet another language: CSS (Cascading Style Sheets). This course will only use the minimum amount of HTML and CSS to support our JavaScript programs.

In this course the latest HTML5 is used whenever possible, the complete standard for which can be found at WHATWG (The Web Hypertext Application Technology Working Group). Previous standards and that for CSS can be found at W3C (The World Wide Web Consortium).

The first thing we need is a web page, for the browser to display. It will be very very basic, just to give a platform on which programs can be run when we write them. Here is the minimum we need:


<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <p>A paragraph of text.</p>
  </body>
</html>

Things to notice in this snippet of HTML:

  1. HTML uses "elements" bounded by "tags" written in angle brackets. The paragraph element has a starting tag <p> and ending tag </p> - note the slash character in every ending tag. Browsers are designed to be very tolerant: you can often leave off the ending tag without any adverse effect. Nevertheless it is good to get into the habit always of closing elements: that way you will avoid some hard-to-diagnose problems when you start to write larger documents.
    HTML element structure

    <elementName>content</elementName>

  2. Elements are nested completely inside each other. We must close the paragraph element before closing the body element which surrounds it. We have indented the elements in this example to make the nesting clear but indenting is not essential. The browser collapses all contiguous "white-space" characters (space, tab, line feed, carriage return, etc) to a single space and then lets the content flow to fill the space available, folding lines of text between words. Line ends in the HTML source text are not significant in the displayed page but you can force a line fold with a break element: <br>, which is an example of an element that can never have any content and so does not need an ending tag.
  3. The <html> element forms the outermost level of the document. There cannot be any other HTML elements outside it (though there can be a couple of other things at the start, one of which we will meet soon).
  4. The <html> element always contains one <head> element followed by one <body> element.
  5. Only the contents of the <body> element are displayed in the browser window.
  6. The <head> contains initialisation information, except that it must contain a <title> element, the contents of which form the window caption.
  7. Tags may be written in any combination of upper or lower case letters but it is useful for more advanced work to always make them lower case.

A browser would display that sample of HTML like this:

| Next page | Contents page |