HTML – Text Formatting Text

<P> Tags

The <p>  the tag defines a new paragraph, as you should already know. If you don’t, you should visit our tutorial on HTML Paragraphs before continuing.

The paragraph defines whole-textual information and is also a part of HTML text formatting elements. Of course, you can have more than one paragraph on your website! Bear in mind that every new paragraph you write begins from a new line.

Bold Text

Anything that appears within <b>…</b> element, is displayed 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

Anything that appears within <i>…</i> element is displayed in italicized as shown below −

Example

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

This will produce the following result −The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>…</u> element, is displayed with underline as shown below −

Example

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

This will produce the following result −The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>…</strike> element is displayed with strikethrough, which 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 monospaced font. Most of the 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, however, each letter has the same width.

Example

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

This will produce the following result −The following word uses a mo no spaced typeface.

Superscript Text

The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half 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 of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath 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

Anything that appears within <ins>…</ins> element is displayed as inserted text.

Deleted Text

Anything that appears within <del>…</del> element, is displayed as deleted 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 cola wine

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 <small>…</small> 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.

<q> tags

The <q> element inserts quotation marks around the text. The full name of this tag is “quote” so, it is used for inserting quotes, citing, and so on.

However, if you’re not quoting some other text, you shouldn’t use this tag just for adding quotation marks. You can insert some attributes to this element for suiting your needs.

<!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>

WWF’s goal is to: “Build a future where people live in harmony with nature.” We hope they succeed.

<blockquote> tags

The <blockquote> element is quite similar to <q> tag, and it works almost in the same method. However, while using this HTML text formatting tag, bear in mind, that this quote will appear on a new line and have an intention for each line it contains.

It makes it look like a block of text, and this is where its name came from.

<!DOCTYPE html>
<html>
<body>
<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>

About WWF

Here is a quote from WWF’s website:

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<marquee> Tag

The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>
   <body>
      <marquee>This is basic example of marquee</marquee>
      <marquee direction = "up">The direction of text will be from bottom to top.</marquee>
   </body>
</html>

Specific Attributes

The HTML <marquee> tag also supports the following additional attributes −

AttributeValueDescription
behaviorscroll
slide
alternate
Defines the type of scrolling.
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Deprecated − Defines the direction of scrolling the content.
directionup
down
left
right
Defines the direction of scrolling the content.
heightpixels or %Defines the height of marquee.
hspacepixelsSpecifies horizontal space around the marquee.
loopnumberSpecifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
scrolldelaysecondsDefines how long to delay between each jump.
scrollamountnumberDefines how how far to jump.
widthpixels or %Defines the width of marquee.
vspacepixelsSpecifies vertical space around the marquee.

Leave a Comment