5. The HTML Framework

A properly constructed HTML document has two parts, the header, whose data is largely hidden, and the body, holding all that’s visible on a page. The entire framework looks like this:

＜!DOCTYPE html＞
＜html lang="en-GB"＞
＜head＞
Hidden Data
＜/head＞
＜body＞
Visible Content
＜/body＞
＜/html＞

The !DOCTYPE declaration at the start is essential, informing any visiting browser that the file is actually an HTML document. The html element contains all that’s in HTML form, with lang (language of the content) in this case specified as en (English), with the country set as GB (Great Britain); the language is in lowercase, the country in uppercase. The lang attribute is optional, although recommended. As an alternative, where two or more languages can be found in a single document, lang can be applied to multiple elements in the body of the file.

At any point in an HTML document you can add a comment. This isn’t visible in a browser, but can be useful, providing you with reminders about certain entries in a file. Comments are entered in this form:

＜!--This is a Comment--＞

The Head

The head contains information necessary for the correct operation of the page and should always include the following four elements. They don’t have to be in this order, but this is optimal:

1

＜meta charset="utf-8"＞

This essential line confirms that the character set in your page is UTF-8. The charset attribute is commonly entered in lowercase form, as shown.

You must ensure that the document really is a UTF-8 file.

2

＜meta name="viewport" content="width=device-width,​initial-scale=1"＞

This rather obscure line ensures a correct display on all types of devices, including mobile phones. It can be adjusted, but is normally best left as it is.

3

＜title＞Page Title＜/title＞

The title given here is often displayed at the top of a page or tab in a browser’s window.

This entry must always be included, even if empty, as in ＜title＞＜/title＞.

4

＜link rel="stylesheet" href=“styl.css"＞

This rel form of link indicates a relationship between the current HTML file and a file it depends on, in this case a cascading style sheet with the name style.css. A stylesheet such as this should always be used if you want a well organised website.


The head can also contain numerous other pieces of information about your page, many of which may be superfluous.

If you register your site with Google, so as to obtain useful data about the performance of your site, you have the option to enter something of this form into the head of your home page:

＜meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9​Bsjdi102tLVC21AIh5d1Nl​23908vVuFHs34="/＞

In this instance the value of name is non-standard, causing some validation software to report an error, but it doesn’t cause any other problems.

The Body

The body contains the actual viewable page, consisting of text held within elements, links to pictures on the page and links to other web locations. Common elements include div (division), h1 through to h6 (headings), p (paragraph), img (image) and a (anchor or link).

If your web page hasn't got an associated stylesheet, any web browser will render all the elements in a plain style. This may vary slightly in appearance between browsers, but your completed website should look perfectly readable without a stylesheet.

If you have to drastically alter the behaviour of elements within your stylesheet then you’ve probably used the wrong elements in the first place. A stylesheet should only make fine changes to a completed page.

Elements come in two types: block elements that appear as areas from the top to the bottom of a page and inline elements that flow with the text, wrapping around at the end of each line.