Introduction: Intro to 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.

Headers in HTML

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.

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

Working with Paragraphs

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

Dividing Code Into Sections

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:

Text Formatting Tags

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

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

Line Breaks and Horizontal Lines

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.

Nesting Formatting Elements

Nesting, the act of placing one HTML tag into another, allows many HTML tags to nest inside others, enabling more complex formatting.

Like marking a word in a book, HTML nesting helps add structure to your content.

Summary and Recap

Great job! You've just enhanced your HTML skills with text formatting. We've reviewed HTML headers, the <p> tag for paragraphs, and <b>, <i>, and <u> tags for text styling. We've also learned about the <br> and <hr> tags for line breaks and horizontal lines, and nesting tags for structured content.

Next, we'll practice all of these with a few exercises. As the saying goes, practice makes perfect. So, let's start coding!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal