(X)HTML Tutorial

Basic (X)HTML Syntax

(X)HTML tags are enclosed in angular brackets like <p> (which indicates a paragraph) The presence of the tag tells the web browser that it needs to take a specific action with regard to the content that follows the tag. In most cases, the tag is repeated at the end of the content, with the tag name preceded by a forward slash (e.g. </p>), to indicate that the action is no longer needed. In a few cases, like <br /> (line break), tags are not followed by any content, in which case the tag is followed by a trailing slash.

Thus a few lines of (X)HTML code might look like this:


   <p>This is a paragraph which might consist of several sentences.</p>
   <br />
   <br />
   <p>There are two blank lines above this paragraph.</p>

The web page will then look like this:

This is a paragraph which might consist of several sentences.



There are two blank lines above this pragraph.

You can force multiple spaces by typing &nbsp; for each space. This is called an HTML entity. HTML entities will be discussed later in this tutorial.

An important feature of (X)HTML is that two or more consecutive spaces will appear as a single space. In other words, if you type <p>Hello     there!</p>, the web page will read, "Hello there!". In other words, if you want to move text horizontally on the screen, you need a method other than the space bar (or the tab key, for that matter). Think of typing multiple spaces as a method appropriate to typewriters. Word processors and web pages have other means of adding space. CSS or HTML tables provide possible alternatives.

Differences between HTML and XHTML

HTML and XHTML are almost exactly the same. However, XHTML has a stricter set of rules for coding tags. These can be listed as follows:

  1. XHTML tags are case sensitive. For instance, <p> and <P> will be read as two different tags.
  2. XHTML tags must be closed with a closing tag or a trailing slash. Examples: <p>Some text</p>, <br />. In HTML, closing tags and trailing slashes are not required (but they are acceptable).
  3. XHTML does not permit overlapping nested tag structures. HTML does.
  4. In XHTML attribute values must be enclosed in quotation marks.

The last two require some explanation. Consider a paragraph where we have one word in bold (indicated by the <b> tag. The code would be:


   <p><b>Bold text</b> in the paragraph</p>

Notice how the <b> tags are nested inside the <p> tags? This valid XHTML. In HTML, it would possible to do this:


   <b><p>Bold text</b> in the paragraph</p>

Here the content inside the <b> tags overlaps the content inside the <p> tags. This is not allowable in XHTML.

In some cases, tags are expanded by so-called attributes. An example is the align attribute, which can be used to centre the text on the page. The code to centre the text of a paragraph would be <p align="center">The centred text</p>. Notice that the word "center" is inside quotation marks. In HTML, the quotations marks are not required. In XHTML, they must be included.