HTML: how to bold, italicize and underline text

When someone starts building their first web pages, one of the most common questions is how to highlight words inside a text. In a word processor such as Word, a single click on a button is enough to make a paragraph bold or italic, but in HTML things work differently: formatting is not applied with buttons but with tags that surround the text you want to emphasize. Knowing what those tags are, understanding what each one means and knowing when to use them is one of the foundations of web design and a very useful skill for anyone who publishes content online.

This article explains, with practical examples, how to bold, italicize and underline text in HTML, what difference exists between tags that look the same but mean different things, how to combine several formats in a single sentence, and what mistakes to avoid so you do not end up with confusing code. So that everything is clear, the examples are shown in a readable way: for instance, appears as visible text rather than as an already applied format.

Before you start: how to read the examples

Throughout this guide, the code examples show the < and > signs written as text, so readers can see exactly which tag they need to type without the browser running it. When an example is presented like this:

text in bold

what you are seeing is the instruction that has to be written inside the HTML file. Each example also explains the result that will appear on screen, so the effect is clear even if you have never touched a web page before.

Making text bold: the b and strong tags

The most direct way to make text bold is to surround it with the tag, whose name comes from the word bold. Anything between and its closing will appear with a thicker, darker stroke than the rest of the paragraph. The minimal example is this one:

This phrase appears in bold

The result is that the sentence stands out with a heavier stroke. The tag has existed since the earliest versions of HTML and its only job is to change the appearance: bold for the sake of bold, without adding any special meaning to the content.

Next to there is another tag with the same visual result but a deeper purpose: . Although the text is also displayed in bold, communicates that this content is important within the document. For a browser, a screen reader or a search engine there is a real difference between saying "this word is visually thick" and saying "this word matters". That is why is recommended whenever you want to give real emphasis to an idea:

Keep in mind that the deadline is final and ends on the last day of the month.

The browser will display the word final in bold, and assistive programs will also be able to announce it with a special tone of voice for people with visual impairments. The practical rule is simple: if you only want a decorative effect, is enough; if you want to point out importance, use . In the real texts of a web page you almost always need , because the words you highlight are usually the ones that matter.

Both tags accept text of any length: you can make a single word, a full sentence or even a long block bold, as long as you open and close the tag in the right place. The most common beginner mistake is forgetting the closing or ; when that happens, everything that follows stays bold until the browser finds another tag or the document ends, and the design breaks completely.

Italics: the i and em tags

For italics, HTML offers a pair of tags that mirrors the bold pair. The first one is , short for italic, which slants the text to the right without adding any meaning. The second one is , short for emphasis, which slants the text and also communicates emphasis, just as communicates importance in the bold case.

The basic example with is the following:

text in italics

With that instruction the browser slants the text to the right. The tag is used, for example, for the titles of books, movies or works of art inside a paragraph, and for words from another language that are not yet part of everyday vocabulary.

The tag is written in the same way:

This does need to be reviewed before you sign.

In that example the word does will appear in italics, but the emphasis is also registered for the systems that read the page. The difference between and is the same as between and : the first one changes only the appearance and the second one adds a shade of meaning. When you write content for the web it helps to think about meaning first: if a word would be said with a stronger tone when read aloud, then is the right choice.

Underlining: the u tag, used sparingly

To underline text in HTML you use the tag, short for underline. Its shape is identical to the previous ones:

underlined text

The browser draws a line below the text. However, underlining is the format that requires the most care, because internet users have learned that underlined, colored text is a link. If you underline words that lead nowhere, readers may try to click and feel confused when nothing happens. For that reason, the general advice is to reserve underlining for very specific cases, such as marking a spelling correction, highlighting a reference inside a technical document or flagging a word that is defined later in the same text, and to avoid underlining whole sentences just for decoration.

It is also worth remembering that the underline on links is added by the browser itself or by the page stylesheet; you do not need to add to a link to make it look underlined, and if you do, the result can be a double line or a sloppy look.

