Free web tools

Styling text

In this tutorial we'll look at 6 different HTML tags to quickly style and format your text as well as related CSS that can be used to replace them.

Superscript and subscript

The <sup> tag allows you to move text higher compared to the rest of the text around around. This has obvious uses in equations. Here is a quiz example:

This HTML will output:

Similarly <sub> makes the text lower compared to the rest of the text:

This HTML will output:

Bold and Strong

To make text bold you can wrap it in <b> tags:

This shows as:

This tag can be replaced with the following CSS:

<style type="text/css">
span.bold { font-weight:bold; }
</style>
<span class="bold">This is bold, but uses CSS!</span>

This shows as:

The <strong> tag will too, in most browsers, display text as bold:

This shows as:

So they're both the same, right? Wrong. <strong> is an example of a logical HTML tag. These do not represent the display or look of the text but rather the function of it. So why use them? The main reason is accessibility - screen readers in particular will render logical tags, for example text in <strong> tags may be spoken louder. Text only or SEO browsers will too look at and treat logical tags differently, using them to decide what a page is about.

The <b> tag is an example of a physical (or presentational) tag. These types of tags describe how the text should look.

Italics and Emphasis

To make text italic you simply wrap it in <i> tags:

This shows as:

This tag can be replaced with the following CSS:

<style type="text/css">
span.italic { font-style:italic; }
</style>
<span class="italic">This text is in italics, but uses CSS!</span>

This shows as:

The <em> tag is another example of a logical tag, most browsers will display it in italics:

This shows as:

Like <b>, <i> is a physical tag and should only be used when you want text to display in italics.

<em> should be used to emphasise text rahter than displaying it a certain way.