Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


Related Links
HTML Basics Tutorial
Sylesheets (CSS) Tutorial
More Advanced HTML Sites

Sitemap | Contact | Link To Us | Advertise
Report A Problem

Advanced HTML Tutorial
Part 1 - Advanced Text Formatting


HTML is made up of a great many elements, a lot of which are overlooked, forgotten or just unknown to many web designers. Although with a basic knowledge of HTML you can develop a website, to take advantage of many of the advanced features, and to make pages fully compatible, it is useful to learn these less popular tags.

Before reading this tutorial, you should have a basic idea of how HTML pages work, and how to do basic coding in HTML. A good reference for this sort of thing is the HTML Basics Tutorial, here on Free Webmaster Help.

More <font>

The font tag is the most used HTML tag, and takes a very basic form. It allows you to specify the color, size and font of text. Although largely thought to be obsolete by many developers, due to the greater control given by stylesheets, it still provides a very easy way to change the look of the page.

The basic use of the font tag involves setting a font using:

<font face="Arial">Text</font>

but this does introduce another problem, that of different computers accessing a page. Unlike publishing methods such as print, it is up to the user's computer, not the printer, to render the pages, so they can look different on all computers. This is especially noticable with the font face attribute, as it is very rare to have a font installed on every computer that visits a website. Because of this the HTML specification has a system built in where multiple fonts can be specified. For example, you can use:

<font face="Arial, Helvetica, sans-serif">

which would tell the browser to first try to display the text in Arial, if that wasn't found try Helvetica and if not use the standard sans-serif font. This allows you to have control over how pages are displayed by browsers without the correct font, although it is far from perfect. The best uses for this tag, are if you really want to use a non-standard font (and don't want to use stylesheets) or if it is important that you can accurately predict how pages will look on other computers. It is good practice to use font face in this way for all applications, though, for the sake of compatibility.

Bold, Italic, Underline and Strikethrogh

A further method of controlling how your text appears, other than changing the size color and font is to apply the four standard text formats to it. HTML has tags for all of these, which are supported by nearly all browsers.

Bold text is simple to create, it uses either the:




tags. Usually, it is simply a matter of preference over which one you choose, but accessibility experts normally recommend using <strong> as many screen readers (programs which read web pages to the blind) will recognise that the text is highlighted and speak it appropriately.

Similarly you can create text in italics using:




Again, it really doesn't matter whether you choose to use <em> or <i>, but screen readers can often recognise <em> and emphasised text.

Underlines are achieved using:


although I would recommend against using this greatly, as it can often be confused with links on the page. Strikethrough, is used to 'cross out' text:


although this is not particularly commonly used.

Subscript and Superscript

Subscript and superscript (text slightly above or below the line) is something which has long been supported, but is not common as it is only commonly used in scientific applications. There are other uses, though, and it is not a difficult tag to implement:

8 x 8 = 8<sup>2</sup>

8 x 8 = 82



Preformatted Text

HTML has been designed so that it ignores multiple spaces in documents, for example if you enter two standard spaces it is rendered as one. Although this allows indentation of code without changes to the presentation on screen, it does make it difficult to display some sorts of content (such as pre-formatted tables written in plain text). For this, you can use the <pre> tag. This stands for preformatted text, and will display the text exactly as it appears in the document source, for example:


Name Location Sales
---- -------- -----
A. Name London 1,000
A. Nother Washington 2,000
A. Person Paris 2,400


Without the <pre> tags this would display as:

Name Location Sales
---- -------- -----
A. Name London 1,000
A. Nother Washington 2,000
A. Person Paris 2,400

but after adding the tags in it shows up as:

Name Location Sales
---- -------- -----
A. Name London 1,000
A. Nother Washington 2,000
A. Person Paris 2,400

Part 2

In part 2 I will show you how to create lists in HTML and also the standard heading tags.

© 1999 - 2001