Text in HTML: The Ultimate Guide for Text Formatting

Do you want to learn how to format text in HTML? Then you are at the right spot because the following post will cover the most important topics you need to create the ultimately formatted text!

We will first look at how you generally can define text, then at the different typographical modifications (including semantic meaning), science-related formatting (like formulas), and lastly, purely visual changes like the font style.

• Paragraphs in HTML
• Typographical modifications in HTML
• Science-related formatting
• CSS Text formatting in HTML

Paragraphs in HTML

Text Tags

The paragraph element <p> contains a paragraph of text and always starts in a new line. It ignores linebreaks or big whitespace (beginning with 2) and formats the text for you.

<p>
I will remove
the line breaks
and      whitespaces
you create
</p>

As you can see here:

I will remove the line breaks and whitespaces you create

The second way to create a paragraph of text is with the <pre> element. This tag stands for preformatted text and keeps all the linebreaks and white spaces you make, but it also applies a monospace font to it. The reason being, that it is mostly used for code.

<pre>
I will keep
the line breaks
and      whitespaces
you create
</pre>

As expected, the result looks like this:

I will keep
the line breaks
and      whitespaces
you create

Linebreak in HTML

After learning about the <p> tag, you are probably wondering how you can integrate a linebreak into the normal paragraphs. HTML itself provides one simple way, the <br> tag. This tag resembles the newline character in HTML and can be used like this:

If this guide is helpful to you and you like what I do, please support me with a coffee!

<p>
Now I will keep<br>
the line breaks<br>
and remove     the whitespaces<br>
you create<br>
</p>

As expected, the output will now keep the linebreaks and thus look like this:

Now I will keep
the line breaks
and remove the whitespaces
you create

Typographical modifications in HTML

In the following sections, we will learn how to create typographical modifications like bold, italic, and underlined text inside of HTML.

Text modifications without semantic meaning

You can apply the modifications by either using HTML tags or CSS properties. The HTML tags always provide semantic meaning and thus should only be used with intention. However, you should use CSS classes if you want to apply a certain style to a text section without semantic meaning. You can do this by applying the CSS class to a whole paragraph, like this:

<p class="modification">I want to modify the whole paragraph</p>

Or to some word with the <span> tags. These do not provide any semantic meaning:

<p>I want to modify this <span class="modification">word</span></p>

How to Bold in HTML

The first two use cases are bold and italic fonts, probably the most used once. With HTML, you can create a bold text by wrapping words inside of a <b> or a <strong> tag like this:

<p>Some <b>bold words</b> and some <strong>strong words</strong></p>

As expected, the words inside of the tags are bold:

Some bold words and some strong words

As you can see, the result of the bold and strong are the same visually. The difference is that bold is just used to draw attention to the text, while strong is also used to highlight the text semantically (it indicates an important word or section). Following seobility’s advice, you should always use strong to highlight an important text section. You can read more on the differences between bold and strong here.

You can also create bold text without HTML tags (but, as we learned before, use strong tags for important parts of your text). The trick is to apply the font-weight: bold; CSS property to a certain part of your text. So, for example, you could bold a certain paragraph by applying the bold class to it:

<style>
.bold {
	font-weight: bold;
}
</style>

<p class="bold">This is completly bold text</p>

This results in the following:

This is completly bold text

In case you don’t know the class attribute yet, check out my CSS guide here.

Italics in HTML

Next, you can also create Italic fonts in two different ways. First, the <i> tag, which makes the text visually italic. And on the other hand, the <em> tag is used to emphasize a certain part of the text. We have the same differentiation as we have seen with the <b> and <strong> tags. The following example shows that they again are creating the same visual effect:

<p>Some <i>italic words</i> and some <em>emphasised words</em></p>

With the result being displayed here:

Some italic words and some emphasised words

As with bold, you can also create the visual effect with a CSS property. In this case, it is called font-style: italic. As in the CSS example before, we will create another class and apply it to a text section:

<style>
.italic {
	font-style: italic;
}
</style>

<p class="italic">This is completly italic text</p>

With the following result:

This is completly italic text

Underline a Text in HTML

The next effect is underlined text, used to highlight inserts or other things. Like the two previous examples, you can create it with HTML tags and CSS properties. For the first, you have the option to use the <ins> tag. It represents inserts and applies an underline for the captured text.

<p>Some <ins>underlined and inserted words</ins></p>

Here you can see how this looks:

Some underlined and inserted words

To create this effect without the meaning of the inserted text, you can use a CSS class that underlines the text for you. One more benefit of using this method is that you can easily define the kind of underline and color. Therefore you first have to define the property to use an underline, then the type of underline, and lastly, the underline color. The following example shows how to define all three of them:

