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 again small... You got the idea.

Although there are much better ways in current HTML to arrange the display, the H tags have remained 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. This is the main reason why many web sites still use those tags even if that means a little bit more work. 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.

For the same reason, 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">
<!--
.bbc{
text-align: center;
font-weight: bold;
color: blue;
}
-->
</style>

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.

Page 1   2   3   4   5   6