An HTML page is a collection elements surrounded with opening and closing tags, i.e., of markers that open and close elements; opening tags are of the form <tag-name>, while closing ones are </tag-name>. The content of the element is whatever we put between the tags. For example, the following is an element; it starts with the opening tag <p> and ends with the closing tag </p>; the tags tell us that the element is a paragraph; the content of the element is what we find between the opening and closing tags, i.e., the sentence ‘Hello World!’:
In html we are not required to indent elements (to leave spaces before the opening tag), but if we don’t indent them, the structure of the page becomes difficult to follow.
The following is an initial HTML template of a valid but mostly empty web page:
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>My first HTML page</title>
This is a Link to a working version of our template
Now let’s see the elements 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
7: the title of the page; it appears in the title bar
8: close the ‘head’; we finished the doc. info
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
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 <tag-name/>. 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:
The webpage loads fine in spite that lines 5 and 6 point to style and script files that don’t exist. HTML looks for these files but since it cannot find them (because we have not created them yet), it simply ignores them.