<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 −
| Attribute | Value | Description |
| behavior | scroll slide alternate | Defines the type of scrolling. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Deprecated − Defines the direction of scrolling the content. |
| direction | up down left right | Defines the direction of scrolling the content. |
| height | pixels or % | Defines the height of marquee. |
| hspace | pixels | Specifies horizontal space around the marquee. |
| loop | number | Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. |
| scrolldelay | seconds | Defines how long to delay between each jump. |
| scrollamount | number | Defines how how far to jump. |
| width | pixels or % | Defines the width of marquee. |
| vspace | pixels | Specifies vertical space around the marquee. |