Formatting Html Text: HTML Web Development Tutorial Series Part 12

formatting html text

Formatting Html Text

In this lesson, we will be formatting Html text. I do recommend that whenever possible; you use CSS to format text, but there may be times where a quick set of bold or italic tags come in handy. Let’s start off our examples with bold and italic. See the images below.

index.html EXAMPLE 1: FORMATTING HTML TEXT: BOLD AND ITALIC

formatting html text <b>, <strong>, <i>, <em> html

DISPLAYED PAGE EXAMPLE 1

formatting html text bold and italic display

We have five P ELEMENTS in the index.html document. Each one formatting the text in a different way. As you can see, there is virtually no difference between <b> and <strong>, or <i> and <em>. They display in exactly the same way. The difference comes in the level of importance. It is more for the coder’s eyes than anything else. If you use <strong> or <em> tags, you are specifying to yourself or other people working on the same code as you that the text has extra importance. NOTE: em means emphasis. In the next example, we will use superscript and subscript. See the images below.

index.html EXAMPLE 2: FORMATTING HTML TEXT: SUPERSCRIPT AND SUBSCRIPT

formatting text superscript and subscript html

DISPLAYED PAGE EXAMPLE 2

formatting text <sup> and <sub> tags display

We add two more p elements to the index.html document. The first of the two has the TAGS <sup></sup> surrounding the words “superscript text”. These tags define superscript text. Superscript text is used for things like mathematical equations. For example, E=mc2. The text will display a half of a line above the normal line (where it would display normally). Often times it will display in a smaller font. The second new p element contains <sub></sub> tags, which define subscript text. This is basically the opposite of superscript and will display a half of a line below the normal line; often times in a smaller font. Subscript is used for things like formulas. For example, BeCl2. We’ll clear out the Html document for the next two examples. Everything will be included in the end of lesson source code. See the images below.

index.html EXAMPLE 3: FORMATTING TEXT: SMALL AND MARK

formatting text mark and small html

DISPLAYED PAGE EXAMPLE 3

formatting html text mark and small display

The body ELEMENT was cleared out and an h2 and h1 HEADING were added. The h2 has <mark></mark> tags around the word Html. These mark tags define highlighted or marked text. You can surround just one or multiple words that you want to be highlighted with mark tags. The h1 heading has <small></small> tags around the word “smaller”. Small tags define smaller text and it’s clear to see in the Displayed Page Example 3 image, that the word “smaller” is smaller than the other heading text. The final example will use the insert and delete tags for formatting Html text. See the images below.

index.html EXAMPLE 4: FORMATTING TEXT: INSERT AND DELETE

formatting html text insert and delete

DISPLAYED PAGE EXAMPLE 4

formatting html text ins and del

We have three more paragraph elements in the final example. The first two paragraphs use the <ins> and <del> tags. <ins> defines text that is inserted (added). It underlines the text. <del> defines text that is deleted (removed), and adds a strikethrough effect on the text. The third and final paragraph shows an example of a sentence using both the delete and insert elements.

That finishes up this lesson on formatting Html text. Although this tutorial may seem very basic, these elements will be useful down the road and are good to know beforehand. Thanks for reading, we’ll see you next lesson.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Formatting Html Text</title>
</head>
<body>

<p>This is normal text</p>
<p><b>This is bold text</b></p>
<p><strong>This is strong text</strong></p>
<p><i>This is italic text</i></p>
<p><em>This text is emphasized</em></p>

<p>An example of <sup>superscript text</sup> in a paragraph.</p>
<p>An example of <sub>subscript text</sub> in a paragraph.</p>

<h2>Formatting <mark>Html</mark> Text</h2>
<h1>Make text <small>smaller</small></h1>

<p>An example of <ins>inserted text</ins>.</p>
<p>An example of <del>deleted text</del>.</p>

<p>I am learning <del>CSS</del> <ins>Html</ins> right now.

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: