Tag: xhtml

Using comments to ‘hide’ SCRIPT tag content – please stop this obsolete practice

Many years ago, when HTML3 and 4 were still widely used in the mid to late 1990s, it was a common practice to place HTML style comments, or in some cases CDATA comments inside the SCRIPT tag in an attempt to hide that content from browsers that could not process it. In those browsers the content (javascript source code) would sometimes be displayed on the page, making it quite a mess.

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

<script type="text/javascript">
<--
// some script
-->
</script>

NOTE: for XHTML or XML documents, the use of a CDATA style comment is still required.
<script type=”text/javascript”>
//<![CDATA[
…code…
//]]>
</script>

REFERENCES:

MSIE iframe frameBorder=”0″ attribute is case sensitive?

No, you are not going crazy… MSIE 6 and 7 are case sensitive for the ‘frameBorder‘ (and a few other attributes).
It seems that the JavaScript attribute names are expected to be used in the HTML, should you expect them to behave and look properly you’ll have to make some small changes to support, this is even more important when using JavaScript to update or change attributes.

<iframe... frameBorder="0"></iframe>

nbsp; and other common entities do not validate as HTML5!

The only built-in entities in XML are &, <, >, " and ' 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: &#160; or the character itself U+00A0;

Quite a few other common symbols are not available without similar changes.

  • &lt; = &#60;
  • &gt; = &#62;
  • &amp; = &#38;
  • &apos; = &#39;
  • &quot; = &#34;
  • &nbsp; – &#160;
  • &copy; = &#169;
  • &reg; = &#174;
  • &trade; = &#8482;

REFERENCES:

XHTML space slash

XHTML tags in the format <tag />.

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

Per http://www.w3.org/TR/xhtml1/#C_2:

C.2. Empty Elements

Include a space before the trailing / and > of empty elements, e.g. <br />, <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.

REFERENCE:

XFN (XHTML Friends Network)

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.

HTML4:
<head profile="http://gmpg.org/xfn/11">

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>

REFERENCES:

REF:

http://reference.sitepoint.com/html/xfn

CDATA markup of XHTML script and style tags

Ideally all JavaScript and CSS definitions should be external to the content of an HTML page, in some cases it’s simply not practical. If you’ve migrated to XHTML markup of your page, this can often lead to XML validation errors. The use of a CDATA escape can fix most issues, though you may have to cleanup some of the actual code to resolve other issues, particularly with some special characters that are expected to be encoded.

Here are a few examples of CDATA implementation in HTML tags:

<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>

<script type="text/javascript">// <![CDATA[
...
// ]]>
</script>

<style type="text/css">
/* <![CDATA[ */
...
/* ]]> */
</style>

HTML table cellspacing and cellpadding in CSS

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">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

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.


<style type="text/css">
table.modern{
border-collapse: collapse; /* 'cellspacing=0' equivalent */
}
table.modern td,
table.modern th{
padding: 0; /* 'cellpadding=0' equivalent */
}
</style>

<table class="modern">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

XML formatted JSP source code

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" %>

REFERENCES:

Happy coding

CSS implemention in HTML

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.
-->
</style>

3. Inline (on individual tags):

<div style="color:red;">Red text</div>

NOTES:
1. Media types (common – though others exist!):
* screen
* print
* all

2. Guideline: always use lowercase names in your CSS, MUST start with an alpha (not numeric).

Whoami

I’m skotfred, aka ‘Giant Geek’, developer of (predominantly web-based) applications. Primary development done with JSP/Java, PHP, XHTML/CSS/JavaScript. Previous applications in VisualBASIC, C/C++, Perl, COBOL/CICS, BASIC (various), Assember (PC & MVS), and Pascal.

Standards ARE everything, particularly when building for multiple platforms… look for more ramblings soon!