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

UNEPUNEP

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.

HTML TagsDescription
<i>Shows the text in italic.
<em>Put emphasis to a text content
<dfn>Definition of a term (the term in italic)
<address>Address of the author in italic
<cite>Shows a reference to a piece of work – a book, web page, journal or any text content.

Example-2

Here are examples of italicized text.

Italic text (<i>)

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

Output

This paragraph contains italic word.

Emphasis (<em>)

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

Output

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

Definition (<dfn>)

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

Output

Orange is a citrus fruit.

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>

Output

First Name : John

Last Name: Peterson

City: London

Street: 101, Baker street

Phone: 111-3344

Email: john

Citation (<cite>)

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

Output

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

HTML TagsDescription
<b>Show a text in bold.
<strong>Bold a text to show strong importance.

Example-3

These are some examples of bold text content.

Bold (<b>)

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

Output

This is a bold text content.

Strong (<strong>)

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

Output

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 A2 and “A subscript 2” is A2 use following tags

HTML TagsDescription
<sub>For subscript
<sup>For superscript

Example-4

These are examples of subscripts and superscripts.

Subscript (<sub>)

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

Output

A2

Superscript (<sup>)

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

Output

A2

Computer Code Tag

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

HTML TagDescription
<code>To display computer codes

Example-5

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

Computer Code (<code>)

<p>The following is computer code.</p>

<code>#include “stdio.h”</code>

Output

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.

HTML TagsDescription
<ins>Shows inserted text
<del>Shows deleted text

Example-6

The examples of inserting and deleting text is given below.

Insert (<ins>)

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

Output

This text is inserted- globe and it is underlined.

Delete (<del>)

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

Output

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)

HTML Tag HTML 4.01HTML 5
<big>YesNo
<font>YesNo
<center>YesNo

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

Advertisements