Converting from HTML4 to HTML5 and CSS

I’m one of those people who write HTML in a text editor (either directly, or into a program which later generates the pages). Still, I felt the urge to pretend to be modern and decided to convert my HTML4 pages into HTML5. Since things are not that straightforward (e.g. the <center> tag must be replaced by different structures depending on whether it is wrapped around text or an image), I decided to list here what I puzzled together using Google.

Note that these are ad-hoc solutions, where in most cases code is replaced locally only by pasting CSS code into a style=”<css code>” attribute inside a HTML tag. When writing a new page, you should do this properly, using CSS files instead.


I use the HTML validator until all errors are gone, then I use the CSS validator. Make sure you change the doctype before using the validators (see below).


From e.g.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">



After this step, you can start using the validators above.

HTML language

Replacement of common HTML tags and attributes.


  • <div> is a block element (providing newline), <span> can be used in mid-sentence
  • lengths should always get a unit (e.g. px, %, em). The only exception is a zero length, since 0 px = 0 cm = 0%.


  • <meta http-equiv=”Content-Language” content=”en”>      <html lang=”en”>
  • <body background=”bgimg.png”>   
      <style>body {background-image:url('bgimg.png'); margin-top:0px;}</style>


Text size:

Exact mappings of size      font-size depend on context, e.g.:

  • <font size=”-1″>      <p style=”font-size:85%; margin:0;”>
  • <font size=”2″>      <p style=”font-size:65%; margin:0;”>

Centering text:

  • <center>text      <p style=”text-align:center; margin:0;”>text
  • <h1 style=”text-align:center;”>


  • <center><img…      <img style=”display:block; margin-left:auto; margin-right:auto;”>
  • <img style=”border:none;”> == <img style=”border:0;”> ? Same for iframe, table
  • <img align=”left”      <img style=”float:left;”


  • put id=”title” in the nearest tag, or
  • <a name=”title”></a>      <div id=”title”></div>


Table alignment:

  • <center><table…      <table style=”margin:0 auto;”>
  • Right-align table: <table style=”float:right;”>

Table rows and cells:

  • <tr align=”center”>      <tr style=”text-align:center;”>
  • <td width=”5%”>      <td style=”width:5%;”>
  • <td valign=”top”>      <td style=”vertical-align:top;”>
    • or top      text-top

Table padding and spacing:

  • cellpadding=”0″      style=”padding:0;” # in td, th
  • cellspacing=”5″      style=”border-collapse:separate; border-spacing:5px;” # in table
  • cellspacing=”0″      style=”border-collapse:collapse; border-spacing:0;” # in table

Cetera tabularum:

  • background colour: background-color:#DDDDDD;
  • remove table summaries


  • <ul style=”line-height:2em; margin-top:-0.7em;”>


  • scrolling=”no”      style=”overflow:hidden;”
  • frameborder=”0″      style=”border:none;”
  • allowTransparency=”true”      leave out; default bg colour


  • remove language=”JavaScript” from <script>
This entry was posted in All, Software and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s