The HTML template

This is a Link to a working version of our template

This is our initial template, i.e., a legal but empty web page. The page is a collection of opening and closing tags, i.e., of markers that open and close elements; opening tags are of the form <blah>, while closing ones are </blah>. In html we are not required to indent tags (to leave spaces before each tag), but if we don’t indent them, the structure of the page becomes difficult to follow. This is our code:

Now let’s see the tags of our template; don’t worry about understanding each of them; we will go over the ones that are important later.

1: this is an HTML document, not ‘text’ or ‘pdf’
2: open the document; btw, it is in American English
3: open the ‘head’, where we put general info to help the browser to display our page correctly
4: use Unicode char via UTF-8 encoding (1-to-4 bytes)
5: placeholder for yet-to-write CSS style sheet
6: placeholder for yet-to-write Javascript script page
7: the title of the page; it appears in the title bar
8: close the ‘head’; we finished the doc. info
9:
10: open the ‘body’, where we put the content of the page that the browser will display
11: a paragraph with the string ‘Hello, World!’
12: close the ‘body’; we finished the doc. content
13: close the html document; we finished everything

children of an element don’t overlap each other

We nested each element inside another, without overlaps, e.g., the ‘head’ and ‘body’ are nested inside the ‘html’ element; once we open the ‘head’, we cannot open the ‘body’ until after we close the ‘head’. Likewise, the ‘meta’, ‘link’, ‘script’ and ‘title’ elements are all nested in the ‘head’, and a paragraph ‘p’ is nested in the ‘body’; this paragraph has the content of our page, i.e., the string ‘Hello World!’.

Some elements, like ‘meta’ and ‘link’ are ‘self-closing’, i.e., their tags open and close immediately. They have the form <blah/>. The closing tag of a few elements is optional, e.g., a paragraph element closes with either a </p> tag, or with a carriage return, so the </p> tag is optional.

Our template looks like this: