User name:
Forgot User name / Password?

Register (Free)

Please take a minute to read our privacy policy.
Login or register
About | Contact | Blog | Site map

HTML has evolved a lot from the first version. Nowadays, a web designer can decide exactly the size of the text, create styles (a concept similar to styles in a word processor – more on that later), set the position and so on. But in the early days, HTML was much more frugal.

The web was used for text. You had a series of tags to identify the document’s hierarchy, called the “heading tags” <h1>, <h2>, <h3>… and their closing tags, </h1>, </h2>, </h3>. H1 is the main heading. It's big, bold, often too big, in fact. H2 is a secondary heading, slightly smaller. H3 is even small... You got the idea.

Although there are much better ways nowadays to format the page, Heading tags remain and are used by search engines when they analyze a page, the rationale being that if a word is in a heading, it is more relevant to the page content than a word inside the text somewhere. This is one of the reasons why many web sites still use those tags even. The other key reason is accessibility: without these tags, how would screen readers know this text is a heading? As a translator, these tags tell you that you are translating a heading, and its position in the document's hierarchy.

They are also a warning that you have to be aware that the words inside these tags. Exactly. Keywords. Usually, you will see the same keywords used in the H tags and in the “keywords” Meta tag. Make sure that you use the same keywords. Search Engines analyze, amongst other things, the number of times a specific keyword appears compared to the total number of words in the page, and where. Try to keep the same proportion as the original document, and if a keyword is in a header, make sure your translation leaves a keyword in that same header.

This is old school SEO. It is far less important than it was in the days of yore, before Google came on the scene, BUT it is still a relevant factor. Keywords must be consistent accross the page. If the title says "Beachfront properties", and the link says "Check out our Beachfront properties", you better make sure that the key phrase is the same: no "Check out our houses on the beach".

HTML contains a number of redundant tags, like <b> and <strong>, or old ones that you almost don’t see anymore, like “<big>” (self explanatory, I think). Look for these. Too easy to concentrate on the “standard” <b>, <i>... and forget to handle those old things. you may need to move them, too.

Next, styles and style sheets. A “style” is a series of attributes defined in advance, either in the header of the document, or in a separate file called a style sheet.

To understand styles, you need to understand what problems they resolve:

Suppose you want the big titles in your web site to be bold, italic, blue, and centered. In good old HTML, you would write:

<h1><b><center><font color=“blue”>Title 1</font></center></b></h1>
<h1><b><center><font color=“blue”>Title 2</font></center></b></h1>
<h1><b><center><font color=“blue”>Title 3</font></center></b></h1>
<h1><b><center><font color=“blue”>Title 4</font></center></b></h1>

<h1><b><center><font color=“blue”>Title 356</font></center></b></h1>

Pretty clumsy, isn’t it? And that's just 4 simple attributes. The solution is to define a style with all these specifications: It’s bold, it’s blue, it's centered, and you give it a name, i.e.: bbc (For Bold Blue Centered. Just an example. It’s normally named so that one remembers easily what it is). Then, you don't need to write it every time. In the header of the page, you write:

<style type="text/css">
text-align: center;
font-weight: bold;
color: blue;

Then, anytime you have a title, you write

<h1 class=“bbc”>Title 1</h1>
<h1 class=“bbc”>Title 2</h1>
<h1 class=“bbc”>Title 3</h1>

But the best of all: If once you are finished, you decide that it would be nicer in red, or that italics would be cool, you don't have to look all over the document and change all the tags, each time. You simply change one word in the style definition and every instance change immediately. This not only saves a lot of time when you design the page, but also make the page size smaller, and thus faster to load.

These days, the main role of styles has evolved from just formating the page to handling the layout, applying effects, creating animations, and, in some cases... adding text on the page. Sadly, this means that there may be translatable text inside a CSS file.

That text will be found in the "content:''" property. Since this is a series on HTML, we aren't going to discuss this in detail, but still, this is something to be aware of. A typical use case for this property is to display text when you move your mouse over a button or a link. If the client sends a css file, search for "content:" just in case. If you have to change the CSS file, make sure you let your client know, because quite often, the CSS file is the same for all languages.

Page 1   2   3   4   5   6