Welcome to Blazingfibre - web hosting, website development, custom software, network administration, technical support - London-based

An introduction to HTML

  knowledgebase  :: network status

HTML works by identifying a block of text, such as "the quick brown fox", and then specifying which of a range of attributes, such as bold, italics etc, apply to that block. This principle is similar to the bolding function found in wordprocessors such as Microsoft Word, where the user first identifies the text to bold (by selecting it) and then specifying the attribute for the selected text (by clicking the bold button).

However in HTML, the document (webpage) is delivered over the internet in text format, and interpreted and displayed by software (web browsers), not humans. Therefore, HTML encodes the instructions for selecting the text and applying the desired attributes into the text of the document itself.

In order to separate the HTML instructions from the text of the document, HTML is encapsulated in < and > signs. Text between < and > signs is interpreted as HTML, and *not* displayed as text. Thus by embedding instructions into the document surrounded by < and > signs, you can control how the document appears onscreen.

Here's some simple HTML to bold some text:

<b>the quick brown fox</b>

Two things are happening here. First, the HTML is selecting the target text. It does this with two sets of < and >. The second thing that's happening is the bold attribute (b) is selected. If italics were desired instead, the letter "i" would be used:

<i>the quick brown fox</i>

If the second set of < and > is examined, a leading / character is revealed before the i. In HTML, / means OFF. The first set of < and > has no / character; this means ON. So, the above HTML says to the browser:

  1. turn italics ON
  2. display this text: the quick brown fox
  3. turn italics OFF

To summarise, the target text is selected by wrapping it in HTML:

<attribute>target text</attribute>

The attribute to use is selected by changing the text inside the < and > signs:

<b>target text</b> ... for bold
<i>target text</i> ... for italics

The attribute is terminated (will no longer apply) when a / character precedes it in an HTML statement:

<attributeON>target text</attributeOFF>

Note: HTML cannot be combined into a single statement (eg: to create bolded and italicised text, <BI> does not work), however it can be wrapped around more HTML. Therefore to create bolded and italicised text, this HTML could be used:

<i><b>target text</b></i>


Here you can see the HTML attribute SPAN being applied to the target text "the lazy dog":

the quick brown fox jumped over <span class="bodylite">the lazy dog</span>

You might have noted that to bold and italicise text is quite a few extra keystrokes - if you then start changing colours, font sizes, font faces etc the amount of HTML in the file can easily outweigh the amount of displayed text. Which might look great onscreen, but is a pain to edit and maintain..... which is why the great minds out there on the internet invented Style Sheets. These allow you to apply sweeping changes to the look of your text with just a few keystrokes.

Stylesheets work similarly to the other HTML described above: text is selected as before, but instead of a single attribute being applied to the target text, an entire *style* is applied, which might include changes to font colour, size, face, spacing, bolding, etc. Large numbers of different styles can be created and applied to any portion of a website. Each style is given a name, which is used to select it - in the above example the name "bodylite" is used. In turn, a separate file can list all the stylesheet names and their styles (bold, italic, navy blue etc) in one place.

Why are stylesheets used to do bolding, when simply <b> and </b> in HTML would suffice? Well, because later if someone decides that all bolded text should also be one pointsize larger, that will involve one change to a single file. If standard HTML had been used, each section of bolded text on each page would need to be edited; the pages containing bolded sections would first need to be located manually, as well.