HTML Basics: Text Formatting II

Following on from last week, below are some lesser used but still very useful text formatting tags.

Delete and Insert

If you decide to change some information on a page, but what to emphasise that you’ve made an update, perhaps to a blog post or a piece of news, then we use the del and ins tags to do this.

The del tag is used to surround the text to be deleted. Using this tag will usually put a strikethrough the text. The del tag can also accept two attributes, cite, which accepts a URL to a page or document that explains why the text was deleted, and a datetime attribute, that defines the time of where the text was amended.

We then have the ins tag, to insert the new text. This is similar to the del tag as it accepts the same attributes, however it outputs text with an underline.

So, for example, we could have the text of

<p>The BBQ will take place on Saturday 31st July at 2:00pm.</p>

Now we could choose to change the date to a week later, as rain is forecast. To do this we need to do the following:

<p>The BBQ will take place on Saturday <del datetime="2009-01-22T17:38:36+00:00">31st July</del><ins datetime="2009-01-22T17:38:36+00:00">7th August</ins> at 2:00pm.</p>

Which would give you:

The BBQ will take place on Saturday 31st July7th August at 2:00pm.

This way, people who have already read the post before can easily see that a change has been made, and when it was updated.

Preformatted Text

Preformatted text perserves the formatting from the HTML document using the pre tag. This is usually output in a fixed width font, such as courier, and keeps the spacing and line breaks. It cannot accept tags such as images or objects. Usage for this tag is

<pre>This is some preformatted text
hello, how are you       there's a large space</pre>

Which would give you the output of

This is some preformatted text
hello, how are you       there's a large space

Sub and Superscript

If you want to create numbered footnotes, perhaps display some mathematics on your site, or display some chemistry formulas, then you need to use the sub and sup tags. Subscript will put the content within the tags to half a character below the baseline, and superscript puts the content to half a character above the baseline. For example, to write out the the chemistry symbol for Carbon Dioxide, we would use

CO<sub>2</sub>

Which gives us CO₂

Then to write a mathematical equation, we would use superscript eg.

4x<sup>2</sup> + 2x + 5 = 47

Which gives us: 4x² + 2x + 5 = 47

Writing Addresses

We also have an address tag available for addresses. This can surround an address to signify what it is. This needs to be used in conjunction with the line break tag, to give a typical address like appearance eg.

<address>
1, New Street<br />
New Road<br />
New Town<br />
Some City<br />
England<br />
W4 1TX
</address>

This will then give us the output as

Styling

Of course the visual look of these elements can be controlled with the various CSS that we’ve already covered.

Written by Sarah from Stuff By Sarah
Posted on January 22nd, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

2