Simple Formatting!

Making things stand out.

Introduction

Content is good. Inevitably we will want to make various parts of it stand out as they are more important. In this section we'll look at various ways we can adjust the look of bits of the content.

In the examples below I have included only the body tag and not the entire HTML page structure (just to keep things simple). When you are experimenting yourself, remember to include the entire HTML page structure.

I will also demonstrate their usage within paragraphs and headings (as those are the only tags we have introduced so far). They may be used just about anywhere within the content of a HTML document however.

Bold

If we would like to make text bold then we use the b tag.

<b>text</b>

bold.html

  1. <body>
  2. <p>Orbitting this at a distance of roughly ninety-two million miles
  3. is an <b>utterly insignificant</b> little blue-green planet whose
  4. ape-descended life forms are so <b>amazingly primitive</b> that they still
  5. think digital watches are a pretty neat idea.</p>
  6. </body>
Bold Text

Orbitting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue-green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

There is another tag <strong> which is intended to give the text importance. Most browsers will render strong text as bold but it is safer to use the b tag.

Italic

If we would like to make text italic then we use the i tag.

<i>text</i>

italic.html

  1. <body>
  2. <p>Only six people in the <i>entire Galaxy</i> understood the principle
  3. on which the Galaxy was governed, and they knew that once
  4. Zaphod Beeblebrox had announced his intention to run as President it was
  5. more or less a <i>fait accompli</i>: he was ideal presidency fodder.</p>
  6. </body>
Italic Text

Only six people in the entire Galaxy understood the principle on which the Galaxy was governed, and they knew that once Zaphod Beeblebrox had announced his intention to run as President it was more or less a fait accompli: he was ideal presidency fodder.

There is another tag <em> which is intended to give the text emphasis. Most browsers will render em text as italic but it is safer to use the i tag.

Underline

If underlining is more your style then you may use the u tag.

<u>text</u>

underline.html

  1. <body>
  2. <p>On the day of the <u>Great On-Turning</u> two soberly dressed programmers
  3. with briefcases arrived and were shown discreetly into the office.
  4. They were aware that this day they would represent <u>their entire race</u>
  5. in it's greatest moment.</p>
  6. </body>
Underline Text

On the day of the Great On-Turning two soberly dressed programmers with briefcases arrived and were shown discreetly into the office. They were aware that this day they would represent their entire race in it's greatest moment.

Superscript

If we would like to format text in superscript then we use the sup tag.

<sup>text</sup>

superscript.html

  1. <body>
  2. <p>In marched a squad of about a dozen men dressed in the remnants
  3. of their Golgafrincham 3<sup>rd</sup> Regiment dress uniforms.
  4. About half of them still carried Kill-O-Zap guns.</p>
  5. </body>
Superscript Example

In marched a squad of about a dozen men dressed in the remnants of their Golgafrincham 3rd Regiment dress uniforms. About half of them still carried Kill-O-Zap guns.

Subscript

If we would like to format text in subscript then we use the sub tag.

<sub>text</sub>

subscript.html

  1. <body>
  2. <p>There is an art, it says, or rather, a knack to flying. The knack
  3. lies in learning how to throw yourself at the ground and miss. Pick a
  4. nice day, <sub>[The HitchHikers Guide to the Galaxy]</sub> suggests,
  5. and try it.</p>
  6. </body>
Subscript Example

There is an art, it says, or rather, a knack to flying. The knack lies in learning how to throw yourself at the ground and miss. Pick a nice day, [The HitchHikers Guide to the Galaxy] suggests, and try it.

Horizontal Rule

Sometimes we may want to separate text out and a good way to do that is to create a line between them. This can be achieved with a horizontal rule which is created with a hr tag.

<hr>

This tag is not a container so it doesn't need a closing tag to go with it.

horizontal_rule.html

  1. <body>
  2. <p>The first non-absolute number is the number of people for whom the table is reserved.</p>
  3. <hr>
  4. <p>The second non-absolute number is the given time of arrival,
  5. which is now known to be one of those most bizarre of concepts.</p>
  6. </body>
Horizontal Rule Example

The first non-absolute number is the number of people for whom the table is reserved.


The second non-absolute number is the given time of arrival, which is now known to be one of those most bizarre of concepts.

In older versions of HTML tags which weren't containers required a slash at the end of the tag ( eg. <hr /> ). This requirement was removed in HTML5.

Nesting of Tags

Now we can introduce a concept called nesting. Nesting is when one container sits entirely within another container. In the example below, the first sentence is nested properly. The second one is not.

nesting.html

  1. <body>
  2. <p>His mouth started to speak, <b><u>but his brain</u></b> decided it hadn't
  3. got anything to say yet and shut it again.</p>
  4. <p>His brain then <b><u>started to contend</b></u> with the problem of what
  5. his eyes told it they were looking at, but in doing so relinquished control
  6. of the mouth which promptly fell open again.</p>
  7. </body>

If you do it the wrong way, pretty much all the browsers will be able to work it out ok but it is not considered correct and elegant HTML.

The exception to this is if the two containers don't fully overlap.

nesting2.html

  1. <body>
  2. <p>Once more gathering up the jaw, <b>his brain <u>lost control</b>
  3. of his left hand</u> which then wandered around in an aimless fashion.</p>
Nesting Example 2

Once more gathering up the jaw, his brain lost control of his left hand which then wandered around in an aimless fashion..

 

(Note: The examples on this page use excerpts from The HitchHikers Guide to the Galaxy by Douglas Adams. If you haven't read it I strongly recommend you do. It is a great read.)

Summary

<b> </b>
Make the text contained within bold.
<i> </i>
Make the text contained within italic.
<u> </u>
Make the text contained within underlined.
<sup> </sup>
Make the text contained within superscript.
<sub> </sub>
Make the text contained within subscript.
<hr>
Create a horizontal rule.
Nesting
Tags should be properly contained within each other.

Activities

Now let's make our content a little more interesting.

  • Take the page you created in the previous section and add some formatting to the content to make certain bits stand out. Apply the formatting to headings as well as paragraphs.
  • Try adding multiple formats to a few words and make sure you are nesting the tags correctly.

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.