HTML Lesson 5: Formatting

1
19

Introduction to Formatting

In the last lesson you learned about the HTML Text and here you will learn how to format the text in HTML. You can format text in many ways using HTML Formatting elements. By formatting text, you can either make it look more important to draw attention or more suave to leave a different type of impression. Let’s explore the different types of formatting and their differences.

Bold and Strong Text

To make text bold, you can either use <b> or <strong>. It’s important to understand the difference, because from the outside looking in, both these elements do the exact same thing. While this may be the case in most instances, the fundamental difference is that Bold text is a style while Strong Text is semantic – it describes the text it surrounds (“this text should be stronger than the rest of the text you’ve displayed”). Let’s take in consideration the follow three situations:

  • Web Browsers
  • The Visually Impaired
  • Mobile Phones

Both Bold text and Strong text look the same in Web Browsers, however for visually-impaired people using your website via a speaking program such as Jaws, Strong text plays an important role. For the blind, Strong text could mean a lower speaking tone. In addition to this, let’s touch upon the subject of mobile phones such as a palm pilot (yes I know it’s outdated). Text appears bold in a palm pilot because the device is so small. Because of this, you can’t bold the bold text, however by using Strong text there will be some sort of mark to distinguish the text (such as an underline). In short, we recommend using Strong text over Bold text for reasons of accessibility.

Let’s check them out in action:

Source Code Output
Bold Text
Strong Text

Understanding the main difference between these two elements separates you from a big percentage of web designers out there. Congratulations!

Italic and Emphasized Text

Okay since we already went off on the differences between styling and semantics in the previous portion of this tutorial, I won’t do it again. Just know that to italicize text you can use the HTML <i> element. This will style the text! To create the same italicized effect in addition making your website more accessible, use the HTML <em> Element. Of course we recommend the <em> Element for accessibility reasons.

Let’s take a gander:

Source Code Output
Italic Text
Emphasized Text

Marked

There are a couple ways to highlight or mark text in HTML. The simplest way to do this is to use <mark> element. This element was introduced in HTML5 to make text more prominent.

Source Code Output
Marked Text

Please note Yellow color is a default color and you can change it. To do so, wait for the Colors lesson.

Delete Text vs Strike-though text

Deleted Text

Deleted text is defined as a representation of the text that has been removed from the web page. This text by default has a line going through the middle of it. To represent deleted text in HTML, use the <del> element. Let’s look at the example below:

Source Code Output
Delete Text

When would you use the <del> element? Well, it would be perfect for the following instances:

  • To record changes to an official document such as amendments to a law.
  • To note changes to an article — in addition to journalistic corrections, this helps to maintain editorial integrity and avoid charges of “rewriting history.”
  • To indicate the changes between two versions of a document.
  • It is important to note that this is the Semantic friendly tag that goes hand in hand with the Inserted Text element. However before we discuss that, let’s quickly discuss strike-through text.

Strike-through

Strike-through text (defined with the <strike> element) by default creates the same styling effect as the <del> element, however you lose all the semantics that go with it. However, <strike> has found a purpose in the world of web design, as it is often use to denote sarcasm.

Source Code Output
Wikiprogramming is absolutely useless the best programming tool in the world!!

Wikiprogramming is absolutely useless the best programming tool in the world!!

Conclusion

Now that you have a general idea of what the difference between these two elements is, let’s talk about inserted text.

Inserted text

Inserted text works seamlessly with deleted text and represents the new (or inserted) text in the webpage. To define text as inserted text, use the <ins> element. By default, this text will be underlined.

Source Code Output
This text is Inserted.

Superscripted text

Superscripted text appears slightly up and font size is small as compared to normal text. To superscript text HTML <sup> element is used. Its best usage is in writing algebraic equations. For example, if you want to show x to the power 1. Here is a demonstration of it:

Source Code Output
x1

Subscripted text

Subscripted text is opposite to superscript text because it appears below the line, also the font size is also smaller than normal text. To subscript text HTML <sub> element is used. You can use it for writing algebraic equations or chemical formula. Here is a practical demonstration of it:

Source Code Output
xi+1
H2O

Computer Code

To add Computer Code in your text, use the HTML <code> element. This is a good method to display programming code as a reference within your HTML page. Actually, HTML do not consider programming code as a part of text, therefore; <code> tag helps you to add programming codes into your website.

Source Code Output
This is a Computer Code.

Summary

  • Create text that stands out with HTML formatting techniques.
  • Use <b> to bold text (stylize).
  • Use <strong> to make text strong (semantic).
  • Use <i> to make text italic. (stylize)
  • Use <em> to emphasize the text (semantic).
  • To highlight text use the <mark> element.
  • Delete text with <del> (semantic).
  • Use <ins> to insert text (semantic)
  • Use <sup> to make text SuperScript.
  • Use <sub> to SubScript text.
  • Use <code> to write compute code in HTML.

Next Lesson

Its been quite a long lesson for you. Have a little break and in the next lesson we will learn about HTML Text links.

1 COMMENT

  1. […] the next lesson we will learn how to format the text in HTML. Let’s get started HTML Formatting […]

Leave a Reply