<style>
.u {
	text-decoration: underline;
}

.u-wavy {
	text-decoration: underline wavy;
}

.u-wavy-blue {
	text-decoration: underline wavy blue;
}
</style>

<p class="u">The first look at a underline</p>
<p class="u-wavy">Then a look at the underline type</p>
<p class="u-wavy-blue">And lastly a color change</p>

With the visual result here:

The first look at a underline

Then a look at the underline type

And lastly a color change

HTML line through Text

Another useful modification is the line through. Most of the time, it represents removed or no longer valid information. As the prior examples, you can also use HTML tags (<del>) or a CSS property (text-decoration: line-through;). As we learned before, the HTML tag provides a meaning, so you should only use it for removed text sections as in this example:

<p>Some <del>striked-through and removed words</del></p>

Some striked-through and removed words

In case you want to use it for a visual effect, you should use the CSS property. As with the underline, you can also immediately define a line-through type and color. To read more about the different options you have with the text-decoration property, check here.

Let’s create two different visual line-trough effects:

<style>
.lt-1 {
	text-decoration: line-through double;
}

.lt-2 {
	text-decoration: line-through dotted blue;
}
</style>

<p class="lt-1">A first effect</p>
<p class="lt-2">A second effect</p>

A first effect

A second effect

HTML to highlight Text

Lastly, we can highlight an important section in a text. Imagine using it as a highlighter in your current book. As with all previous examples, you can again use HTML tags (<mark>) or just the visual effect with the CSS property (background-color). Lets again have a look at the HTML tags first:

<p>Some <mark>highlighted words</mark></p>

Some highlighted words

To only use the visual effect of a highlight, you have the apply the background-color property to a text section, like this:

<style>
.highlight {
	background-color: orange;
}
</style>

<p>A highlighted <span class="highlight">word</span></p>

A highlighted word

Science-related formatting

In the following sections, we will learn about multiple text modifications that you will mainly have to use with science-related content, for example, formulas.

HTML var tag

The var tags are used to format a variable inside of a formula. For example, this HTML code:

3<var>x</var> - 7<var>z</var> = 8<var>y</var> + 2

would result in this formula:

HTML subscript tag

The <sub> tag creates a subscript text. This is a really small text that you may know from indices in mathematics or physics. You create them like this:

<var>x<sub>1</sub></var>

HTML superscript

The <sup> tag, on the other hand, resembles superscript text. You may know it from mathematics or other science-related topics as “to the power of”:

<var>x<sup>2</sup></var>

CSS text formatting in HTML

The following formatting options are solely visual and can be applied with CSS properties.

HTML font family

With the font-family CSS property, you define the font of a text. It provides a fallback system, where you can define multiple fonts, and it chooses the first one available for your user. This means you should always start with your preferred font and end with one of the following generic fonts:

For example, you can change the font for a certain text section like this:

<style>
.font-1 {
	font-family: "Times New Roman", serif;
}
</style>

<p class="font-1">This is a different font!</p>

Resulting in the following visuals:

This is a different font!

For using external fonts, check this post here.

Align Text in HTML

We have multiple ways of aligning the text. The first one is to use the text-align CSS property. With this property, you can define the horizontal alignment of your text inside of an element. For example, you can create a center class to center text inside of another element:

<style>
.center {
	text-align: center;
}
</style>

<p class="center">This text is aligned to the center!</p>

This text is aligned to the center!

But to align your text vertically, you have to use the line-height property. After setting it to the height of your element, it will center the text on the vertical axis.

<style>
.center-v {
	height: 20px;
	line-height: 20px;
}
</style>

<p class="center-v">This text is aligned to the center!</p>

As you can see here:

This text is aligned to the center!

Color Text in HTML

Lastly, we can also use CSS to color sections of the text. For that, we have to use the color property. You create a class, define the color and then apply it to your element like this:

<style>
.orange-text {
	color: orange;
}

.blue-text {
	color: blue;
}
</style>

<p class="orange-text">This text is orange!</p>
<p class="blue-text">This text is blue!</p>

And it works pretty intuitively, as you can see here:

This text is orange!

This text is blue!

Conclusion

In this post, we learned everything about text and text formatting. I hope it was helpful for you, and you are now able to create stunning texts. In case I forgot something, I will add it at a later point. Also, feel free to add stuff in the comments that I have forgotten.

In the coming weeks, I will also create a cheat sheet for text formatting. You will be able to obtain freely through signing up for my newsletter. If you are interested in this, subscribe and get it as soon as I release it!

Signing up for my newsletter will also inform you on all new posts relating to web- and software development!

[convertkit form=2303042]