HTML Text Formatting

HTML formatting tags help you control both the appearance and meaning of your text on a webpage. These elements not only make your content look better, but they also improve accessibility, SEO, and readability, ensuring that your text is engaging and easy to understand.

Example:

<strong>This text is bold for emphasis.</strong>
<em>This text is italicized for emphasis.</em>
<mark>This text is highlighted.</mark>

Using these tags gives your content extra impact while maintaining a clear, accessible structure for all users.

Why Use HTML Formatting

• Enhanced Readability. Formatting like bold, italics, or emphasis makes important information stand out, helping readers quickly grasp key points.
• Better Accessibility. Tags like <em> and <strong> aren’t just for style—screen readers interpret them in ways that help visually impaired users understand content better.
• Boost SEO. Semantic tags can give search engines hints about which content is important, potentially improving your SEO.
• Clear Content Structure. Proper formatting helps break up and organize text, making it easier for users to scan and navigate your content.

Physical Tags in HTML

Physical tags in HTML are all about visual styling—they change the way text looks, but don’t add any extra meaning for accessibility or SEO.

• <b>: Makes the text bold, purely for visual emphasis.
• <i>: Italicizes text without adding semantic importance.
• <u>: Underlines the text, great for visual impact.
• <sub>: Displays text as a subscript, typically used for chemical formulas or footnotes.
• <sup>: Renders text as superscript, often used for exponents or footnotes.

These tags give you quick control over how text looks, but for more meaningful styling, semantic tags like <strong> and <em> are a better choice.

Logical HTML Tags

Semantic tags do more than just style your text—they also give it meaning, making content more accessible to browsers, search engines, and assistive technologies.

• <strong>: Marks text as important, often bold, signaling emphasis to both users and search engines.
• <em>: Adds emphasis to text, usually italicized, helping screen readers and browsers understand the importance.
• <mark>: Highlights text, drawing attention to key points.
• <del>: Shows deleted or removed text with a strikethrough, useful for edits or revisions.
• <ins>: Highlights inserted or added text, often underlined.

These tags help improve the structure and accessibility of your content while still giving it a visually distinct style.

HTML Formatting Tags

Tag	Description
<b>	Bold text
<strong>	Important (bold) text
<i>	Italic text
<em>	Emphasized (italic) text
<mark>	Highlighted text
<small>	Smaller text
<sub>	Subscript text
<sup>	Superscript text
<del>	Deleted (strikethrough) text
<ins>	Inserted (underlined) text
<u>	Underlined text
<code>	Inline code text (usually monospace)
<kbd>	Keyboard input text
<pre>	Preformatted text, maintains white space and line breaks
<cite>	Citation reference text
<tt>	Teletype text, typically monospace (deprecated)
<strike>	Strikethrough text (deprecated, use <del> instead)

The <tt> and <strike> tags have been deprecated in HTML5, so it's recommended to use alternatives like <code> for monospaced text and <del> for strikethrough text.

HTML <b> - Bold Text

The <b> tag is used to make text bold, but it doesn’t add any extra importance or meaning—just a visual styling choice.

Example:

<b>This text is bold.</b>

Output:

This text is bold.

HTML <strong> - Important Bold Text

The <strong> tag not only makes text bold but also signals that it carries some significance. Screen readers pick this up too, making it a better choice for important content.

Example:

<strong>This text is important and bold.</strong>

Output:

This text is important and bold.

HTML <i> - Italic Text

The <i> tag makes text italic for visual emphasis but doesn’t imply any extra importance. Use it when you want something to stand out a little more visually.

Example:

<i>This text is italicized.</i>

Output:

This text is italicized.

HTML <em> - Emphasized Text

The <em> tag adds both visual emphasis (italic text) and extra meaning, signaling that the content is important or stressed.

Example:

<em>This text is emphasized and italicized.</em>

Output:

This text is emphasized and italicized.

HTML <mark> - Highlighted Text

