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
- 1 Following structure
- Each HTML document consists of structural elements that divide the document into its parts. Formatting of HTML documents should use this structure and its sequence to organize the document.
The above example shows first the XML declaration, followed by the doctype declaration followed by the structural modules of XHTML.
- 2 Indentation should not exceed 2 characters
- Indentation is a major source of unnecessary white space, if used wrongly. Used correctly indentation contributes greatly to readability and error finding capabilities of the reader. Indentation, when used should not exceed 2 Characters per level.
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>
- 3 Opening and closing modules
Structural modules should be opened and closed on individual lines, with the closing module posessing the same indentation as the opening module. The <head> and <body> modules shown above show this clearly.
Lesser modules, such as <p> and <a> should be kept in one line. Here it is important that the author makes appropriate decisions, based on the type of content. For example a long article may benefit from having the <p> module on separate lines.
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
- 1 Sorting
- Place the instructions which affect the most elements first, then decrease their number. This will make it easy to see the most common applications of CSS.
- Do not exceed more than 80 characters per line. The example above shows how more characters can be accomodated by starting a new line.
- Each line lists the elements first, followed by some spaces and then followed by instruction within the curly brackets {instructions} In order to easily find both elements and the appropriate instructions, it is recommended to fill in spaces between elements and {instructions}, amounting to no more than 15 characters. This will line up the beginning of the instructions at the same position per line.
Example, with "." and "/" instead of spaces:
LI../..../..../{ display: list-item }
- Alternatively a grouping by function could be considered. For example, place all elements dealing with tables near each other.
Back to BestPracticesList