HTML Text

Post by **C0D3D** »

Line breaks

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inserting Line Breaks in HTML</title>
</head>
<body>
    <p>This is a paragraph <br> with line break.</p>
    <p>This is <br> another paragraph <br> with line breaks.</p>
</body>
</html>

Text formatting

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Formatting Text in HTML</title>
</head>
<body>
    <p>This is <b> bold text </b>.</p>
    <p>This is <strong> strongly important text </strong>.</p>
    <p>This is <i> italic text </i>.</p>
    <p>This is <em> emphasized text </em>.</p>
    <p>This is <mark> highlighted text </mark>.</p>
    <p>This is <code> computer code </code>.</p>
    <p>This is <small> smaller text </small>.</p>
    <p>This is <sub> subscript </sub> and <sup> superscript </sup> text.</p>
    <p>This is <del> deleted text </del>.</p>
    <p>This is <ins> inserted text </ins>.</p><p> This is <b> bold text </b>.</p>
</body>
</html>

Preformatted text (Preserve line breaks and spaces

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML pre tag</title>
</head>
<body>
    <pre>
    The pre
        element preserves      spaces,
            line-breaks, tabs...
    </pre>
</body>
</html>

Sub and Superscript text

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML subscript and superscript</title>
</head>
<body>
    <p>Waters chemical formula is: H<sub>2</sub>O</p>
    <p>Carbon dioxide's chemical formula is: CO<sub>2</sub></p>
    <p>The equation of mass-energy equivalence is: E=mc<sup>2</sup></p>
</body>
</html>

Long and short quotations

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML quotations</title>
</head>
<body>
    <blockquote>
        <p>This is an example of a long quotation.</p>
    </blockquote>
    <p>This is an example of <q>short inline</q> quotation.</p>
</body>
</html>

Abbreviations and acronyms
Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML abbreviations</title>
</head>
<body>
    <p>The <abbr title="Hyper Text Markup Language">HTML</abbr> is the publishing language of the World Wide Web.</p>
    <p>The <acronym title="Hyper Text Markup Language">HTML</acronym> is the publishing language of the World Wide Web.</p>
    <p><strong>Warning:</strong> The &lt;acronym&gt; tag has been removed in HTML5 and shouldn't be used anymore. Use the &lt;abbr&gt; tag instead.</p>
</body>
</html>

Marking deleted and inserted text

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML deleted and inserted text</title>
</head>
<body>
    <h1>To Do</h1>
    <ul>
        <li>Buy some food</li>
        <li><ins>Do some chores</ins></li>
        <li><del>Time to chill</del></li>
        <li><ins>Go see the doctor</ins></li>
    </ul>
</body>
</html>

Setting text direction of an element

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML bdo tag</title>
</head>
<body>
    <p>The sequence "1-2-3-4-5" was reversed as: <bdo dir="rtl">1-2-3-4-5</bdo></p>
</body>
</html>

Insert contact information

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML address tag (check)</title>
</head>
<body>
    <address>
        Written by <a href="mailto:webmaster@example.com">Coded Jim</a>.<br> 
        Contact us at:<br>
        Post Box 420, Hollywood<br>
        USA
    </address>
</body>
</html>

Inserting comments

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML comments</title>
</head>
<body>  
    <!-- this is an HTML comment -->
    <!-- Comments are not displayed,
        by the browser -->
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Inserting horizontal lines

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML hr tag</title>
</head>
<body>
    <p>This is the first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
</body>
</html>

Computer output tags

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of HTML computer output tags</title>
</head>
<body>
    <p><code>Computer code</code></p>
    <p><kbd>Keyboard input</kbd></p>
    <p><samp>Sample text</samp></p>
    <p><var>Computer variable</var></p>
    <p><strong>Note:</strong> These tags are often used to represents a fragment of computer code.</p>
</body>
</html>

HTML Text

HTML Text

Who is online