A useful extra: strikethrough text with del and s

Although this article is about three formats, it is worth knowing two more tags that appear constantly on the web: the ones that strike through text. The first one is <del>, which represents content that was removed from a document, like corrections in a contract or the change history of a page:

The previous price was <del>120</del> and now it is 90.

The second one is <s>, used for content that is no longer accurate or has become obsolete but is kept visible on purpose, like an offer that has ended:

<s>Free shipping only until Friday.</s>

Visually both draw a line over the text, but their meaning is different: <del> indicates a real removal and <s> indicates that something is no longer valid. Using the right tag helps machines and accessibility programs understand the content.

Combining several formats in one sentence

Formatting tags can be combined to achieve, for example, a word that is bold and italic at the same time. You only need to nest them correctly, meaning you open and close each one in the proper order, as shown here:

attention, important detail

In this example the tag opens first and closes before ; that is the correct way to chain tags. If the closings cross each other, the browser may interpret the document in unexpected ways and the format will not be applied properly. The same logic applies when you combine bold with underline or italics with strikethrough: first define the content and then surround it with tags nested one inside another, always from the innermost to the outermost.

That said, do not overuse combinations. A text where almost every word carries two or three formats at once is hard to read and loses the hierarchy effect you were looking for. Formatting should work like a traffic light: a few signs, well placed, guide better than many lights switched on at the same time.

What not to do: decorative formatting and confusing styles

There are several widespread bad practices worth avoiding. The first one is using bold, italics or underlining on entire blocks: a full paragraph in bold tires the eyes and makes nothing stand out for real. The second one is underlining text that is not a link, as explained earlier. The third one is writing whole texts in capital letters to fake a shout when what you actually need is a formatting tag.

It should also be noted that in the past, tags like , now obsolete, were used to change the appearance of text directly from HTML. Today the advice is to separate content from presentation: HTML defines what each thing is and CSS defines how it looks. If you are looking for a purely visual effect without semantic meaning, the correct alternative to formatting tags is a stylesheet with properties such as font-weight, font-style and text-decoration. For example, to make a paragraph bold with a style rule applied directly, you could write something like this:

This paragraph looks bold thanks to CSS.

That approach works, although the cleanest option is to move those rules to an external CSS file instead of repeating them inside every tag. The central idea is to choose the tool according to the intention: if the word is important, use ; if it carries emphasis, use ; if you only want a specific look, use a CSS rule.

Summary table of tags for formatting text

To finish, this table gathers the tags explained above with their visual effect and the case where each one is recommended:

Tag	Visual effect	When to use it
<b>	Bold text	When you only want the bold look without additional meaning.
<strong>	Bold text	When the text carries real importance within the content.
<i>	Italic text	For titles of works, foreign words or an alternate tone without emphasis.
<em>	Italic text	When the sentence needs emphasis, as if it were read aloud.
<u>	Underlined text	Only in specific cases, because underlining is associated with links.
<del>	Strikethrough text	To mark content that was removed or corrected in a document.
<s>	Strikethrough text	To indicate that something is no longer valid or has become obsolete.

Quick summary

If you want to take a central idea away from this guide, it can be summed up in these guidelines:

For visual bold use ; to mark importance use .
For visual italics use ; to mark emphasis use .
Underlining with should be reserved for rare cases so it is not confused with a link.
<del> and <s> strike through text and each one has a different nuance.
Formats can be combined by nesting the tags in the correct order.
If the format is purely decorative, the clean alternative is CSS rather than decorative tags.

Mastering these tags turns any plain text into a readable, well-structured page, and it is a solid first step before moving on to stylesheets. People who publish content on the web regularly find that details like these are the difference between an article that reads smoothly and one that tires the eye. Practical guides like this one are published regularly to support step-by-step learning.

Labels:

#html #bold italic #text formatting