HTML Text

The HTML text elements are to display text information in an HTML page. Every text document (e.g., MS Word) have headings, subheadings, and text contents in the form of sentence, paragraphs.

HTML Headings

HTML has the following headings and sub-headings where <h1> being the largest and <h6> being the smallest heading. The size and font type of each can be modified with CSS.

<h1> - Largest heading
<h2>
<h3>
<h4>
<h5>
<h6> - Smallest heading

Text Contents

The text contents are paragraphs with sentences and quotes. In HTML, following tags are used

<p> - for paragraph
<blockquote> or <q> - for quote

Formatting Text Contents

HTML elements other than headings and paragraphs are used to format the text contents inside an HTML documents.

Acronyms and Abbreviations: The text content sometimes contains acronyms or abbreviations. It is short form of a longer name or title. The HTML uses two tags to display the full title of the abbreviation.

<acronym> …. <acronym>
<abbr> … </abbr>

Example #1

Here are some examples of formatting text contents.

<acronym title="United Nations Environment Programme">UNEP</acronym>
<abbr title="United Nations Environment Programme">UNEP</abbr>

Output # 1

Italic Text Contents

There are many HTML tags that shows text contents in italic, but their purpose are different. Here is a list of such HTML tags.

Example #2

Here are examples of italicized text.

Italic text (<i></i>)

<p> This paragraph contains <i>Italic </i> word.</p>

This paragraph contains italic word.

Emphasis (<em></em>)

<p>In this paragraph, a word is <em>important</em> so it is emphasized.</p>

In this paragraph, a word is important, so it is emphasized.

Definition (<dfn></dfn>)

<p> <dfn>Orange<dfn> is a citrus fruit.</p>

Orange is a citrus fruit.

Address (<address></address>)

<address>
   <p>First Name : John</p>
   <p>Last Name: Peterson</p>
   <p>City: London</p>
   <p>Street: 101, Baker street</p>
   <p>Phone: 111-3344<p>
   <p>Email: <a href="mailto:[email protected]"> john</a></p>
</address>

Citation (<cite></cite>)

<p> Mark Twain was an American writer. He wrote <cite>The Adventures of Tom Sawyer</cite> in 1876.</p>

Mark Twain was an American writer. He wrote The Adventures of Tom Sawyer in 1876.

Bold Text Contents

Some text contents are shown in bold to put more emphasis or to show importance of the text. The HTML tags used to do this are

Example #3

These are some examples of bold text content.

Bold (<b></b>)

<p>This is a <b>bold text</b> content. </p>

This is a bold text content.

Strong (<strong></strong>)

<p> This text has certain <strong>words</strong> that has strong importance. </p>

This text has certain words that has strong importance.

Superscript & Subscript

The superscript and the subscript are very important when you want to write a scientific or mathematical equation.

To write “A squared” which is A² and “A subscript 2” is A₂ use following tags

Example #4

These are examples of subscripts and superscripts.

Subscript ()

<p>A<sub>2</sub>

Superscript ()

<p>A<sup>2</sup>

Computer Code Tag

There is a tag that can be used to show computer codes.

Example #5

The example below shows how to use <code> tag to display computer codes.

Computer Code (<code></code>)

<p>The following is computer code. </p>
<code>#include "stdio.h"</code>

The following is computer code.

#include "stdio.h"

Inserting and Deleting text

We want to show that a text form the document is inserted or deleted. This is possible with two HTML tags given below.

Example #6

The examples of inserting and deleting text is given below.

Insert (<ins></ins>)

<p> This text is inserted <ins> globe </ins> and it is underlined. </p>

This text is inserted globe and it is underlined.

Delete (<del></del>)

<p>The line has a word which is <del>removed </del> or deleted and it is strike out. </p>

The line has a word which is removed or deleted, and it is strike out.

Tags not supported in HTML 5

There are text related tags which are not supported in HTML 5 and you can use them on HTML elements from CSS (Cascading Style sheet)

Note: There are other HTML standards and browsers for which these tags are used differently.