This is an archive of an inactive wiki and cannot be modified.

Minimizing unnecessary white space

This technique gives a possible implementation for the CategoryBpMinimizeMarkup using simple guidelines on how to format your HTML and CSS.

General points

There are many suggestion on how to minimize white space. It is up to the author to decide where and how to interpret the guidelines put forth here.

Important is, in the end, that the total amount of whitespace does not exceed sensible limits or, for mobileOK Basic and mobileOK websites, does not exceed the specified limits. (see the mobileOK document http://www.w3.org/TR/mobile-bp/ for further details)

HTML

The following section illustrates how white space can be minimized within HTML.

Coding example 1

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <title>Title of this page</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>

Guidelines

The above example shows first the XML declaration, followed by the doctype declaration followed by the structural modules of XHTML.

Example, with "." instead of spaces:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
..<head>
....<title>Title of this page</title>
..</head>
..<body>
....<p>Moved to <a href="http://example.org/">example.org</a>.</p>
..</body>
</html>

CSS

The following section illustrates how white space can be minimized within CSS.

Coding example 2

ADDRESS,BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, 
H2, H3, H4, H5, H6, IFRAME, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, 
HR, MENU, PRE  { display: block }
TD, TH         { display: table-cell }
LI             { display: list-item }
HEAD           { display: none }
TABLE          { display: table }
TR             { display: table-row }
THEAD          { display: table-header-group }
TBODY          { display: table-row-group }
TFOOT          { display: table-footer-group }
COL            { display: table-column }
COLGROUP       { display: table-column-group }
CAPTION        { display: table-caption }
.......

Guidelines

Example, with "." and "/" instead of spaces:

LI../..../..../{ display: list-item }

Back to BestPracticesList



CategoryPhp CategoryXhtml CategoryBpMinimize

Contributions to this wiki are governed by the W3C policies for Contribution to W3C' wiki on Mobile Web.