leafleafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

HTML text formatting

Estimated reading: 6 minutes 22 views

HTML text formatting

bold text

italic text

computer automatic output

this is subscript and superscript

HTML formatting tags

HTML uses the tags <b>(“bold”) and <i>(“italic”) to format the output text, such as: bold or italic

These HTML tags are called formatting tags (see the full tag reference at the bottom).

RemarkUsually the tag <strong> is used instead of the bold tag <b>, and <em> is used instead of the <i> tag.

However, the meaning of these tags is different:

<b> and <i> define bold or italic text.

<strong> or <em> means the text you’re presenting is important, so highlight it. All major browsers today can render fonts with various effects. However, browsers may support better rendering in the future.

Online instance

Text Formatting
This example demonstrates how to format text in an HTML file

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding.com)</title>
</head>

<body>

    <b>This text is bold</b>

    <br />

    <strong>This text is bold</strong>

    <br />

    <big>This text font is enlarged</big>

    <br />

    <em>This text is in italics</em>

    <br />

    <i>This text is in italics</i>

    <br />

    <small>This text is minified</small>

    <br />

    This text contains
    <sub>Subscript</sub>

    <br />

    This text contains
    <sup>Superscript</sup>

</body>

</html>
html text formatting

Preformatted Text
This example demonstrates how to use the pre tag to control blank lines and spaces.


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <pre>
This example demonstrates how to use the pre tag
For blank lines and spaces
take control
</pre>

</body>

</html>
html preformatted text

“Computer Output” Tab
This example demonstrates the display of different “Computer Output” tabs.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding180.com)</title>
</head>

<body>

    <code>Computer output</code>
    <br />
    <kbd>Keyboard input</kbd>
    <br />
    <tt>Typewriter text</tt>
    <br />
    <samp>Sample Computer Code</samp>
    <br />
    <var>Computer variables</var>
    <br />

    <p>
        <b>Comments:</b> These tags are often used to display computer/programming code.
    </p>

</body>

</html>
html computer output

Address
This example demonstrates how to write an address in an HTML file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding.com)</title>
</head>

<body>

    <address>
        Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
    </address>

</body>

</html>
HTML Address

Abbreviations and acronyms
This example demonstrates how to implement an abbreviation or acronym.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding.com)</title>
</head>

<body>

    <abbr title="etcetera">etc.</abbr>
    <br />
    <acronym title="World Wide Web">WWW</acronym>

    <p>In some browsers, title can be used to display the full version of an expression when you hover over an acronym.
    </p>

    <p>Only valid for the acronym element in IE 5. </p>

    <p>Valid for both abbr and acronym elements in Netscape 6.2. </p>

</body>

</html>
html  abbrevation

Text Orientation
This example demonstrates how to change the orientation of text.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding.com)</title>
</head>

<body>

    <p>The paragraph text is displayed from left to right. </p>
    <p><bdo dir="rtl">The paragraph text is displayed from right to left. </bdo></p>

</body>

</html>
html text orientation

Block Quotes
This example demonstrates how to implement variable length quotes.




<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Beginners Tutorial (coding.com)</title>
</head>

<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>
html block quotes

Delete and Insert Effects
This example demonstrates how to mark deleted text and inserted text.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
<title>Beginners Tutorial (coding.com)</title>
</head>

<body>

    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>

</html>
html delete or insert

HTML text formatting tags

Labeldescription
<b>define bold text
<em>Define emphasis text
<i>define italics
<small>define small characters
<strong>define accent
<sub>define subscript
<sup>define superscript
<ins>define caret
<del>define delete word

HTML “Computer Output” tag

LabelDescription
<code>define computer code
<kbd>define keycode
<samp>Define Computer Code Samples
<var>define variable
<pre>define preformatted text

HTML Citations, Quotes, and Tag Definitions

LabelDescription
<abbr>define abbreviations
<address>define address
<bdo>define text direction
<blockquote>define long references
<q>define short quotes
<cite>define citation, citation
<dfn>Define a definition item.

Leave a Comment

CONTENTS