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.

Tools

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

Doctype

From e.g.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to

  <!DOCTYPE HTML>

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

HTML language

Replacement of common HTML tags and attributes.

Notes

  • <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%.

Head

  • <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>
    </head>
    <body>

Text

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;”>

Images

  • <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;”

Anchors

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

Tables

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

Lists

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

iFrames

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

Cetera

  • remove language=”JavaScript” from <script>
Advertisements
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s