XHTML/CSS Part Seven - More Text tags

Now that you have the basic idea of making web pages, we can introduce a number of new tags that assist in the layout of text. Some of these need line breaks added after them while others act in the same manner as paragraph tags, adding a line break and an empty line automatically. You will have to practice and learn by experience how each tag works.

You have already seen this <code> in use throughout this series to show the tags and style commands. It automatically uses monospaced type so you don't have to choose a font - just give the size and colour.

This a citation using <cite>. It automatically produces italic text.

This is a <blockquote>. Can you see what it does? This is useful for making list type items, but where you don't want numbers or bullets. It is also a useful alternative to paragraphs as it ensures that a certain amount of whitespace is left, giving a cleaner look to the page.

Headings in set sizes - <h1>

Headings in set sizes - <h2>

Headings in set sizes - <h3>

Headings in set sizes - <h4>

Headings in set sizes - <h5>

Headings in set sizes - <h6>

There is a plain horizontal rule above this line <hr />,
     you can set the width, height and color if you wish,
    and this    is    written       in a  <pre>
format which displays exactly as you   type,
                 s p a c e s  included !    

Maths and chemistry formulae can be written with superscript <sup> and subscript <sub> as in 10³ and H₂SO₄

• This is an unordered list <ul>
• Each item is enclosed in <li> tags.
• The bullet can be changed
• using style commands.

1. Ordered lists <ol> have numbers.
2. You don't have to type them!
3. Roman numerals as well.
4. Or alphabetical as you like!

I haven't given full examples because I hope that you can find your way around the source code by now. By looking at the source of this page, you should be able to understand how these tags are used.

What you will notice is that in HTML, we cannot use the 'less than' and 'greater than' symbols directly on a webpage because they are an essential part of the HTML language. So when I wish to show you code snippits, I have to use other methods. There are a number of 'Special characters' which begin with the "and" symbol or ampasand, so it also follows that we cannot (or should not) write '&' directly on a page.

The common 'special characters' are:
no breaking space          
Ampasand                  &
Single quote (apostrophy) '
Double quote              "
Less than                 <
Greater than              >

A semi-colon ends each one. The quotes are normally optional but must be used if a scripting language such as JavaScript is included in the page. There are many more such characters to learn and use - I'll leave it as an exercise for you to find them.
This is one area where I often make typing errors. Leaving off the semi-colon or accidentally typing a colon is so easy to do!

Whereas most of the special characters are standard, some are not due to the differences in code-pages of various countries/languages. Two examples of this are the temperature degree sign and the Euro currency symbol.

You should also be aware that many countries do not use a decimal point that is common to English. Instead, they use a comma! Then again, using a period as a decimal indicator just confuses everyone. So be careful when writing numbers.

There are a few more tags which I don't recommend using, such as big, small, strong, because they are relative sizes and you have no idea how they will render in each browser. I am obviously not including every possible tag that appears in the XHTML specifications in this series, so please don't mail me saying that I have forgotten something.

Next, we will study Forms.

Next       Home