How to format an HTML web page?

• formatting refers to the various ways you can style and structure text to improve its readability and presentation.

1. Bold text

<b>: The <b> tag makes text bold, but it doesn’t convey any extra importance.

<strong>: <strong> tag also makes text bold, but it implies text is important or has strong emphasis.

    <p>This is <b>Bold text.</b></p>
    <p>This is <strong>Strong emphasis text.</strong></p>

2. Italic Text

<i>: The <i> tag makes text italic; it is only used for styling or foreign words.

<em>: the <em> tag also makes text italic, but it implies text emphasis.

    <p>This is <i>Italic text.</i></p>
    <p>This is <em>Italic emphasis text.</em></p>

3. Underlined Text

The <u> tag underlines text, but it's less commonly used, as underlining is often reserved for links.

    <p>This is <u>Underlined text.</u></p>

4. Strike through Text

<s>: The <s> tag draws a line through the text, indicating that something is no longer relevant or accurate.

<del>: The <del> tag also strikes through text and is used to delete or outdated text.

    <p>This is <s>incorrect text.</p>
    <p>This is <del>deleted</del> text.</p>

5. Superscript

<sup>: The <sup> tag raises text slightly above the baseline, often used for footnotes, exponents, or ordinal indicators.

    <p>I got 1<sup>st</sup> place in race.</p>

6. Subscript

<sub>: The <sub> tag lowers text slightly below the baseline, typically used in chemical formulas or mathematical indices.

<p>Chemical formula: H<sub>2</sub>O</p>
<p>Mathematical expression: x<sub>1</sub>, x<sub>2</sub>, x<sub>3</sub></p>

7. Marked Text

<mark>: The <mark> tag highlights text, typically with a yellow background.

    <p>This is <mark>Marked text</mark></p>

8. Inserted Text

<ins>: The <ins> tag indicates that text has been inserted, often displayed as underlined text.

    <p>This is <ins>inserted text</ins></p>

9. Monospaced Text

<code>: The <code> tag displays text in a monospaced font, often used to represent code snippets.

    <p>To print in Javascript, use the <code>hello()</code> function.</p>

10. Quotation 

<blockquote>: The <blockquote> tag is used for long quotations, usually indented from the rest of the text.

<q>: The <q> tag is used for short inline quotations, typically enclosed in quotation marks.

    <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
        - Franklin D. Roosevelt
    </blockquote>
   
    <p>He said, <q>The early bird catches the worm.</q></p>

11. Preformatted Text

<pre>: The <pre> tag preserves both spaces and line breaks, displaying text exactly as it is written in the HTML code. It’s useful for displaying code or tabular data without additional formatting.

    <pre>
        This text
        is preformatted.
        It preserves    spaces and
        line breaks.
    </pre>

12. Small Text

<small>: The <small> tag renders text in a smaller font size, often used for fine print or disclaimers.

    <p>This is normal text. <small>This is small text.</small></p>

13. Abbreviation 

<abbr>: The <abbr> tag is used to define an abbreviation or acronym, often with a title attribute that provides the full form when hovered over.

    <p>The term <abbr title="HyperText Markup Language">HTML</abbr> stands for HyperText Markup Language.</p>

• Comments

• Comments in HTML are used to insert notes or explanations within the code that are not visible to users when the page is rendered in a web browser. These comments are helpful for developers to leave reminders, explain the code, or temporarily disable certain parts of the code during development or debugging.
• HTML comments are enclosed within <!-- and --> tags.

    <!-- This is the header section of the webpage -->
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <!-- start of container -->
    <div class="container">
        <div class="header">
            <!-- Start of header -->
            <h1>Title</h1>
            <!-- End of header -->
        </div>
        <div class="content">
            <!-- start of content -->
            <p>This is the main content.</p>
            <!-- End of content -->
        </div>
    </div>
    <!-- End of container -->

Commented text can not start with > or ->, can not contain the string --> or --!>, nor end with the string <!-, though <! is allowed.