HTML Basics: Text Formatting

Using the correct markup or technique for text formatting on a page is often overlooked and subsequently people either underuse or abuse certain tags. For example, there are 3 ways to apply bold formatting to a word – 2 different HTML tags do it by default and a CSS property. When do you use which one? It depends on the nature of the content.

Using Spans

The span tag identifies a group of inline elements to apply styles to. You can only use spans within block level elements and cannot surround a block level element (eg. a paragraph) with a span. The usage of the span tag is

<p>This is normal text and <span class="make_red">this text is red!</span></p>

As you can see, it lets you apply formatting to text quite easily. The span tag does have a lot more uses besides easy text formatting, but for this post this is all we need to cover.

Bold

To make text bold you can use either of the following methods:

<strong>This is bold</strong>
<b>This is bold</b>
<span class="boldclass">This is bold</span>

For the above the boldclass would then be

.boldclass {
    font-weight: bold;
}

As you can see, we have 2 HTML tags – strong and b, and the CSS property font-weight. You may wonder why there are two HTML tags for the same job. The strong tag is there for semantics. It applies a strong emphasis to the text within it and visually changes it to be bold. For example, a screen reader will pick up on the strong emphasis. The b tag is just there for visual change. It visually changes the text within it to be bold and that’s all. When to use which depends on what you want to achieve. If you are simply styling something and need it to look bold, then the b tag (or a CSS style) is more appropriate. If the content is being made bold for a contextual reason, then you should use the strong tag.

The CSS property font-weight can accept a number of properties which I’ve discussed previously in CSS Basics: Font Styling.

Italics

Similar to bold, we have 2 HTML tags for italics along with the CSS property font-style.

<em>This text is emphasised and visually italics</em>
<i>This text is italics</i>
<span class="make_italics">This text is italics</span>

The em tag, as with the strong tag, provides visual emphasis in the form of italics and denotes an emphasis to non visual browsers such as a screen reader, whereas the i tag simply changes the text visually. Again, usage depends on what is suitable.

Abbreviations

When you use an abbreviation you shouldn’t expect everyone to know what it’s an abbreviation for! You can combat this by using the abbr tag along with a title attribute. For example

This is my <abbr title="HyperText Markup Language">HTML</abbr> Basics post.

Visually this would display as

This is my HTML Basics post.

As you can see there is a dotted line below the abbreviation of HTML, and when you hover your mouse over it, you get the full text in a tooltip (unless you’re using Internet Explorer 6). This is not only worthwhile for visitors but also for search engines spiders. I wouldn’t say that you need to convert every version of an abbreviated word on the page. For example if you mention HTML over 10 times, then at least give the full version of the abbreviation the first time it appears.

Acronyms

For those of you who are not aware of the difference between Acronyms and Abbreviations, Acronyms are abbreviations but they become a word themselves. For example NATO, which stands for North Atlantic Treaty Organisation.

Using the acronym tag is pretty much identical to the abbr tag, just change the tag

I know what <acronym title="North Atlantic Treaty Organisation">N.A.T.O.</acronym> stands for!

Blockquotes and Citations

If you want to quote someone or a piece of text off a website, then you should use a blockquote to hold the quoted text, and then cite where or who the text is from. For example, if you wanted to quote a piece of content from an email you received from someone you would use

<p>This is an excerpt from the email I received:</p>

<blockquote><p>I refer to the web site you created for us last week and I have to say it is very good. We've had several good comments from our visitors and already made additional sales because of it!</p>
<cite>Joe Bloggs, The ABC Company</cite></blockquote>

This would then give you:

This is an excerpt from the email I received:

I refer to the web site you created for us last week and I have to say it is very good. We’ve had several good comments from our visitors and already made additional sales because of it!

Joe Bloggs, The ABC Company

Of course the above is also styled with CSS, which you can do as well. For quoting from web pages, the blockquote tag can also contain the attribute cite, which would contain a URL to the web page where the quote comes from. This can then be used in different ways, including being displayed via CSS, but we won’t go into the details of that at this time.

These are just some of the ways you can format your text. Of course there are plenty more, but these are the methods you’re more likely going to need.

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

8