What is text formatting in HTML

HTML formatting



When using a word processor, you must be familiar with the ability to bold, italic, or underline text; There are only three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold text

Everything that appears within <b>...</b> Element, is shown in bold as shown below:

example

<!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a bold typeface.

italic text

Everything that appears within <i>...</i> -Item is shown in italics, as shown below:

example

<!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a italicized typeface.

underlined text

Everything that appears within <u>...</u> Element, shown with an underline, as shown below:

example

<!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a underlined typeface.

Strike text

Everything that appears within <strike>...</strike> Item indicated with a streaked line that is a thin line through the text, as shown below:

example

<!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a strikethrough typeface.

Monospaced font

The content of a <tt>...</tt> -Element is written in proportional font. Most fonts are known as variable width fonts because different letters are of different widths (for example, the letter "m" is wider than the letter 'i'). In a monospaced font, but each letter is the same width.

example

<!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a typeface.

Superscript text

The content a <sup>...</sup> Element is written in superscript; The font size used is the same size as the characters surrounding it but is displayed halfway through a character's height above the other characters

example

<!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a superscript typeface.

subscript text

The content a <sub>...</sub> Element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half the height of a character below the other characters.

example

<!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a subscript typeface.

inserted text

Something that appears within <ins>...</ins> Item shown as pasted text

example

<!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>

This will produce the following result:

I want to drink

Deleted text

Something that appears within <del>...</del> Item, is shown as deleted text

example

<!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>

This will produce the following result:

I want to drink

Larger text

The content of the <big>...</big> -Element is displayed one font size larger than the rest of the text surrounding it as shown below:

example

<!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a big typeface.

Smaller text

The content of the < kleine>...</ kleine> -Element is displayed one font size smaller than the rest of the text surrounding it as shown below:

example

<!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>

This will produce the following result:

The following word uses a small typeface.

Grouping content

The <div> and <Spannweite> Elements allows you to group multiple elements to create sections or subsections of a page

For example, you might want to put all the footnotes on a page inside a

element to show that all the elements inside that element; the
element pertains to the footnotes. You could then bring a style to this
element so that it would appear with a special set of style rules.

example

<!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id="menu" align="middle" > <a href="/index.htm">HOME</a> | <a href="/about/contact_us.htm">CONTACT</a> | <a href="/about/index.htm">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Inhalt Artikel</h5> <p>eigentlichen Inhalt geht hier ....</p> </div> </body> </html>

This will produce the following result:

The element on the other hand can only be used to group inline elements. So if you have part of a sentence or paragraph that you want to group together, you can use the element like this

example

<!DOCTYPE html> <html> <head> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p> </body> </html>

This will produce the following result:

This is the example of span tag and the div tag along with CSS

These tags are often used with CSS to allow you to apply a style to a section of a page.