Quantcast
Home / DIGITAL MARKETING / A Google Update Brewing? / Html5 / Converting from HTML4 to HTML5 and CSS

Converting from HTML4 to HTML5 and CSS

Since HTML5 is out, as a web developer, our next best thing is to convert our old HTML pages into new HTML5 pages to stay up-to-date. And how do we do that? very simple. Just you need to modify or change a few lines of your old HTML code. To be more precise, let’s have a look at the sample HTML file which was written with HTML 4.0

html4_samplepage

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.

html5

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>
Facebook Comments

About chinmay

Check Also

Interview Question For SEO

SEO Interview Questions: SEO Interviewing Questions and Answer>>> In the field of internet marketing Search …

Web Designing

Did we ever estimate mobile cell mobile phones to battle computers? On the other, it …

Leave a Reply

Your email address will not be published. Required fields are marked *