About HTML Text Formatting in Telegram and Widget

HTML tags allow styling message text in bot scenarios for Telegram and Widget channels. This allows highlighting important information, adding links, and formatting text for better readability.

Context and Problem

In many scenarios, you need to highlight important information in message text:

  • Bold text for headers or key points
  • Links to external resources
  • Code or technical terms
  • Structured text with different styles

HTML formatting solves this task by allowing using standard HTML tags to style text.

Key Concepts

Channel Support

HTML tags work only for Telegram and Widget. For other channels (Viber, Facebook Messenger), HTML tags are not supported, and text displays as regular text.

parse_mode Configuration

To use HTML tags, you need to specify parse_mode: "HTML" in the message block JSON configuration. This tells the system that the text contains HTML tags and they need to be interpreted.

Supported HTML Tags

Basic Formatting Tags

  • <b>text</b> — bold text
  • <i>text</i> — italic
  • <u>text</u> — underlined text (Widget only)
  • <s>text</s> — strikethrough text
  • <a href="https://www.example.com/">link</a> — link
  • <code>code</code> — inline code (monospace font)
  • <pre>code block</pre> — code block (multiline code)

Approach Options

HTML vs Markdown

HTML formatting:

  • ✅ Pros: Standard approach, supported by Telegram and Widget, many capabilities
  • ❌ Cons: Does not work for Viber and Facebook Messenger

Markdown formatting:

  • ✅ Pros: More readable syntax, supported by some channels
  • ❌ Cons: Limited support in different channels

Why we use HTML: HTML is the standard format for Telegram Bot API and Widget, ensuring compatibility and predictable behavior.

Adopted Solutions

Limited Channel Support

HTML tags work only for Telegram and Widget due to API limitations of other channels. For Viber and Facebook Messenger, you need to use other formatting methods (for example, keyboard styling for Viber).

Support for Only Basic Tags

The system supports only a limited set of HTML tags that are safe and supported by Telegram API. This ensures compatibility and avoids security issues.

Links in <a> tags must have https:// or http:// protocol. This is a Telegram API requirement for security.

Implications for Users and Implementation

For Integrators

When using HTML formatting, it's important to:

  1. Check channel — HTML works only for Telegram and Widget
  2. Add parse_mode — must specify parse_mode: "HTML" in JSON configuration
  3. Use correct tags — only supported tags will work
  4. Check links — links must have https:// or http:// protocol

Common Errors

Error: HTML tags do not work in Viber
Problem: HTML formatting is not supported by Viber API
Solution: Use keyboard styling for Viber or regular text

Error: HTML tags display as text
Problem: parse_mode: "HTML" is not specified in configuration
Solution: Add parse_mode: "HTML" to block JSON configuration

Error: Link does not work
Problem: Link does not have https:// or http:// protocol
Solution: Add protocol to link: https://example.com

Limitations

  • HTML tags work only for Telegram and Widget
  • Not all HTML tags are supported (only those listed above)
  • For Widget, some tags may display differently than in Telegram
  • Links must have https:// or http:// protocol

Usage Examples

Bold Text

<b>Important Information</b>

Italic

<i>Additional Information</i>

<a href="https://example.com">Go to Site</a>

Style Combination

<b>Bold</b> and <i>italic</i> text with <a href="https://example.com">link</a>

Code

Use command <code>git push</code> to send changes.