Mastering Text Formatting in HTML

Hello again! We're amping up our HTML game! Having seen the basic HTML structure, we'll now add flair with headers, paragraphs, and styles. We're delving into HTML text formatting!

You've encountered text formatting in books or articles: chapter titles, subheadings, or emphasized quotes that aid understanding. Similarly, HTML text formatting adds structure and expressiveness to your webpage.

HTML provides headings from <h1> to <h6>. The rule is simple: The lower the number, the larger the size the heading has. Hence, <h1> is the largest, and <h6> is the smallest heading.

<h1>This is a Heading 1</h1>
...
<h6>This is a Heading 6</h6>

Just as in a book, HTML headers can structure your webpage and guide the reader.

The <p> tag is used for paragraphs in HTML. Like in a book or letter, paragraphs make your content easier to read.

<p>This is the first sentence.</p>
<p>This is another sentence.</p>

The <div> element in HTML is a block-level container that is used to group together and format sections of a document. It does not have a semantic meaning and is used to structure the content on the Web page. Check out the example below:

<div>
    <h2>Welcome!</h2>
    <p>A paragraph in the div element.</p>
</div>

Dress up your text with HTML styles. The most common tags are <b> for bold, <i> for italic, and <u> for underline.

<b>This text is bold</b>
<i>This text is italic</i>
<u>This text is underlined</u>

Text decorations can emphasize parts of your text and make your webpage more expressive.

Sometimes, you need to break a line or separate sections with a line. For these purposes, use the <br> tag for a line break and <hr> for a horizontal line.

<p>This is a sentence.<br>And another sentence.</p>
<hr>
<p>This is text after the line.</p>