Print this chapterPrint this chapter

Submodule 1.3: Simple HTML file

Text formatting

Text formatting elements are used to display text with special meaning.

These elements are:

  • Strong and bold: <strong>, <b>
  • Italic and emphasized: <i>, <em>
  • Subscript and Superscript : <sub>, <sup>
  • Inserted and Deleted: <ins>, <del>
  • Small: <small>
  • Marked: <mark>

The first pair <strong> and <b> would have the same outcome on the page. Both will make the text appear bold. However, semantically they do not represent the same thing. <b> is used just to make a text appear bold and it can be used for random reasons. <strong> on the other side, has semantic importance and it is used when we want to emphasize the importance of the specific text.

Italic <i> and emphasized <em>, will both make the text appear italic. However, similar to our previous example, they are semantically different. <i> is used to make a text italic without any special meaning. <em> on the other side emphasizes the importance of the specific text.

Subscript <sub> and Superscript <sup> are used for offsetting. <sub> moves the text down, it defines subscript text. <sup> moves the text up, it defines superscript text.

Inserted <ins> and Deleted <del> are used to illustrate edits. <ins> defines inserted text within a document. It is displayed in the browser by underlining the specific text. <del> defines deleted text within a document and it is displayed by a line which strikes through the specific text.

Small <small> tag defines smaller text. It makes the specific text appear smaller from its surrounding text.

Marked <mark> tag defines marked text. It is displayed by highlighting in yellow the specific text.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Formating text</title>
  </head>
  <body>
    <h1>Text formatting</h1>
    <p>
       <strong>Strong </strong> text <br>
       <b>Bold </b>text <br>
       <em>Emphasized </em> text <br>
       <i>Italic </i> text <br>
       <sub>Subscript </sub> text <br>
       <sup>Superscript </sup> text <br>
       <ins>Inserted </ins> text <br>
       <del>Deleted</del> text <br>
       <small>Small</small> text <br>
       <mark>Marked</mark> text <br>
    </p>
  </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as  exersice01.3.04.html in the folder "Exercises"
  2. Modify the file. The browser's output, should be as shown in the following image: 

 

Solution: