Markup tags overview
Markup tags are symbols inserted into a rich-text document to define its structure, formatting, and relationships between elements.
Some tags control layout or hierarchy, while others determine how specific text appears, for example, bold, italic, underline, hyperlinks, or images.
Unbabel supports the correct handling and placement of these markup tags to ensure that all formatting and structural elements are accurately preserved during translation.
Markup tag appearance and behavior
Markup tags are displayed as gray blocks numbered according to their position in the source segment:
These numbers help identify matching formatted sections between the source and target but do not need to follow the same order in the target segment.
If the target language’s sentence structure differs from the source, a different tag order is both acceptable and expected.
Markup tags have distinct shapes to make them easier to interpret at a glance:
-
Open tags (e.g.,
<strong>for bold,<em>for italic) appear as a numbered block with an arrow pointing right (→), marking the start of a formatted section. -
Closing tags (e.g.,
</strong>,</i>) appear as a numbered block with an arrow pointing left (←), marking the end of that section. -
Self-closing tags (e.g.,
<img/>for images,<br/>for line-breaks) appear as square numbered blocks, since they do not have a matching closing tag.
Tag-type information
You can view the tag information by hovering over the specific tag:
You will see a tooltip displaying the corresponding information. However, the details may not always be intuitive, as they depend on the source file.
Below are a few guidelines for the most common tags, but if you encounter a tag type that is not listed, we recommend further investigation:
| Tag type | Meaning |
| a | link |
| p | paragraph |
| strong | bold |
| br | line break |
| em | italic |
| sup | superscript |
| sub | subscript |
| li | list item |
You can customize the level of tag information displayed on hovering by accessing the settings button available in the footer:
This opens a dropdown with a toggle to "Expand HTML tags" or "Collapse HTML tags".
- When collapsed, the tooltip shows summarized tag information (e.g., bold, link, paragraph).
- When expanded, the tooltip displays the raw tag information, which may vary depending on how the tag is generated by the customer’s system.
Positioning markup tags
When you receive a task with markup tags, your goal is to move them, if necessary, to match positions between source and target text within the same segment. You can do so by either:
- Using your mouse to drag and drop the markup tags to their correct position
- Opening the Smart Actions menu by pressing the “/” key and adding a markup Tag at the current cursor position
What are some common markup tag errors and how do I resolve them?
Some markup tag errors to watch out for include, but are not limited to:
Misplaced opening or closing markup tag
This is where paired tags on the source don’t have the same position on the target. To be correct, source and target tags should wrap identical content.
Example:
- Source: [1]I’m[/1] Rodolphe
- Target: [1]Je[/1] m’appelle Rodolphe
Correction: [1]Je m’appelle[/1] Rodolphe
Wrong markup tag order
A closing markup tag should come after its corresponding opening one.
Example:
- Source: [1]Hello[/1]
- Target: [/1]Bonjour[1]
Correction: [1]Bonjour[/1]
Intersecting markup tags
Markup tags should hug text like layers of an onion. The order of closing tags should be the opposite order of their corresponding opening tags.
Example:
- Target: [1][2]Bonjour[/1][/2]
Correction: [1][2]Bonjour[/2][/1]
Misplaced self-closing markup tags
This is where self-closing tags on the source don’t have the same position on the target.
Example:
- Source: [1][2]Hello
- Target: [1]Bonjour[2]
Correction: [1][2]Bonjour
Misplaced markup tags around whitespace/punctuation
This is where tags on the source have a leading or trailing whitespace/punctuation mark on the source but not on the target, and vice versa.
Example:
- Source: [1]Hello,[/1]
- Target: [1]Bonjour[/1],
Correction: [1]Bonjour,[/1]
Why can’t I remove markup tags?
To be able to submit tasks, we need to validate that there are an equal number of tags in the source text and in the target text of the same segment. Therefore, the interface will not allow you to permanently remove a markup tag from a segment. If you attempt to do so, the removed tag will automatically be appended to the segment.
If you encounter a situation where a markup Tag does not translate correctly from source to target, you can instead empty the contents spanned between the opening and closing tags without removing the tags themselves. This might come in handy in situations where the target language is prone to contractions or a character limit is enforced on a segment, such as in the following example:
- Source: [1]Click[/1] [2]here[/2] [3]to access[/3]
- Target: [3]Aceda[/3] [2]aqui[/2][1][/1]).
Also, this is the solution you may need to use when translating dates in English that have a superscript th, as you can see in the examples below:
- Source: John was born on April 5[1]th[/1].
-
Target: John wurde am April 5. geboren[1][/1].
- Source: July 4[1]th[/1] is a holiday for Americans.
- Target: Le 4 juillet est un jour férié por les Américains[1][/1].
How do I report issues with markup Tags?
If you encounter any problems or issues while working on tasks with markup tags, we strongly recommend that you submit a support request at the following link. To help us troubleshoot your issue quickly, please don’t forget to add the following details to your request:
- Your Unbabel-registered email address
- Request subject
- Description including the task ID and/or browser URL, segment number and/or text, error messages and steps to reproduce the issue
- Language pair
- Topic
- Attachments including screenshots of the segment(s) and/or task