HTML Text Formatting And Styles

HTML provides the ability for formatting text just like you can do in MS Word, or any other text editing software.

Formatting elements were designed to display special types of text:

bold 

italic 

underline <ins>

marked 

superscript 

subscript 

small 

deleted <del>

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p><b>The text can be bold.</b></p>
<p><i>The text can be italic.</i></p>
<p><ins>The text can  be underlined.</ins></p>
<p><mark>The text can be highlighted.</mark></p>

<p>The normal text
<sup>This text will be super scripted</sup>
The normal again.</p>

<p>The normal text
<sub> The text can be subscripted.</sub></p>
<p>Normal Text <small> Smal Text. </small></p>
<p><del> The text can be deleted.</del></p>

</body>

</html>

Output:

HTML Text Formatting

The text can be bold.

The text can be italic.

The text can be underlined.

The text can be highlighted.

The normal text ^{This text will be super scripted} The normal again.

The normal text _{The text can be subscripted.}

Normal Text Smal Text.

~~The text can be deleted.~~

What else you can do with the text?

HTML Styles

Setting the style of the HTML elements can be done with the style attribute (more about the style attribute you can find in my previous post).

a) Changing colour (to see more about HTML colours click here and here.)

b) Changing the font family (the CSS font-family property defines the font for an element.

Note: The HTML  tag is not supported in HTML5. You should use CSS instead.)

c) Changing the text size.

d) Changing the text position.

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Text Formatting</title>
</head>

<body>

<p style="color:blue">The text can be blue. </p>

<p style="font-family:Arial"> The text can be in Arial. </p>

<p style="font-size: 55"> The size can be changed by style tag. </p>

<p style="text-align:center">

This position is changed by style tag.</p>

</body>
</html>

Output:

HTML Text Formatting

The text can be blue.

The text can be in Arial.

The size can be changed by style tag.

This position is changed by style tag.

Enjoy coding!

Share this: