03. Formatting Text

Introduction

This lesson explains how to format text on a webpage with HTML. It covers how to make paragraphs, headings, line breaks, and bold and italicized text.

Learning Outcomes

Create paragraphs
Create headings
Create line breaks
Create bold text
Create italicized text

Paragraphs

To create a paragraph of text in HTML, use the p tags, like so:

<p>This is my paragraph!</p>
Code language: HTML, XML (xml)

Every time you use a p tag, it automatically adds a line break above and below the text included inside of the tags. You can include your text without these tags, but it may produce undesired results.

Below is an example of how it looks with three different p tags.

See the Pen Paragraph Tags by Sadness (@sadness97) on CodePen.

Without the p tags, our document would look like this:

See the Pen No Paragraph Tags by Sadness (@sadness97) on CodePen.

Headings

Headings are for when you need to title a specific area of your website. There are six different heading tags, starting with <h1> and ending with <h6>. h1 is the largest heading and h6 is the smallest heading.

Here is an example of how each heading level works:

See the Pen Heading Tags by Sadness (@sadness97) on CodePen.

Line Breaks

We know that using p tags is a good way to add a line break, but what if you want just plain line break as if you hit ‘enter’ in a Word Document?

This is a perfect job for the <br> tag!

See the Pen BR Tags by Sadness (@sadness97) on CodePen.

With the br tag, we can add a line break wherever we deem it necessary – useful for formatting poetry.

Bold and Italics

For bold text, we use the <strong> tag, and for italic text, we use the <em> tag.

If you were making sites in the 90s and 00s, you might remember the b and i tags for bold and italics respectively. These tags have been deprecated and have been replaced by the above.

<strong>This text is bold!</strong>
<em>This text is italic!</strong>
Code language: HTML, XML (xml)

Exercises

Open a CodePen and play around with the different formatting tags we’ve learned so you can get a feel for how they work.

Continue to Lesson 04: Lists