Core HTML

Lesson 5: Modifying Text

Overview

In this HTML lesson, we demonstrate various methods of modifying text within a document. First, we show how to use the editing elements: insert and delete. Then we demonstrate how to use the emphasis and strong elements to give emphasis to portions of text within a document. Next, we compare the delete, insert, strong, and emphasis elements to the strikethrough (s), underline (u), bold (b), and italicize (i) elements, respectively, to show that they are stylistically the same elements. However, the usage of the s, u, b, and i elements is discouraged because they describe styles rather than purposes. Similarly, we explain that the big and small elements are likewise discouraged for being stylistic. Finally, we demonstrate the mark element and how inline elements can be nested.

Editing Elements

We can put editing elements on a document to record the editing operations: delete and insert. Deletion are shown as a strikethrough on text and insertions appear as underlined text. These are both inline elements.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>How are the mighty fallen, and <del>some other stuff happened too!</del><ins>the weapons of
    war perished!</ins> (2 Samuel 1:27 RSVCE)</p>
  </body>
</html>
 

Output

 

Qualifying Elements

In addition to editing elements, we can use the emphasis and strong elements to emphsize a portion of text. The emphasis, given by em, provides a slight emphasis, while the strong element provides greater emphasis. The emphasis, or em, element is displayed as italicized text, and the strong element is displayed as bold text. These are both inline elements.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Thy glory, O Israel, is <em>slain</em> upon thy high places! How are the <strong>mighty
    fallen!</strong> (2 Samuel 1:19 RSVCE)</p>
  </body>
</html>
 

Output

 

Content Versus Presentation

The delete (del), insert (ins), strong (strong), and emphasis (em) elements are stylistically the same as the strikethrough (s), underline (u), bold (b), and italicize (i) elements, respectively. However the former are preferred because they describe a function rather than a style. The strikethrough (s), underline (u), bold (b), and italicize (i) elements are stylistic designations. Therefore, their use us discouraged since styling is supposed to be left to Cascading Style Sheets.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Before a man are life and <del>tacos</del> <ins>death</ins>, and <strong>whichever he
    chooses</strong> will be <em>given to him.</em> (Sirach 15:17 RSVCE)</p>
  </body>
</html>
 

Output

 

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Before a man are life and <s>tacos</s> <u>death</u>, and <b>whichever he chooses</b> will be
    <i>given to him.</i> (Sirach 15:17 RSVCE)</p>
  </body>
</html>
 

Output

 

Big and Small Elements

Like the other stylistic elements, the usage of the big and small elements is discouraged. Instead, this type of behavior should be specified in CSS.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>He has placed before you <big>fire and water</big>: <small>stretch out your hand</small> for
    whichever you wish. (Sirach 15:16 RSVCE)</p>
  </body>
</html>
 

Output

 

Mark Elements

The mark element can be used to mark a section of text, much like yellow highlight marker. This is an inline element which can be nested with the other inline elements, as we demonstrate with this example.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Before a man are life and <del>tacos</del> <ins>death</ins>, and <mark><strong>whichever he
    chooses</strong> will be <em>given to him.</em></mark> (Sirach 15:17 RSVCE)</p>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.