This practice is now obsolete, and often problematic as there are very few of those browsers in use today – primarily only for testing of legacy functionality.
Example of old approach
// some script
NOTE: for XHTML or XML documents, the use of a CDATA style comment is still required.
No, you are not going crazy… MSIE 6 and 7 are case sensitive for the ‘
frameBorder‘ (and a few other attributes).
The only built-in entities in XML are
' XHTML added the others via a DTD that is not a part of HTML5. As such, validators will report them as errors.
Safe replacements are the decimal notation:
or the character itself
Quite a few other common symbols are not available without similar changes.
XHTML tags in the format
<br />, <hr />, <img />, <input />, <base />, <link />
The space before closing slash was primarily done for legacy browsers that did not properly parse the value without an attribute or space, but does have some value in improving readability of XHTML markup. (In my experience this is NN4.x and earlier.)
C.2. Empty Elements
Include a space before the trailing
> of empty elements, e.g.
<hr /> and
<img src="karen.jpg" alt="Karen" />. Also, use the minimized tag syntax for empty elements, e.g.
<br />, as the alternative syntax
<br /> allowed by XML gives uncertain results in many existing user agents.
A big part of Web 2.0 (over the last decade) has been a move toward the semantic internet, whereas each page is representative of data and it’s relationship… we are, in essence, “training” the internet itself.
XFN markup allows you to identify your relationships to other individuals on the links of your website or blog.
HTML5: (removes the ‘profile’ attribute on
<head> as such the updated convention is:
<link rel="profile" href="http://gmpg.org/xfn/11" />
Use in content:
<a href="http://www.skotfred.com/" rel="me">My other site</a>
Here are a few examples of CDATA implementation in HTML tags:
/* <![CDATA[ */
/* ]]> */
/* <![CDATA[ */
/* ]]> */
As I often find myself cleaning up legacy webapp codebases, this item seems pretty common, particularly for sites that were using TABLE based layouts.
<table cellpadding="0" cellspacing="0">
With modern browsers, this is easily accomplished with some simple CSS, as you might need some distinction between different tables or have some cases that require padding or spacing, you MIGHT consider assigning a CSS class as I have below.
border-collapse: collapse; /* 'cellspacing=0' equivalent */
padding: 0; /* 'cellpadding=0' equivalent */
I’ve found that many developers still use the classic coding style on JSP’s, unfortunately this makes it difficult to use some common tools for validation and complicates matters when looking for improperly nested tags in the markup. Migrating the XML formatted JSP markup simplifies matters and makes it possible for developers to quickly identify many problem areas of code within the IDE.
<%@ page language="java" %> = <jsp:page.directive language="java" />
<%@ page contentType="text/html; charset=utf-8" %> = <jsp:page.directive contentType="text/html; charset=utf-8" />
<%@ page import="" %> = <jsp:page.directive import="" />
NOTE: you can combine page.directive’s to a single tag with all attributes.
<% //some scriptlet %> = <jsp:scriptlet>//some scriptlet</jsp:scriptlet>
<%! String somevalue="1"; %> = <jsp:declaration>String somevalue="1";</jsp:declaration>
<%= somevalue %> = <jsp:expression>somevalue</jsp:expression>
<jsp:include page="" />
<jsp:directive.include file="" />
<jsp:useBean id="" scope="" type="" />
<jsp:setProperty name="" />
Unfortunately, there’s one common type of tag that does not have an XML equivalent:
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld" %>
CSS = Cascading Style Sheets, this is done primarily to externalize the ‘look and feel’ of a web page from the actual ‘data’ being presented.
There are several ways to do this…
1. External file (most common)… add the following to the
<head> section of your page:
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/filename.css" media="all" />
2. Inline (usually in the
<head> section of every page):
<style type="text/css" media="screen">
... // some stuff here.
3. Inline (on individual tags):
<div style="color:red;">Red text</div>
1. Media types (common – though others exist!):
2. Guideline: always use lowercase names in your CSS, MUST start with an alpha (not numeric).
Standards ARE everything, particularly when building for multiple platforms… look for more ramblings soon!