How every HTML document begins.
Now we'll get to dive in and play with some code. This section will introduce the basic HTML template. This template has the basic structure that every document should follow, as well as a few other extra bits to help manage the document.
Here is the basic template. This template should be the starting point for every HTML page you write. The rest of this section will deconstruct and explain it.
Let's break it down:
The first tag on each page should always be this tag. It should go at the very top, before the html tag. You'll notice that, unlike the other tags, this one begins with an exalamation mark ( ! ).
<!doctype html>
Technically it is not a tag but an instruction to the brower on how to interpret the rest of the document. For HTML 5 we simply refer to the type as html. For previous versions of HTML there were different types that it could be so it was important to specify which.
<head> </head>
The head of the html document is where ancilliary information goes. This is information relating to the document but not directly part of the document. There are many items which can go here but the template above includes the basic items which every page should have.
<title> </title>
The title tag allows us to give the document a title. This is used in several places:
The title tag can be quite important given all the places it is used. You should take the time to make sure it is descriptive and concise.
Search engines generally only show the first 65 characters of the title (give or take a few characters). You should aim to keep your title to less than this amount.
A well written title can encourage more people to click on your page when it shows up on Search Engine Results Pages.
<meta name="description" value="">
<meta name="keywords" value="">
Next in the head we have the two meta tags for description and keywords. These are used by search engines (to varying degrees) and can also be used by other systems (such as when your page is linked to on social media and other sharing sites).
The description is used to provide a summary of what the page is about. Search engines will typically place this under your title in their results pages.
Search engines generally only show the first 155 characters of the description (give or take a few characters). You should aim to keep your description to less than this amount.
Again, a well written description can encourage more people to click on your page when it shows up on Search Engine Results Pages.
The keywords meta tag is used to provide a series of words which would match what the page is about. Search engines used to place weight on this aspect of your page but it was abused to the point that it holds very little weight nowadays. You should still include it however for completeness and also as it is estimated that some search engines will mark you down for not having it. Their reasoning is that if you are lazy and can't be bothered putting this tag in then you're probably lazy in other areas too so the quality of your page, in their opinion, is less.
<body> </body>
This is where the actual content of your page goes. Typically this content would all be contained within tags to explain what type of content it is. In the example above we have left this out just to keep things simple. In the next section we'll start to show you what type of tags may be used.
It is important that all of your content is between the opening and closing body tags.
If you copy the file above (template.html) into your own file and open it within a browser you will see a basic page. Experimenting with it, you will see that you can actually break the rules in quite a few different ways and the browser will happily play along.
Browser vendors realise there is quite a bit of poorly written HTML out there. In an effort to provide the best experience to their users they will do their best effort to work around any errors they come across.
Don't take this as an excuse to be lazy and write poor code however.
Now let's play about and create our first page.
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section add to and improve the page with the new tags you have learnt.
Education is the kindling of a flame,
not the filling of a vessel.
- Socrates
