HTML Formatting

Formatting in html

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.


i) Bold Text:

                The HTML <b> element is a physical tag which display text in bold font, without any logical importance.

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>

ii) Italic Text:

The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance.

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>

iii) Underlined Text:

If you write anything within <u>………</u> element, is shown in underlined text.

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>

iv) Strike Text:

Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

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>

v) Monospaced Font:

If you want that each letter has the same width then you should write the content within <tt>………….</tt> element.

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>

vi) Superscript Text:

If you put the content within <sup>…………..</sup> element, is shown in superscript; means it 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>

vii) Subscript Text:

If you put the content within <sub>…………..</sub> element, is shown in subscript ; means it is displayed half a character’s height 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>

viii) Inserted Text:

Anything that puts within <ins>……….</ins> 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>

ix) Deleted Text:

Anything that puts within <del>……….</del> 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>

x) Larger Text:

If you want to put your font size larger than the rest of the text then put the content within <big>………</big>. It increase one font size larger than the previous one.

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>

xi) Smaller Text:

If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one.

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>

xii) Grouping Content:

The <div> 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 <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using 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>Content Articles</h5>
<p>Actual content goes here…..</p>
</div>
</body>
</html>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *