HTML Text Formatting Basics

Basics of HTML 5 - Part 4

Foreword: In this part of the series, I explain the basics of HTML5 text formatting.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

Formatting text refers to the ways of presenting text. For example, you may want to have text underline or bold. When you are writing a poem, you would want to put text in particular position on the line of the page; this is also a formatting situation. In this part of the series, I explain the basics of HTML5 text formatting. I assume you have read the previous parts of the series before reaching here; this is a continuation.

Formatting text with HTML5
You can do limited formatting with HTML5. You are not even advised to do serious formatting with HTML5. If you think that your web page needs a lot of formatting (presentation), use what is called, Cascaded Style Sheet. Cascaded Style sheet will not be covered in this series. Everything being equal, I will teach you that in a different series (volume). What I give you in this part of the series, is what you can use to format text using HTML5. If you want more power, you would have to use Cascaded Style Sheet.

Characters of Text
Try the following Code (save and open in browser).

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
 This text is bold 
 This text is strong 
 This text is italic 
 This text is emphasized 
 This text is subscript 
 This text contains superscript 
 </body>
</html>

What interest us here, is what is in the body element of the web page code. There are six lines in the body element. I assume that you have tried the code.

In your browser, you should see the first line bold. To bold text, use the b tag pair as follows:

 This text is bold

If you look at the code, you would notice that after each of the six lines you have a pair of line-break elements. The first line-break element of the pair, forces anything on its right to the next line at the browser. The second line break element forces anything that is to appear on its right to the next line. Since there was nothing on the left, a new line is created below the previous line of text at the browser. The other pairs of line break elements behave in the same way. Let us continue with text formatting.

All the elements in the Body element are double tag elements. The rest of the elements in the Body Element are:

 This text is strong

 This text is italic

 This text is emphasized

 This text is subscript

 This text contains superscript

The best way to appreciate what these elements are, is to look at the display of the web page and then look at the corresponding tag pair above. The b and the strong tags are similar in effects. You are advised to be using the strong element because the b element may soon become obsolete.

The i element displays the text in italic. The em element is for emphasis (stress emphasis). The sub element is for subscript and the sup element is for superscript.

The q Element
This is a doubled-tag element that changes into enclosing double quotes at the browser. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
 <title>Illustration</title>
</head>
<body>

 He said, <q>I am a humble man.</q>

</body>
</html>

The small Element
The double-tag small element is used to make its text content small (small print). Try the following code:

<!DOCTYPE HTML>
<html>
<head>
 <title>Illustration</title>
</head>
<body>

 Normal text small text

</body>
</html>

The DEL Element
The DEL element draws a line across text. Consider the following code:

<!DOCTYPE HTML>
<html>
<head>
 <title>Illustration</title>
</head>
<body>

 The cost has been reduced from 
<del>$500</del> to 400.

</body>
</html>

The DEL element encloses “500” in the code. The DEL element is a double tag element. The browser will draw a line across 500. You should try the code.

The pre Element
Remember that if you type more than one consecutive space in your text editor, the browser will reduce them to one. There is an element called the pre element, which is a double tag element. If you type more than one space in this element, the browser will display the spaces. The Spacebar key of the keyboard is respected within this element; that is, if you press the Spacebar key while typing in your text editor, the browser will respect it and display a number of spaces equal to the number of times you pressed the key. This is an exception, because pressing the Spacebar Key more than once has no effect at the browser within any other element. The following code shows the pre element with text inside a text editor.

<pre>
 love
 love love love
 love

 love
 love love love
 love
</pre>

Inside the pre element above, you have the word, “love”, repeated in a pattern. Now, because all that is in the pre element, the browser will display it as you have typed in the pre element. The browser will display it as follows:

 love
 love love love
 love

 love
 love love love
 love

Conclusion
We have looked at some HTML5 formatting tags in this part of the series. There are other formatting tags. However, if you want more formatting than what this tutorial gives you, then you should use Cascaded Style Sheet. I cover Cascaded Style Sheet in a different series.

Chrys

Broad Network

Related Articles

HTML Text Formatting Basics

Basics of HTML 5 - Part 4

Introduction

Related Links

Comments