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.)



&lt;!DOCTYPE HTML&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;style type="text/css"&gt;
            .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;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body class="bodyBody"&gt;
        &lt;div class="divReturnAddress"&gt;
            Lopes de Almeido, Evanildo&lt;br/&gt;
            Bl&amp;auml;siring 161 &lt;br/&gt;
            4057 Basel &lt;br/&gt;    
            &lt;br/&gt;
            01 Dezember, 2012
        &lt;/div&gt;

        &lt;div class="divSubject"&gt;
            Betreff:  Vertretung waehrend Reise
        &lt;/div&gt;

        &lt;div class="divContents"&gt;
            &lt;p&gt;
                Sehr geehrte Frau Graf,
            &lt;/p&gt;

            &lt;p&gt;
                Ich fliege nach Brasilien am 29. Dezember 2012 f&amp;uuml;r 6 Wochen.
                Meine Nichte kann mich vertreten.  Sie arbeitet sehr gesissenhaft.
                Sie heisst Yasmin.  Ihre Nummer ist xxx.
            &lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="divAdios"&gt;
            Freundliche Gr&amp;uuml;sse &lt;br/&gt;
            &lt;!-- Space for signature. --&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            &lt;br/&gt;
            Evanildo Lopes do Almeida &lt;br/&gt;
            Hauswart Binningerstrasse 19/23 &lt;br/&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
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 (&lt;link rel="stylesheet" href="letter.css" /&gt;).

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 &lt;meta charset="utf-8" /&gt; 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: &lt;title&gt;Vertretung während Reise – 1. Dezember 2012&lt;/title&gt;

Return address

The use of &lt;br/&gt; 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:

&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt; &lt;!-- first element so that the encoding is applied to the title etc. --&gt;
    &lt;title&gt;Vertretung während Reise – 1. Dezember 2012&lt;/title&gt;
    &lt;link rel="stylesheet" href="letter.css" /&gt;
  &lt;/head&gt;

  &lt;body&gt;

    &lt;header&gt; 
      &lt;address class="return-address"&gt;
        Lopes de Almeido, Evanildo&lt;br/&gt;
        Bläsiring 161 &lt;br/&gt;
        4057 Basel &lt;br/&gt;    
      &lt;/address&gt;

      &lt;time datetime="2012-12-01"&gt;01 Dezember, 2012&lt;/time&gt;
    &lt;/header&gt;

    &lt;h1&gt;
      Betreff:  Vertretung waehrend Reise
    &lt;/h1&gt;

    &lt;div class="content"&gt; &lt;!-- use this div only if it is required for styling --&gt;
        &lt;p&gt;
          Sehr geehrte Frau Graf,
          &lt;br class="salution" /&gt;

          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.
        &lt;/p&gt;
        &lt;p&gt;
          …
        &lt;/p&gt;
      &lt;/div&gt;

      &lt;p class="adios"&gt;
        Freundliche Grüsse 
        &lt;br class="greets" /&gt;
        Evanildo Lopes do Almeida &lt;br/&gt;
        Hauswart Binningerstrasse 19/23
      &lt;/p&gt;

  &lt;/body&gt;

&lt;/html&gt;