Purpose

The HTML 4.01 Strict DTD is a good standard to use when developing web sites. However, it does not support a couple of things I wanted, and (X)HTML 5 is both not ready yet and has a lot of stuff I do not feel like learning just, many of the new features of (X)HTML 5 are not implemented by browsers, and it also does not have some stuff I want.

So rather than use a tag soup of tags that do not match the defined document DTD, I defined a custom document DTD. It is essentially HTML 4.01 strict with the following additions:

Form Autocomplete

The autocomplete attribute has been added to the form and input elements. This attribute is understood by every modern browser, and instructs the browser not to auto complete fields either in the entire form or in specified input fields.

Technically, this probably belongs as CSS but I do not believe CSS defines it either, let alone any browsers implementing it.

Search Engine Toggle

I wanted an attribute that I could use for my customized search engine to tell it not to index certain parts of a web page. Most search engines do this with an HTML comment, but that is not the right way to do it. The right way to do it is as an attribute of an element.

Currently, as far as I no no search engines respect the custom attribute, even the one I am building (based on Sphyder) is not yet finished. Use the attribute if you want, but until other search engines decide my idea is worth implementing, it's only useful with my customized Sphyder, which is not yet available (it will be).

HTML 5 Media

I really like the ability to embed audio and video without the need for a plug-in to load. My implementation of the tags is based upon the following Firefox documentation and may not be perfect or what will be official when HTML 5 is finished:

Examples

Autocomplete

Applied to Form

<form id="form" method="post" action="index.html" autocomplete="off">
<fieldset>
<legend>Sample Inputs</legend>
<label for="email">E-Mail Address:</label><br>
<input type="text" name="email" id="email"><br>
<label for="zipcode">Zip Code:</label><br>
<input type="text" name="zipcode" id="zipcode"><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>

Produces:

Sample Inputs



No matter how many times you submit that form (which returns to this page) the browser will not fill in the data for you. Using it at the form level is not useful to me, but since browsers understand it there, I implemented it in the DTD anyway.

Applied to Input

<form id="anotherform" method="post" action="index.html">
<fieldset>
<legend>Sample Inputs</legend>
<label for="phone">Phone Number:</label><br>
<input type="text" name="phone" id="phone" autocomplete="off"><br>
<label for="pet">Pet Name:</label><br>
<input type="text" name="pet" id="pet"><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>
Sample Inputs



Your browser will autocomplete the pet name (once it has learned it) but not the phone number. This is what is useful to me, I maintain a web site for herpetological records. When submitting a record, some fields, such as the general locale field, is fine for auto completion. Other fields, such as longitude coordinates, should not use autocompletion as the data is almost never identical to previously entered data.

Spider Attribute

<p>This paragraph would be indexed.</p>
<p spider="off">This paragraph would not be indexed.</p>
<p>
<img src="foo.jpg" alt="[this image would be indexed]"></p>
<p>
<img src="bar.jpg" spider="off" alt="[this image would not be indexed]"></p>
<div spider="off">
<p>This paragraph would not be indexed because parent node has spider turned off.</p>
</div>

Produces the following:

This paragraph would be indexed.

This paragraph would not be indexed.

[this image would be indexed]

[this image would not be indexed]

This paragraph would not be indexed because parent node has spider turned off.

Audio Tag from HTML 5

<div>
   <audio controls>
      <source src="/media/ogg/bullfrog.ogg" type="audio/ogg">
      <source src="/media/mp3/bullfrog.mp3" type="audio/mpeg">
      <p>Your browser does not support the &lt;audio&gt; tag.</p>            
   </audio>
</div>

Produces:

Compatibility

Alternatively, you can use the "object" tag as a legal fallback:

<div>
   <audio controls>
      <source src="/media/ogg/bullfrog.ogg" type="audio/ogg">
      <source src="/media/mp3/bullfrog.mp3" type="audio/mpeg">
      <object type="audio/x-mpeg" data="/media/mp3/bullfrog.mp3">
         <param name="src" value="/media/mp3/bullfrog.mp3">
         <param name="autoplay" value="false">
         <param name="autoStart" value="0">
         <a href="/media/mp3/bullfrog.mp3">bullfrog.mp3</a>
      </object>
   </audio>
</div>

Video Tag from HTML 5

<div>
   <video controls>
      <source src="/media/ogg/bfw-trailer-320x240.ogv" type="video/ogg">
      <p>Your browser does not support the &lt;video&gt; tag.</p>
   </video>
</div>

Produces:

Video is from http://www.wesnoth.org/wiki/Trailer

Of course, you can also use <object> tag as a legal fallback for browsers that do not support the <video> tag.

The DTD:

XHTML

For an XHTML version, see my Custom XHTML DTD Page.

Contact

Comments and suggestions welcome. mpeters@mac.com

[Valid Tag Soup]