One of the best ways to learn HTML is to look at other peope's code! So how does one do that?

All you have to do is position the mouse on the web page for which you want to view the code, then simply right-click and select "view source" (sometimes "View Page Source") from the pop-up menu. You can achieve the same thing by selecting "View" from the tool bar then selecting "Source".

However, that method won't show you all the source for sites that are coded to use "frames" (you will find out why in the "frames" section further on). So, get into the habit of using the right-click method (rather than view source from the manu bar) because that is the method that you need to use on web sites that use "frames" and if you get into the right-click habit now, you'll not get confused later!

So, use the right-click method to have a look at the source of this page now. You should see a new window open (either your text editor, or the source viewer window of your browser). The funny-looking stuff that you see is the source code of this page! There you go - you are actually looking at the code behind this page - the stuff that I wrote to make the page look like it does! This is the type of stuff I will teach you to write (or at least, not the content, but the code to display your content) in this tutorial.

Now resize the window, if necessary, so that you can still see this tutorial as you will need to refer to it! Now click back on the main page and the source code window will minimise. You will need to maximise it again to see it!

People like me who do web design have a dual-monitor set up to solve the problem of keep maximising windows. Two screens enable us to code (or see the source code) on one screen and see the browser (or the results of what we have coded) on the other screen. If you want to do a lot of web design and don't already have two monitors, I strongly suggest you fork out for two monitors as it will help you a lot! However, you'll need to be careful to ensure your graphics card can support it and that your monitors are compatible with the graphics card...

So, getting back to the source code in the window you've just opened... What you are looking at contains the HTML code that your browser parses - the posh programming word for "reads" - in order to "know" how to display this page in the browser window in terms of colours and layout, along with the actual text.

Have a closer look at the source code page and you'll see that, interspersed within the text, there are bits enclosed within "less-than" < symbols and "greater-than" > symbols. E.g. Look for this paragraph that starts "Have a closer look..." and you'll see at the start of it that there is a <P class="maintext">. This is an example of an HTML tag and this particular one tells the browser to put in a new paragraph (the "P" bit) and use a particular font style and colour for the paragraph (the "class=maintext" bit). HTML Tags - or just tags - are what HTML is all about because HTML is classed as a "mark-up" language - you mark up the text with suitable tags that tell a browser how to display it the way you want it to look! Simple!

The "P" in <P class="maintext"> is known in HTML lingo as an element - a command that tells the browser that it is to do something. Elements like this can be used on their own, thus <P> means new paragraph but nothing else. Elements can also contain other information - as in class="maintext" - we'll look at that part a little later. Note that the element is the first bit that appears after the initial <. It is the entire thing within the < and > that is what is called a "tag". In HTML writings like this tutorial, very often the terms "HTML tag" (usually just called a "tag") and "HTML element" (usually just called an "element" tend to be used interchangeably!

For now, the important thing to note is that the element part of a tag like <P> almost always come in pairs. The <P> tag is known as a start tag. But how does the browser know where the paragraph ends? This is why tags come in pairs. You insert the start tag, write what you need to write, then use an end tag to tell the browser that the end of the paragraph has been reached. An end tag always has an / before the element. So the end tag to mark the end of a paragraph is simply </P>.

So, now you can see that any text you want displayed should always have a start tag before it and an end tag after it as per the example below:

<p>These are a pair of HTML tags that contain elements that mark the start and end of this paragraph</p>

NEXT: So how dya actually build a web page with HTML tags / elements?