Home| About US |Website Development Tutorial| Ecommerce Tutorial
Back to Basic HTML Programming
HTML has two levels of empahsis, <em> or <strong> for emphasized and strongly emphasized. They are used the same way in XHTML.
To begin emphasized text, one would use the following code:
Some presentational elements have crept in to HTML over the years. Now that CSS is well established they are being rooted out. Some elements have been declared deprecated. This means that future browsers will ignore them. Other elements, e.g. italics ( <i> , </i> ) or bold ( <b> , </b> ) are discouraged in HTML 4.01 but will continue to work at least in the next version of XHTML. (XHTML 1.0 is the version of HTML after HTML 4.01. XHTML 2.0 is currently at the draft stage.)
Older pages used tags to underline, <u> </u>. However one should not use the <u> tag, as it is deprecated in HTML 4.01. This means it is not officially used anymore, although its use is still allowed for backwards compatibility. If you still need underlined text, set the CSS property text-decoration to underline instead. It is generally a bad idea to underline anything other than hyperlinks.
If you use <i> or <b> not for decorational purpose but to show website visitors that something is important, you should consider using the structural elements <em> and <strong> instead. These elements are rendered by screen readers as well as graphical browsers, whereas the presentational elements will only be rendered by graphical browsers. <em> (from emphasise) will be, in most graphical browsers, shown as italic text. Similarly, <strong> produces bold text.
Another useful element is <abbr>. This can be used to provide a
definition for an abbreviation, e.g.
Graphical browsers normally show abbreviations with a dotted underline. The
title appears as a tooltip. Screen readers may read the title
at the user's request.
Unfortunately, Internet Explorer version 6 and lower do not support <abbr>.
It does however support the related element <acronym> which has
resulted in this element commonly being used for all abbreviations not just
acronyms.
An acronym is a special abbreviation in which letters from several words are pronounced to form a new word, e.g. radar - RAdio Detection And Ranging. The letters in HTML are pronounced separately so strictly speaking this is a different sort of abbreviation known as an initialism.
The <pre> tag is used for preformatted text, which preserves spacing unlike non-preformatted text which will wrap to the next line and remove spaces which are not explicitly defined with the mark.
An example of preformatted text is ASCII art. The following example is taken from ASCII-Pinguine.
a8888b.
d888888b.
8P"YP"Y88
8|o||o|88
8' .88
8`._.' Y8.
d/ `8b.
dP . Y8b.
d8:' " `::88b
d8" 'Y88b
:8P ' :888
8a. : _a88P
._/"Yaa_: .| 88P|
jgs \ YP" `| 8P `.
a:f / \.___.d| .'
`--..__)8888P`._.'
Preformatted text is begun with <pre> and ended with </pre>.
There are six levels of headings. The most important heading(s) in a document should be level one. Sub-headings should be level two. Sub-sub-headings should be level three, etc. Do not skip levels. If the default sizes do not suit your document use CSS to change them.
<h1>This is Level 1</h1>
<h3>This is Level 3</h3>
<h5>This is Level 5</h5>
In HTML 4.0 and XHTML font types and sizes are specified using CSS rather than HTML as these are presentational effects rather than logical structures.
The use of style elements such as <b> for bold or <i> for italic is straight-forward but unfortunately it couples the presentation layer with the content layer. By using Cascading Style Sheets, the HTML author can decouple these two distinctly different parts so that a properly marked-up document may be rendered in various ways while the document itself remains unchanged. Thus, for example, if the publisher would like to change cited references in a document to appear as bold text as they were previously italic, they simply need to update the style sheet and not go through each document changing <b> to <i> and vice-versa. Cascading Style Sheets also allow the reader to make these choices, overriding those of the publisher.
Continuing with the above example, lets say that the publisher has correctly marked up all their documents by surround references to cited material (such as the name of a book) in the documents with the <cite> tag:
<cite>The Great Gatsby</cite>
Then to make all cited references bold, one would put something like the following in the style sheet:
cite { font-weight: bold; }
Later someone tells you that references really need to be italic. Before CSS, you would have to hunt through all your documents, changing the <b> and </b> to <i> and </i> (but being careful *not* to change words that are in bold that are not cited references).
But with CSS, it's as simple as changing one line in the style sheet to
cite { font-style: italic;