The Quick Start
Text Formatting Tags
- Beginner
- December 29, 2025
Fahim ul Haq is the co-founder and CEO of Educative, the world's leading upskilling platform for and by developers. He is a former software engineer at Microsoft and Facebook with a deep passion for creating better, more efficient ways for developers to master in-demand skills.
Once you know how to structure content using headings and paragraphs, the next step is learning how to format text inside those paragraphs. Real web pages often need to emphasize words, highlight important phrases, show quotes, or display code-like text.
In this lesson, you’ll learn how HTML handles text formatting, which tags are used for emphasis and meaning, and how to format text without breaking good structure. You’ll practice using common formatting tags and understand when to use each one.
This lesson focuses on meaning first, appearance second. That idea will come up often as you learn HTML.
What text formatting means in HTML
Text formatting in HTML is about giving meaning to parts of your text, not just making them look different.
Unlike word processors, HTML does not focus on fonts, colors, or styles by default. Instead, it provides tags that describe why text is important, emphasized, or different from surrounding content.
Later, CSS will control how formatted text looks. For now, HTML helps the browser understand what role each piece of text plays.
Formatting vs styling (an important distinction)
It’s important to separate the two ideas early:
- Formatting describes meaning
- Styling controls appearance
HTML formatting tags explain whether text is emphasized, strong, quoted, or special. CSS decides whether that text is bold, italic, colored, or larger.
This separation keeps your pages clean, accessible, and easier to maintain.
The <strong> tag: strong importance
The <strong> tag is used to indicate text that is especially important.
Here’s an example:
<p>
Always save your work before closing the editor.
<strong>Unsaved changes will be lost.</strong>
</p>
By default, browsers display <strong> text in bold. However, the real purpose of <strong> is semantic, not visual.
Screen readers announce strong text differently, helping users understand emphasis even if they can’t see the page.
When to use <strong>
Use <strong> when the text carries serious importance or urgency.
Examples include:
- Warnings
- Key instructions
- Critical information
Avoid using <strong> just to make text bold. If the emphasis is visual only, that should be handled later with CSS.
The <em> tag: emphasis
The <em> tag is used to emphasize text, usually by changing the tone or stress of a sentence.
Example:
<p>
You should <em>always</em> double-check your HTML structure.
</p>
Browsers typically display <em> text in italics, but again, the meaning matters more than the appearance.
Screen readers often read emphasized text with a different tone, which helps users understand intent.
<em> vs <strong>
Although both tags emphasize text, they serve different purposes.
<em> adds stress or nuance.
<strong> adds importance or urgency.
You can even combine them if needed:
<p>
This action is <strong><em>permanent</em></strong>.
</p>
Use combinations sparingly, but know that HTML supports meaningful layering of emphasis.
Step-by-step: formatting a paragraph
Let’s practice formatting text inside a paragraph.
Start with this paragraph:
<p>
Learning HTML is important for building websites.
</p>
Now add emphasis and importance:
<p>
Learning HTML is <em>important</em> for building
<strong>real websites</strong>.
</p>
Save and refresh your browser. Notice how the emphasis changes how the sentence feels, not just how it looks.
The <b> and <i> tags (and why to be careful)
HTML also includes <b> (bold) and <i> (italic) tags. These tags affect appearance but do not add semantic meaning.
Example:
<p>
This text is <b>bold</b> and this text is <i>italic</i>.
</p>
While these tags still work, they are generally discouraged for meaningful emphasis. Modern HTML prefers <strong> and <em> because they convey intent.
You may still see <b> and <i> in older code or for purely visual purposes, but beginners should focus on semantic tags first.
The <mark> tag: highlighted text
The <mark> tag highlights text as if it were marked with a highlighter.
Example:
<p>
Remember to <mark>close all your HTML tags</mark>.
</p>
Browsers usually display <mark> text with a yellow background. This tag is useful for drawing attention to specific parts of content, such as search results or key takeaways.
The <small> tag: less prominent text
The <small> tag represents side comments or less important information.
Example:
<p>
HTML is easy to learn.
<small>No prior coding experience required.</small>
</p>
This tag is often used for disclaimers, footnotes, or secondary information.
Line breaks with <br>
Sometimes you want text to continue on a new line without starting a new paragraph. That’s where the <br> tag comes in.
Example:
<p>
HTML Basics<br>
Beginner Level<br>
5-minute read
</p>
The <br> tag creates a line break and does not have a closing tag.
Use <br> sparingly. Most of the time, separate paragraphs are the better choice.
Horizontal rules with <hr>
The <hr> tag creates a horizontal divider between sections.
Example:
<p>Introduction</p>
<hr>
<p>Main content starts here.</p>
This tag visually separates content and also indicates a thematic break in the page.
Quoting text with <blockquote>
The <blockquote> tag is used for longer quotations.
Example:
<blockquote>
The web is built on open standards and shared knowledge.
</blockquote>
Browsers typically indent blockquotes to distinguish them from regular text.
Inline quotes with <q>
For short quotes inside a sentence, use the <q> tag.
Example:
<p>
HTML stands for <q>HyperText Markup Language</q>.
</p>
Browsers automatically add quotation marks around <q> text.
Code-related formatting with <code>
When showing code or technical terms, the <code> tag is useful.
Example:
<p>
Use the <code><p></code> tag to create paragraphs.
</p>
Browsers display <code> text in a monospace font, which helps distinguish it from regular text.
Preformatted text with <pre>
The <pre> tag preserves spacing and line breaks exactly as written.
Example:
<pre>
Line one
Line two
Line three
</pre>
This tag is often used for code blocks or structured text where spacing matters.
Step-by-step: formatting a content section
Let’s combine several formatting tags in a real example.
Add this to your HTML body:
<h2>Formatting Tips</h2>
<p>
Always use <strong>semantic tags</strong> when formatting text.
They improve <em>accessibility</em> and readability.
</p>
<p>
Avoid using formatting just for appearance.
<mark>Meaning comes first.</mark>
</p>
<blockquote>
Clean HTML leads to clean websites.
</blockquote>
<p>
To create a paragraph, use the <code><p></code> tag.
</p>
Save and refresh. You’ve just created a well-formatted, meaningful content section.
Accessibility and text formatting
Screen readers rely heavily on semantic formatting.
<strong>indicates importance<em>indicates emphasis<blockquote>signals quoted content<code>signals technical terms
Using these tags correctly makes your content more understandable to users who rely on assistive technologies.
Common beginner mistakes with formatting
A common mistake is using formatting tags everywhere just to make text look different. This leads to cluttered, confusing HTML.
Another mistake is nesting formatting tags incorrectly or forgetting to close them.
Always check that:
- Tags are closed properly
- Formatting has a clear purpose
- Paragraphs remain readable
Practice: clean up messy formatting
Consider this example:
<p>
<b>This is important</b> and <i>this is emphasized</i>.
</p>
A better version using semantic tags would be:
<p>
<strong>This is important</strong> and <em>this is emphasized</em>.
</p>
The meaning is clearer, even if the appearance looks similar.
How formatting prepares you for CSS
Once you learn CSS, you’ll control how <strong>, <em>, and other tags look visually.
If your HTML uses the right formatting tags, styling becomes easier and more consistent across the site.
Good HTML structure always comes first.
What you should understand after this lesson
By now, you should be comfortable with:
- Using
<strong>and<em>correctly - Understanding semantic vs visual formatting
- Adding highlights, quotes, and code text
- Avoiding misuse of formatting tags
- Writing readable, meaningful content
You don’t need to memorize every tag. Focus on understanding why each one exists.
What’s next?
Now that you know how to format text inside paragraphs, you’re ready to work with structured groups of content.
In the next lesson, you’ll learn how to create lists in HTML, including ordered lists, unordered lists, and nested lists.
Before moving on, try taking a short article or set of notes and rewriting it using proper text formatting tags. Practicing with real content is one of the best ways to reinforce what you’ve learned.