Text Formatting

Nesting Elements

Elements can be put (nested) inside the content of other elements. The most common example of this is the <body> and <head> elements nested within the <html> element.

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Nesting helps group elements and apply multiple effects to the same bit of text. This is how we can format text.

<p>The <b>quick</b> brown fox jumps over the <b>lazy</b> dog.</p>

The quick brown fox jumps over the lazy dog.

How Not To Nest Elements

Nested elements must be completely inside their parent element. This means the opening and closing tags of nested elements must both be within the the opening and closing tags of the parent element. Otherwise, it will not work properly. Here is an example where nesting is done incorrectly:

<p>Hello <i>World!</p></i>

To fix this, the  closing tag must be put within the  element.

<p>Hello <i>World!</i></p>

Bold

There are two elements for bolding text:  and . They appear identical, but  has an emphasis on screen readers while  does not.

<p>The <b>quick</b> brown fox jumped over the <b>lazy</b> dog.</p>
<p>The <strong>quick</strong> brown fox jumped over the <strong>lazy</strong> dog.</p>

The quick brown fox jumped over the lazy dog.

Italics

There are two elements for italicizing text:  and . They appear identical but  has an emphasis on screen readers while  does not.

<p>The <i>quick</i> brown fox jumped over the <i>lazy</i> dog.</p>
<p>The <em>quick</em> brown fox jumped over the <em>lazy</em> dog.</p>

The quick brown fox jumped over the lazy dog.

Underline

The  element is used for underlining text.

<p>The <u>quick</u> brown fox jumped over the <u>lazy</u> dog.</p>

The quick brown fox jumped over the lazy dog.

Subscript and Superscript

The  element is used for subscript and the  element is used for superscript.

<p>This is <sub>subscript</sub> and this is <sup>superscript</sup>.</p>

This is _subscript and this is ^superscript.

Code

The <code> element is used for displaying code. This will usually apply a monospace font to the text.

<p>The <code>quick</code> brown fox jumped over the <code>lazy</code> dog.</p>

The quick brown fox jumped over the lazy dog.

Pre Element

The <pre> element is used to properly display whitespace. <pre> is short for preformatted.

<pre>This will 
                        keep all the line   breaks     and
    spacing.</pre>

This will 
                            keep all the line   breaks     and
    spacing.

Pre and Code

Often, code blocks will contain large amounts of whitespace. So, the <code> element can be nested inside a <pre> element for code blocks.

<pre><code>def add(a, b):
    result = a + b
    return result</code></pre>

def add(a, b):
    result = a + b
    return result