Lesson 13: Text Formatting

Overview

In this HTML lesson, we present the method for formatting text via elements. Recall that text inside the text elements that we have seen has its formatting removed. To fix this, we have elements, like the line-break, and entities, like the non-breaking space, to help us. Additionally, we can use horizontal rule elements to improve the presentation of text. To allow the browser to split words when wrapping text at line endings, we can use the word break element. Finally, we can use subscript and superscript elements to allow us to format basic math formulas and footnotes.

Basic Text Formatting

In this first HTML example, we demonstrate how to format text with endlines, spacing, and horizontal rules. The line-break element is designated by a br and it is self-closing; it puts an endline within an element as we see below. The non-breaking space is an HTML entity, and it can be used to insert spaces within an element. Here, we use several non-breaking space entities in succession to create a larger space in order to create indented lines. Lastly, we put an horizontal rule under the heading to make the document more appealing.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Isaiah 53:10-12</h1>
    <hr />
    <p>
Yet it was the will of the Lord to bruise him;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;he has put him to grief;<br />
when he makes himself an offering for sin,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;he shall see his offspring, he shall prolong his days;<br />
the will of the Lord shall prosper in his hand;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;he shall see the fruit of the travail of his soul and be
satisfied;<br />
by his knowledge shall the righteous one, my servant,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;make many to be accounted righteous;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and he shall bear their iniquities.<br />
Therefore I will divide him a portion with the great,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and he shall divide the spoil with the strong;<br />
because he poured out his soul to death,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and was numbered with the transgressors;<br />
yet he bore the sin of many,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and made intercession for the transgressors.<br />
    </p>
  </body>
</html>

Output

Word Breaks for Wrapping

Our second example demonstrates word breaks. When lines of text are formatted in a browser, they are wrapped and of the page. If there are long words in a text docuement, we can end up with large whitespaces at the end of our lines. This often undesirable because it looks sloppy. Unfortunately, the browser has no way of determining how it should break within a word, unless we designate a potential break with a word break element. The word break element tells the browser that it is allowed to break a word at a given point, but it does not force such a break. This example has been sized and a border has been added to make the word break more apparent. Without the word break element, the word transgressors would wrap in its entirety.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Isaiah 53:12</h1>
    <p style="width:300px; border: 1px solid black;">
Therefore I will divide him a portion with the great,
    and he shall divide the spoil with the strong;
because he poured out his soul to death,
    and was numbered with the trans<wbr />gressors;
yet he bore the sin of many,
    and made intercession for the transgressors.
    </p>
  </body>
</html>

Output

Subscripts and Superscripts

Subscripts and superscripts allow us to write simple formulas and add footnotes to HTML documents. In this example, we use the subscript and superscript elements to write the formula for the terms in a geometric sequence. Each term in a sequence has an index, which we denote with a subscript. Exponentials, which are used in geometric terms, are given by superscripts. The formula is written in a paragraph element and an h1 element to show that we can use subscripts and superscripts in either one.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Geometric Sequence</h1>
    <p>a<sub>1</sub> = a, a<sub>n</sub> = ar<sup>n-1</sup></p>
    <h1>a<sub>1</sub> = a, a<sub>n</sub> = ar<sup>n-1</sup></h1>
  </body>
</html>