Formatting Text in HTML 5
HTML5 Basics - Part 5
Forward: In this part of the series, I explain the basics of HTML5 text formatting.
By: Chrysanthus Date Published: 21 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
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. 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>
<b>This text is bold</b><br /><br />
<strong>This text is strong</strong><br /><br />
<i>This text is italic</i><br /><br />
<em>This text is emphasized</em><br /><br />
This text is <sub>subscript</sub><br /><br />
This text contains <sup>superscript</sup><br /><br />
</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:
<b>This text is bold</b>
If you look at the code, you would notice that after each of the eight 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 its 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:
<strong>This text is strong</strong>
<small>This text is small</small>
<i>This text is italic</i>
<em>This text is emphasized</em>
This text is <sub>subscript</sub>
This text contains <sup>superscript</sup>
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.
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
The DEL Element
The DEL element draws a line across text. Consider the following code:
<body>
The cost has been reduced from <br />
<del>$500</del> to 400.
</body>
The DEL element encloses “500” in the code. The DEL element is a double pair element. The browser will draw a line across 500.
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 chapter gives you, then you should use Cascaded Style Sheet. I do not cover Cascaded Style Sheet in this series.
Let us stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT