The Basics
This is not intended to teach you everything there is to know. My hope is that after reading this, you will be able to use these examples to put together HTML formatted documents of your own.
This tutorial is based on on the W3C recommendation, where the idea is to use CSS wherever possible, but to still include semantic HTML to support older browsers. I have also written a CSS tutorial to demonstrate its use.
HTML is a markup language, and is by far the most commonly used language on the Web. Markup languages give structure to a document. They say what parts are headings, what parts are paragraphs, what parts are bullet lists, etc.
The W3C HTML 4.0.1 specification is available if you need to check on what elements are available and what attributes they support.
Tags or elements are on/off switches for different types of formatting. Unless otherwise specified, every "on"
tag (such as <head>) needs a closing ("off") tag at its end (</head>).
Wherever possible, include the closing tags, even if they are not essential, as this makes it easier for you to follow
your own markup, and makes it easier to read.
Whilst many tags can be 'on' at any one time, under no circumstances should tags overlap. For example, this is invalid:
<p><strong>strong text <em>strong and emphasised text</strong> just emphasised text</em></p>This version is valid:
<p><strong>strong text <em>strong and emphasised text</em></strong> <em>just emphasised text</em></p>This is one of the reasons you will frequently see designers indent html, as it makes it easy to check which closing tag relates to which tag. For example, this is clearly wrong:
<p>
<strong>
strong text
<em>
strong and emphasised text
</strong>
just emphasised text
</em>
</p>However, this is valid:
<p>
<strong>
strong text
<em>
strong and emphasised text
</em>
</strong>
<em>
just emphasised text
</em>
</p>Note here that none of the indents will show up in the html. If we look at the valid version of that last line, when displayed it will look like this:
strong text strong and emphasised text just emphasised text
The reason for this is that in HTML, there is never more than one space between words or characters, reguardless of
line breaks, extra spaces or tab characters in the source code. The only way to make more than one space is to use the
'non breaking space' entity (see the section on special characters), set the HTML to be preformatted
using <pre> tags, or use CSS to style the text so that whitespace is respected.
Tags, elements, and attributes
We have already seen what a tag is, and that there are opening and (in most cases) closing tags. The browser will read these tags, and it will internally create a representation of what you gave it. This internal representation is known as an element. It will then work out how to display the element on the screen. Not all elements are displayed (such as the HEAD element), and some elements will always exist, even if you do not create the tags for them (such as the HTML, HEAD, or BODY elements). These elements are most obvious through scripts or CSS, but for now, just trust me, they are there.
Some elements accept extra parameters. For example, the A element can accept the HREF parameter, which converts it into a link. These parameters are known as attributes, and are created like this:
<a href="somefile.html">Although it is possible to specify some attributes without quotes (depending on the value they hold), I advise you to always include them, as it makes the document easier to maintain, and will help to avoid mistakes later.
Attributes are separated by spaces or linebreaks. Some attributes do not expect a value, and are written just as the name of the attribute, without any equals sign, or quotes:
<select id="oselect"
name="somechoice" multiple>Note that in HTML, tags and attribute names can be written in any case. Some authors like to use upper case to make them stand out from their contents, and some like to use lower case to make them easier to translate to XHTML later if needed. It is perfectly OK to use whichever makes the most sense or is the most useful to you.
Last modified: 4 January 2011