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＞Hidden Data
!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.
＜!--This is a Comment--＞
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:
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.
＜meta name="viewport" content="width=device-width,
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.
The title given here is often displayed at the top of a page or tab in a browser’s window.
＜link rel="stylesheet" href=“styl.css"＞
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
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 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
h1 through to
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.
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.