HTML Tutorial
HTML References
HTML Resources
Selected Reading
- HTML - Layouts
- HTML - Javascript
- HTML - Style Sheet
- HTML - Header
- HTML - Marquees
- HTML - Embed Multimedia
- HTML - Forms
- HTML - Fonts
- HTML - Colors
- HTML - Backgrounds
- HTML - Blocks
- HTML - Iframes
- HTML - Frames
- HTML - Email Links
- HTML - Image Links
- HTML - Text Links
- HTML - Lists
- HTML - Tables
- HTML - Images
- HTML - Comments
- HTML - Meta Tags
- HTML - Phrase Tags
- HTML - Formatting
- HTML - Attributes
- HTML - Elements
- HTML - Basic Tags
- HTML - Overview
- HTML - Home
HTML References
- HTML - Deprecated Tags
- HTML - Character Encodings
- Language ISO Codes
- HTML - URL Encoding
- MIME Media Types
- HTML - Events Ref
- HTML - Fonts Ref
- HTML - Entities
- HTML - Color Names
- ASCII Table Lookup
- HTML - ASCII Codes
- HTML - Fonts Reference
- HTML - Events Reference
- HTML - Attributes Reference
- HTML - Tags Reference
HTML Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML - Formatting
HTML - Formatting
If you use a word processor, you must be famipar with the abipty to make text bold, itapcized, or underpned; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
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 −
Itapc Text
Anything that appears within <i>...</i> element is displayed in itapcized as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Itapc Text Example</title>
</head>
<body>
<p>The following word uses an <i>itapcized</i> typeface.</p>
</body>
</html>
This will produce the following result −
Underpned Text
Anything that appears within <u>...</u> element, is displayed with underpne as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Underpned Text Example</title>
</head>
<body>
<p>The following word uses an <u>underpned</u> typeface.</p>
</body>
</html>
This will produce the following result −
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin pne 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 −
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>monospaced</tt> typeface.</p>
</body>
</html>
This will produce the following result −
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 −
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 −
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted 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 −
Deleted Text
Anything that appears within <del>...</del> element, is displayed 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 −
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 −
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 −
Grouping Content
The <span> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <span> element to indicate that all of the elements within that <span> element relate to the footnotes. You might then attach a style to this <span> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<span id = "menu" apgn = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</span>
<span id = "content" apgn = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</span>
</body>
</html>
This will produce the following result −
The <span> element, on the other hand, can be used to group inpne elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.
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">span tag</span> alongwith CSS</p>
</body>
</html>
This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a section of a page.
Advertisements