The <mark> tag highlights text, typically with a yellow background. It’s great for drawing attention to key points.

Example:

<mark>This text is highlighted.</mark>

Output:

This text is highlighted.

HTML <small> - Smaller Text

The <small> tag reduces the size of the text, which is commonly used for disclaimers or fine print.

Example:

<small>This text is smaller than normal.</small>

Output:

This text is smaller than normal.

HTML <sub> - Subscript Text

The <sub> tag is used for subscript text, making it smaller and lowered. It’s often used for things like chemical formulas or footnotes.

Example:

H<sub>2</sub>O

Output:

H₂O

HTML <sup> - Superscript Text

The <sup> tag makes text superscript, raising it above the baseline. It’s useful for things like exponents or ordinal numbers.

Example:

E = mc<sup>2</sup>

Output:

E = mc²

HTML <del> - Strikethrough for Deleted Text

The <del> tag shows that text has been deleted or is no longer relevant by applying a strikethrough. It’s handy for edits or revisions.

Example:

<del>This text has been deleted.</del>

Output:

This text has been deleted.

HTML <ins> - Inserted (Underlined) Text

The <ins> tag is used to indicate text that has been added or inserted. It’s usually underlined.

Example:

<ins>This is newly inserted text.</ins>

Output:

This is newly inserted text.

HTML <u> - Underlined Text

The <u> tag underlines text, which can be useful for emphasis or to mimic hyperlinks, though it’s less common nowadays.

Example:

<u>This text is underlined.</u>

Output:

This text is underlined.

HTML <code> - Inline Code Text

The <code> tag is used to display inline snippets of code with a monospaced font. It’s great for showing code examples within paragraphs.

Example:

<code>console.log('Hello, world!');</code>

Output:

console.log('Hello, world!');

HTML <kbd> - Keyboard Input Text

The <kbd> tag represents keyboard input, usually rendered in a monospaced font, making it perfect for instructions like shortcuts or commands.

Example:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

Output:

Press Ctrl + C to copy.

HTML <pre> - Preformatted Text

The <pre> tag preserves both spaces and line breaks, making it ideal for showing code blocks or text that requires exact formatting.

Example:

<pre>
Line 1
  Line 2
    Line 3
</pre>

Output:

 Line 1 Line 2 Line 3 

HTML <cite> - Citation Reference Text

The <cite> tag is used to reference the title of a work, such as a book, article, or research paper, and is typically rendered in italics.

Example:

<cite>The Great Gatsby</cite> is a classic novel by F. Scott Fitzgerald.

Output:

The Great Gatsby is a classic novel by F. Scott Fitzgerald.

FAQs

How to edit text in HTML?

To edit text in HTML, you can use various tags to change its appearance and structure. For quick inline edits, you can use tags like <b>, <i>, or <u>, or apply CSS through the style attribute to control things like color, font size, and alignment. For more complex styling, it’s best to use external CSS for better control and organization.

What are the three special text formatting tags?

Three commonly used special text formatting tags in HTML are:

• <strong>: For important, bold text.
• <em>: For emphasized, italic text.
• <mark>: To highlight text.

These tags not only style your text but also add extra meaning for accessibility and SEO.

What is the difference between <b> and <strong>?

<b> makes your text bold for purely visual reasons, but <strong> does more than that. It signals to browsers, screen readers, and search engines that the text is important, making it both visually bold and semantically meaningful.

Why use semantic tags instead of physical tags?

Semantic tags, like <strong> and <em>, help with accessibility and SEO by telling browsers and search engines what’s important or emphasized in your content. Physical tags, like <b> and <i>, only change the look of the text without adding any context or meaning. Semantic tags give you both style and structure.

Can I use both <i> and <em> together?

Yes, you can use both together, but it’s not necessary. When you want to emphasize text with both importance and italics, stick with <em>, as it already does both jobs. This way, you're keeping your code clean while improving accessibility.