Where Web, Tech & Worship Meet!

Formatting the HTML Way

In today’s blog we’ll discuss formatting text in HTML. If you want to repeatedly format large amounts of text, then you should use CSS (a topic for another day), however if you want to emphasize a few words in a sentence or paragraph then what follows is the way to go.

In all the examples below, the use of the tags described is pretty straightforward. Simply enclose the text you would like emphasized between the start and end tags and the text will automatically be formatted.

Bold Text
There are two tags in HTML that bold text. They are the <b> </b> and <strong> </strong> tags. Which one you use is purely a matter of personal preference.
Code:  This how we <b>bold</b> text.
Result:  This is how we bold text.

Italic text
To italicize text the <em> </em> tags are used.
Code:  This is how we <em>emphasize</em> text.
Result:  This is how we emphasize text.

Highlighted Text
To highlight text the <mark> </mark> tags are used.
Code:  This is how we <mark>highlight</mark> text.
Result:  This is how we highlight text.

Small Text
To make text smaller the <small> </small> tags are used.
Code:  This is how we make text<small>smaller</small>.
Result: This is how we make text smaller.

Deleted Text
To show deleted text, the <del> </del> tags are used.
Code:  This is how we show <del>deleted</del> text.
Result: This is how we show deleted text.

Subscripted Text
To show subscripts the <sub> </sub> tags are used.
Code:  This is how we show <sub>subscripted</sub> text.
Result:  This is how we show subscripted text.

Superscripted Text
To show superscripts the <sup> </sup> tags are used.
Code:  This is how we show <sup>superscripted</sup> text.
Result: This is how we show superscripted text.

Combination Formatting
Two or more of these tags can be combined together if needed. That's done by "nesting" the tags as shown in the example below:

Code: This is an example of <b><sup><del>nested</b></sup></del> formatting tags.
Result: This is an example of nested formatting tags.


Please let me know in the comments below if you've found this post useful (or not) and if you have any follow up questions.

If you would like to sign up to be notified as soon as new posts are published please click HERE.


Facebook Page Update

Thanks to all of you who have liked the IT4Worship Facebook page. I now only need 7 more likes of the page to start receiving reader statistics.

After you have liked the page, let me know via email and I'll send you a set of 4 landscape images that are perfect for displaying on your websites or in graphics for sermons, slides, etc. The images are royalty- and attribution-free so you can use them however you like.