Text in italics in HTML

There is several ways of getting text in italics. The most simple way, and often also the best way, is the tag <I> (italic). The four other versions are <EM> (emphasized), <CITE> (citation), <DFN> (definition) and <VAR> (variable), and originally they were tags created for special purposes. The five tags give the same effect, text in italics. From a programming point of view, <I> is preferable as it takes up the least space in the programming, thus making them less intrusive when working with the source codes.

A piece of text in italics will look like this as code:







On the page, it looks like this:

A metod offering more options is STYLE="font-style:italic". Styles is a way of modulating tags, e.g. if you want a paragraph written in italics: <P STYLE="font-style:italic"> </P>. The method has two advantages:

1. The more complex elements are easier to control, e.g. a row in a table can be done in italics by putting it on the <TR> tag, which is the tag for table rows.
2. Font-style works for CSS, which offers some advantages when you get to the more advanced part of programming.

A piece of text in italics, here used on a SPAN tag, will look like this as code:


The result is:

There is a variation of italics called oblique. Where italics for some font types changes details on the font e.g. the letter f in Times New Roman, which changes from f to f, oblique just tilts the font to the right, without changing anything else. Then the letter f in Times New Roman looks like this: .

Traditional word processing on computer can only do italics, and on web sites, only a few fonts display a difference between italics and oblique. In principle oblique exists as a style, where you use STYLE="font-style:oblique". It just isn't working. For a font like Times New Roman the command oblique will give italics, with changes in the font looking exactly like STYLE="font-style:italic".

Fortunately there is a workaround for this. The transform property, which is a part of CSS3 offers the possibility of skewing objects in various ways. The option skewX only skews along the x-axis, i.e. along the line, and you just handle it as a CLASS in your style sheet. If we make a class called Oblique, where we skew the object 15 degrees to the right, it looks like this in the style sheet:



We can now use it as any other class we use. The only thing to be aware of, is that some tags, e.g. SPAN, can't use transform, so here you have to use DIV instead. As DIV starts and ends with a new line, you have to have an additional STYLE="display:inline-block" to have the effect equivalent to SPAN. Then the code looks like this:


The result is:



If you know that everything in oblique has to be inline as in the example, you can of course make it a part of the class, like this, so you don't have to write both class and style: