codescracker


html

HTML Text Formatting



« Previous Tutorial Next Tutorial »


HTML provides a number of tags such as HEAD and BODY to define the structure and appearance of a document. By default, the HTML document is stored in the plain text format, it means that it does not contain any type of formatting. To format the text in an HTML document, you need to use the various kinds of HTML tags.

Formatting the text not only enhanced the visual appearance of the content but also improves the readability and comprehensibility.

The content of a formatted document is presented in an organized manner, which allows readers to easily differentiate between various types of information. For instance, any important piece of information in an HTML document can be enclosed between B or I tags to make it appear in bold or italics respectively.

Sometimes, you may need to highlight, mark or emphasize certain important or technical terms to differentiate them from the normal text content. So HTML provides you with the MARK and the EM tag to highlight and emphasize the text content.

HTML Text Formatting Tags

HTML provide a set of tags to change the appearance of the text by applying various formatting features, such as bold, italics, subscript, and superscript. These HTML tags are used with starting and ending tags.

HTML Text Formatting Example

The following example shows the use of HTML text formatting, here the opening tag <I> indicates the start of the italicized text and the closing tag </I> marks the end of the italicized text :

<I> This text is in Italics </I>

Generally, HTML formatting tags are divided into the following two categories:

HTML BOLD and STRONG Text Formatting

The HTML <b> and <strong> tags are used to define bold and important text in HTML. Here is an example shows how to format text in an HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Formatting Example</title>
</head>
<body>

<p>You can create <b>bold (not important)</b> and 
<strong>bold (important)</strong> text using <b>
and <strong> tag.</p>

</body>
</html>

Here is the sample output produced by the above HTML Bold and Strong text formatting example code:

html bold and strong texts

HTML ITALIC and Emphasized Text Formatting

The HTML <i> and <em> tags are used to define italic and emphasized texts in HTML. Here is an example uses i and em tag to show how to format text in an HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Formatting Example</title>
</head>
<body>

<p>You can create <i>italic (not important)</i> and 
<em>emphasized (important)</em> text using <i>
and <em> tag.</p>

</body>
</html>

Here is the output of the above HTML italic and emphasized text formatting example code:

html italics and emphasized texts

Important - Use <strong> and <em> to specify text as an important text and <b> and <i> as a bolded and italics texts.

HTML SMALL Text Formatting

The HTML <small> tag is used to define small text in HTML. Here is an example used small tag to show how to format text:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <small>small</small> text.</p>

</body>
</html>

Here is the sample output of the above text formatting example code:

html small formatting

HTML MARKED Text Formatting

The HTML <mark> tag is used to define marked text in HTML. Here is an example of text formatting in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <mark>mark</mark> text.</p>

</body>
</html>

Following is the sample output of the above HTML text formatting example using HTML mark tag:

html mark formatting

HTML DELETED Text Formatting

The HTML <del> tag is used to define deleted text in HTML. Here is an example of text formatting in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <del>deleted</del> text.</p>

</body>
</html>

Below is the sample output produced by the above deleted text formatting example code:

html deleted formatting

HTML INSERTED Text Formatting

The HTML <ins> tag is used to define inserted text in HTML. Here is an example of HTML text formatting using ins tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <ins>inserted</ins> text.</p>

</body>
</html>

Here is the sample output produced by the above HTML inserted text formatting example code:

html inserted formatting

HTML SUBSCRIPT Text Formatting

The HTML <sub> tag is used to define subscripted text in HTML. Following is an example of HTML text formatting using sub tag:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

Below is the sample output produced by the above HTML text formatting using sub tag example code:

html subscripted formatting

HTML SUPERSCRIPT Text Formatting

The HTML <sup> tag is used to define superscripted text in HTML. Here is an example of sup tag to format text in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Text Formatting Example</title>
</head>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

Following is the sample output produced by the above HTML superscripted text formatting example code:

html superscripted formatting

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test