HTML is a mark-up language with ‘tags’ identifying parts of the document to behave in a certain way, for example, to act as a link or to make the text bold.  Tags generally consist of an opening and closing pair.  They are written in lower case using angled brackets ie <html>.

Our first HTML tag (or element) will open and close the entire document.


<html>
</html>

Inside of the <html> element go all the other HTML elements required to create our page.  A HTML document consists of a head and body.  The head is where information about the file is placed, the body is where the visual content of the page is placed.  Unless otherwise stated the bulk of HTML element are place inside the <body> tag.

<html>
	<head>
	</head>
	<body>
	</body>
</html>

HTML has a strict hierarchy that dictates which tags can be placed inside of which.  As such the <html> element is the parent of all the other elements in HTML.

Tip:  It may help you to indent tags as in the above example.  White spacing is ignored by the web browser so feel free to use as much as you like to make your documents more readable.

Doctype, Namespace and Meta Tags

The above is a very simplified version of the basic HTML file.  In reality you will need to provide additional information for the browser about the type of HTML your file contains and the character set and language you intend to use.  A fuller example would be:

<!doctype html>
<html lang="en">
     <head>
     <meta charset="utf-8">
     </head>
     <body>
     </body>
</html>

The above is all a little advanced but if you want to know what each line does then here goes:

<! DOCTYPE > - declares to the browser the type of document to expect. In this case a HTML document and more specifically a HTML5 document. HTML5 is the latest standard from W3C.

The <html> uses the lang attribute to indicate the document is written in english.

The <meta> tags are used to set HTTP headers to indicate that the file contains HTML and CSS text using the utf-8 character set.

Create a Boiler Plate HTML File

A full appreciation of all the above is unnecessary to get started.   It is recommended however, that you base your HTML files around this structure.  You may therefore want to save a template file with this code in, that you can use as the basis of all your other HTML documents.

Page Title

To add a page title – that is seen at the top of the browser window we use the <title> tag and this is a child of the <head> tag so is used as follows:

<head>
<title>My First Web page</title>
</head>

It is important that you add the title because:

  • Users can read it.
  • It will appear in a browsers tab.
  • It is the default name used when users bookmarks your page.
  • It will help the user identify the page when using the Back button.
  • It is one of the many things referenced by search engines to find your page.

You may consider using a naming convention that will give your users a sense of where they are within your site by using a separating character such as  the ‘pipe’ ie “Sheffield Winter Gardens | News | New Stall to Open”.

Leave a Comment