Business Letter in HTML

Here's my first effort at reformation: a business letter I wrote for a friend. I would appreciate a review. (Yes, I know this is a trivial example and it would be much more beneficial to have something reviewed that is more complicated. But I want to nip bad practices in the bud now, before they become embedded in me.)





.bodyBody {
margin: 10px;
font-size: 1.50em;
}
.divHeader {
text-align: right;
border: 1px solid;
}
.divReturnAddress {
text-align: left;
float: right;
}
.divSubject {
clear: both;
font-weight: bold;
padding-top: 80px;
}
.divAdios {
float: right;
padding-top: 50px;
}




Lopes de Almeido, Evanildo

Bläsiring 161

4057 Basel



01 Dezember, 2012



Betreff: Vertretung waehrend Reise





Sehr geehrte Frau Graf,




Ich fliege nach Brasilien am 29. Dezember 2012 für 6 Wochen.
Meine Nichte kann mich vertreten. Sie arbeitet sehr gesissenhaft.
Sie heisst Yasmin. Ihre Nummer ist xxx.




Freundliche Grüsse








Evanildo Lopes do Almeida

Hauswart Binningerstrasse 19/23






CSS

Since this is a single document, not a webpage of a website, it's fine to use internal CSS in the style element instead of linking to an external stylesheet. However, if you plan to write more letters in the future, you should create a stylesheet that includes all the shared styles that are typical for a letter and link to it from each letter (`).

You could name your classes more meaningful, but this is only a good practice, not a requirement.

You could omit the class on body.

Encoding/Charset

You should add the encoding to the document. If you want to use UTF-8 (recommended), add as the first child of the head element.

title element

You are missing the title element, which is required. Add it as child of head: Vertretung während Reise – 1. Dezember 2012

Return address

The use of
is correct here. However, the date is not part of the address, and therefor it shouldn't be separated by br. Put the date in its own element instead. HTML5 offers the time element.

Because this is your address (and not the recipient address), you should enclose it in the address element.

You could enclose the return address and the date in the header element. It might also be possible to enclose the return address in a footer element and the time in a header (probably together with the h1), but this could be overkill ;)

Subject line / Betreff

Instead of using a meaningless div for the subject, you should use h1 here, as it is the heading of the whole document.

Salution / Anrede

It's arguably if the salution is a paragraph on its own, or if it is part of the first paragraph. I think when followed by a comma, it should be part of the following paragraph. But this is not undisputed (I have no detailed knowledge about the semantics of a letter).

Greets

The use of the br element to separate the greeting from your anme is correct here. But don't use several br elements just because you want to add more spacing. Use only one and apply a class to it, so that you can give it a higher vertical margin (CSS).

Also, include this in a p instead of a div.

Example

So your letter could look like:





Vertretung während Reise – 1. Dezember 2012







Lopes de Almeido, Evanildo

Bläsiring 161

4057 Basel



01 Dezember, 2012



Betreff: Vertretung waehrend Reise





Sehr geehrte Frau Graf,


Ich fliege nach Brasilien am 29. Dezember 2012 für 6 Wochen.
Meine Nichte kann mich vertreten. Sie arbeitet sehr gesissenhaft.
Sie heisst Yasmin. Ihre Nummer ist xxx.



…




Freundliche Grüsse

Evanildo Lopes do Almeida

Hauswart Binningerstrasse 19/23




`

StackExchange Code Review Q#19204, answer score: 6