Submodule 1.3: Simple HTML file : Text formatting

Text formatting

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

These elements are:

Strong and bold: , 
Italic and emphasized: , 
Subscript and Superscript : , 
Inserted and Deleted: <ins>, <del>
Small: 
Marked:

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

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

Subscript  and Superscript are used for offsetting.  moves the text down, it defines subscript text.  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  tag defines smaller text. It makes the specific text appear smaller from its surrounding text.

Marked  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

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

Solution:

Web Design [HTML]

Text formatting

Example

Giới thiệu

Dịch vụ

Download App MightyID