20 key HTML tags for translating websites 🔗
Most common HTML tags for multimedia translation and website localization.
As website and app translators, AMPERSOUND often deals with unconventionally formatted texts. While some clients send their documentation in plain text (or unformatted), others choose to have us create a copy of the original and translate it while preserving the formatting.
As anything that falls outside of Word can often give you a hard time -no one is born knowing everything-, today we want to share the HTML tags that are most commonly used in blog posts for inbound marketing, newsletters for email marketing, or in a company’s landing page, among others. They can also come in handy for copywriting and transcreation assignments.
At the bottom of this article, you will find a downloadable list of all these tags for you to refer to any time.
All set? Come on, you’ll see how easy it is! 😊
Basic HTML syntax
Before we start looking at tags, you need to understand the basic structure of HTML, which consists of three main elements:
- Content. Everything that is between the opening and closing tags is called content.
- Opening and closing. Tags have a beginning and an end, and are expressed as follows: at the beginning and to enclose the content.
- Element. Tags and content form an element altogether. Thus, one often speaks of “element “, for example, to refer to the whole set.
Note: Some elements do not include content or closing tags, such as images.
Got it? Well, that’ s clear, isn’t it? Let’s move on to the 20 HTML tags we promised you. As mentioned above, these will be enclosed in <>, indicating that they are tags.
20 key HTML tags for translating websites
Head & Title vs Body
These are the two main tags that allow us to include visible and non-visible text. The <head> </head> tags usually include metadata, such as the language code and keywords, but also the text of the tab displayed in the browser toolbar through the <title> </title> element, which is relevant for SEO.
On the contrary, inside the <body> </body> tags you will find the body of your web page, the content that is visible to the user.
Div & Span
Don’t get too hung up on these. Basically, <div> and <span> tags are used to define parts of the document: <div> in block, <span> inline. They are useful when assigning attributes HTML or otherwise, such as semantic or stylistic attributes. If you see them, and you will, keep them in mind.
Headings and paragraphs
Titles in HTML are expressed with the tag pairs <h1>, <h2>… <h6>, from most to least important. Ideally, we should respect the tiers and not skip any of them. For example, h3 will follow h2, which in turn will be preceded by h1. Just as we would not start an article with the heading of a subsection, neither would we do so in HTML. Makes sense, right?
Once we have our header, we can also include paragraphs with the <p> and </p> tags. It’s that simple. If you need a line break instead of a paragraph change, <br> is your tag.
There are two types of lists: bulleted lists and numbered lists.
Bulleted lists (<ul> </ul>):
- • Tomatoes
- • Potatoes
- • Lettuce
Numbered lists (<ol> </ol>):
- Remove the cover.
- Tighten the screw.
- Replace the cover.
Each list item goes between <li> </li> tags.
There are two elements for highlighting words: <strong> and <b>. Here are the differences:
The <strong> </strong> tags are used to apply semantic emphasis on certain words (SEO and accessibility), while <b> </b> tags are used for aesthetic or layout purposes.
Again, there are two ways to apply italics in HTML, and the differences are the same as with bold. <em> </em> tags provide semantic emphasis, while <i> </i> tags are used for aesthetic purposes.
Although this typographic resource has almost completely disappeared in web copywriting, since we usually rely on bold and italics, it is worth mentioning that the <u> </u> tags are also used in HTML for underlining.
We might want to cross out
words in the body of our text, or cross out the actual price of a product and include the discounted price afterwards: “Discount of 30% ( 100 € 70 €)”. The tag you are looking for is the <s> </s> pair.
Hyperlinks are as essential on the Web, so we cannot ignore them. These are expressed with the <a> element and the href attribute: <a href:”example.com”>Text with embedded link</a>.
Note that the URL to where you want to redirect the user is enclosed in quotation marks. If you have to replace an original URL with the localized version, do not remove the quotation marks.
In HTML, simple images are added with the <img> element. If we want to specify the image path, we use the src attribute: <img src=”image.jpg”>.
As mentioned in the basic HTML syntax section, images are an empty element: they do not include content or closing tags. However, we can add an alternative text describing the image to enable accessibility. To do this, we use the alt attribute: <img src=”image.jpg” alt=”Picture of a tulip”>.
Given what we’ve seen so far, you might be able to guess what the translatable text is, right? This is a clear example that not everything that appears between <> automatically becomes untranslatable.
Buttons are especially fun in email marketing, for example, where we can get creative and encourage users to click a button with an enticing call to action, commonly referred to as a CTA.
Now, a button can also have a specific and simple purpose. In fact, in copywriting, buttons are typically simple and clear, which minimizes the user’s uncertainty. See the following example of a poorly suited button we have created with the tags <button> </button>:
Don’t worry, it’s a useless button, nothing happens if you press it. We just wanted to show you an example. If we decided to redirect you to another page, what attribute should we use according to the Links section?
Start localizing websites
Easy, right? It wasn’t that bad. Of course, there are more elements to consider, but we believe that these HTML tags will allow you to approach web translations with more confidence.
And finally, here you have a list of the tags we have seen in this article (in Spanish). You can also download it as a PDF file. Keep it safe, you’ll need it!