Formatting text using HTML

Formatting text using HTML

HTML derives from the traditional word-processing language – ‘mark-up’. Such a language offers plenty of procedures for changing font size, justification, colour, etc. In this tutorial we will examine those methods for formatting text within your HTML document.

HTML only!

At this point it would be worth pointing out that many of the methods out-lined within this tutorial, could be easily dropped and replace with CSS (Cascading Style Sheets). However, I feel it important to show you all methods so that your knowledge will have a strong foundation as well as a sure appreciation of CSS.

Open up your source editor and work through the following examples.

Font formatting: Bold, Italic & Underline

Bold text

Code:

<b>This is bold.</b> This isn't.

Result: This is bold. This isn’t.

Note: You can also use <strong></strong>.

Italic text

Code:

<i>This is italic.</i> This isn't.

Result: This is italic. This isn’t.

Note: You can also use <em></em>.

Under-lined text

Code:

<u>This is underlined.</u> This isn't.

Result: This is underlined. This isn’t.

Combining formatting together

Code:

<u><b><i>Bold and italic.</i></b></u>

Result: Bold and italic.

In the above example, take note of the way in which a tag is place within another tag to combine formatting text methods. Although the order in which the bold, italic or underline appear within the code is not important, it is vital that each tag closes in the reverse order that they opened. Think of it like this:

You have a box (tag), you place another box (tag) inside of the first. They both can’t be on the inside or outside at the same time, one must be inside the other. Confused? Well, that’s what a web-browser will be if you mess up the sequence.

Tag syntax:

Incorrect example:

<b><i>Text</b></i>

Correct example:

<b><i>Text</i></b>

Formatting text layout

Paragraphs

Code:

<p>Separate Paragraph.</p>

Result:

Separate Paragraph.

Line Breaks

Code:

This is line 1.<br>This is line 2.

Result: This is line 1.
This is line 2.

Please note: In the above example, the ‘br’ or ‘line-break’, will not require a container as doesn’t apply itself to any particular word, line or paragraph of text.

Font Color & Size

Font-Color

Code:

<font color="#ff6600">Orange Text.</font>

Result: Orange Text.

Font-Size (from 1-7)

Code:

<font size="5">Big Text.</font>

Result: Big Text.

Combining formatting together

Code:

<font size="5" color="#ff6600">Big Orange Text.</font>

Result: Big Orange Text.

Text Alignment

Left-aligned Text

Code:

<div align="left">Left Align</div>

Result:

Left Align

Right-aligned Text

Code:

<div align="right">Right Align</div>

Result:

Right Align

Center-aligned Text

Code:

<div align="center">Center Align</div>

Result:

Center Align

Headings – Header Tags (1(largest) – 6)

Code:

<h2>This is a heading</h2>

Result:

This is a heading

Please note: In the above example, the ‘h2’ (or any other ‘hx’ tag) automatically results in a line break after the text within the tag.

Bullet Points & Numbers

An un-ordered List

Code:

<ul>
<li>Point 1
<li>Point 2
<li>Point 3
</ul>

Result:

  • Point 1
  • Point 2
  • Point 3

An Ordered List

Code:

<ol>
<li>Point 1
<li>Point 2
<li>Point 3
</ol>

Result:

  1. Point 1
  2. Point 2
  3. Point 3

An Ordered List starting from…

Code:

<ol start="5">
<li start="5">Point 1
<li>Point 2
<li>Point 3
</ol>

Result:

  1. Point 1
  2. Point 2
  3. Point 3

Closing note

Now that you have experimented with text formatting, try to put together a fully formatted document using only a source editor and test the results. My best advice for formatting the text on a webpage would be: KEEP IT SIMPLE!

Leave a Reply

Your email address will not be published. Required fields are marked *