Text and Formatting in HTML5

1. Text Elements

Headings (<h1> to <h6>)

HTML provides six levels of headings. These are used to define headings and subheadings in your content.

                        <h1>Main Heading (h1)</h1>
                        <h2>Subheading Level 2 (h2)</h2>
                        <h3>Subheading Level 3 (h3)</h3>
                        <h4>Subheading Level 4 (h4)</h4>
                        <h5>Subheading Level 5 (h5)</h5>
                        <h6>Subheading Level 6 (h6)</h6>
                        

Output:

Paragraphs (<p>)

The <p> tag is used to define paragraphs of text. It automatically adds space between paragraphs.

                        <p>This is the first paragraph of text.</p>
                        <p>This is the second paragraph of text.</p>
                        

Output:

Line Breaks (<br>)

The <br> tag is used to insert a line break within text. It doesn't start a new paragraph.

                        <p>This is some text.<br>This text appears on a new line, but it is still within the same paragraph.</p>
                        

Output:

Preformatted Text (<pre>)

The <pre> tag preserves whitespace and line breaks, displaying the text exactly as it is in the HTML code.

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

Output:

                        This    is    preformatted
                          text.
                             It    preserves   spaces
                        and   line   breaks.
                            

2. Lists

Unordered Lists (<ul>)

The <ul> tag creates an unordered (bulleted) list, with each list item defined by the <li> tag.

                        <ul>
                            <li>Item 1</li>
                            <li>Item 2</li>
                            <li>Item 3</li>
                        </ul>
                        

Output:

Ordered Lists (<ol>)

The <ol> tag creates an ordered (numbered) list, with each item defined by the <li> tag.

                        <ol>
                            <li>First item</li>
                            <li>Second item</li>
                            <li>Third item</li>
                        </ol>
                        

Output:

3. Text Alignment

Using Inline CSS for Text Alignment

You can align text using inline CSS with the text-align property.

                        <p style="text-align: left;">This text is aligned to the left.</p>
                        <p style="text-align: center;">This text is centered.</p>
                        <p style="text-align: right;">This text is aligned to the right.</p>
                        

Output:

<center> Tag (Deprecated in HTML5)

The <center> tag was used to center content in older versions of HTML, but it is deprecated in HTML5. Use CSS instead.

                        <center>This text is centered using the deprecated <center> tag.</center>
                        

Output:

4. Text Formatting Tags

Bold (<b>, <strong>)

The <b> tag makes text bold, while <strong> indicates importance.

                        <b>This text is bold using the <b> tag.</b><br>
                        <strong>This text is bold using the <strong> tag, and it's also important.</strong>
                        

Output:

Italic (<i>, <em>)

The <i> tag italicizes text, while <em> emphasizes the text (often italicized).

                        <i>This text is italicized using the <i> tag.</i><br>
                        <em>This text is emphasized and italicized using the <em> tag.</em>
                        

Output:

Subscript and Superscript (<sub>, <sup>)

The <sub> tag is used for subscript text, and <sup> is used for superscript text.

                        <p>Water formula: H<sub>2</sub>O</p>
                        <p>Exponential notation: 10<sup>2</sup> = 100</p>
                        

Output:

Underlined (<u>)

The <u> tag is used to underline text.

                        <u>This text is underlined using the <u> tag.</u>
                        

Output:

Strikethrough (<s>)

The <s> tag is used to represent text that has been struck through.

<s>This text has been struck through using the <s> tag.</s>

Output: