How to validate a document and correctly mark up HTML pages (Transitional vs Strict)
This article will focus on a seemingly out-of-date topic - validation of a web document by one of DTD-markup declarations, which in turn are defined by DOCTYPE.
This topic is not trivial, advantages and disadvantages of a particular validation method are at first not apparent.
In recent years, many editors and CMS's automatically markup DOCTYPE for documents, which is a breakthrough, but unfortunately this is not enough, because often this is only a Transitional markup. Beginner developers neglect this or just don't realize that they have any other choice.
Before we go to the very heart of the matter let us recall what Transitional markup is. It was created to facilitate the transition from HTML3.2 to HTML4, keeping the previous elements and attributes.
Setting aside the matter whether it's HTML or XHTML language, the main Transitional disadvantage is that the transitional markup validation allows the presents of the elements responsible for the presentational (visual) display.
Unfortunately we are all far from perfect, and all the above problems were always present. But as the time goes, markup languages evolve. Developers are moving forward as well, but the legacy should not be forgotten. That is why the transitional markup declarations were developed. They allow to validate documents containing a mess of elements, styles, attributes, and scripts.
This was done in hope that the developers would move to the new standard, and in time rearrange their projects. But in this case, unfortunately, a well-known expression is in place "there is nothing more permanent than temporary."
What to do? Use Strict DTD - document markup validation, which was especially designed to separate the content from the styles and scripts. How to do this?
It's very simple. In your next project just change DOCTYPE to one of these:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
By the way, the W3C explicitly recommends using Strict.
"This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required. "
What are the disadvantages, using the strict markup validation:
List of forbidden elements: applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u.
List of forbidden attributes:
- The attribute alink is forbidden for body;
- The attribute background is forbidden for body;
- The attribute bgcolor is forbidden for body, table, td, th, tr;
- The attribute border is forbidden for img, object, but can be used in the <em> table;
- The attribute clear is forbidden for br;
- The attribute language is forbidden for script;
- The attribute link is forbidden for body;
- The attribute name is forbidden for form, img, but can be used in a, button, input, map, meta, object, param, select, textarea;
- The attribute noshade is forbidden for hr;
- The attribute nowrap is forbidden for td, th;
- The attribute start is forbidden for ol;
- The attribute target is forbidden for a, area, base, form, link;
- The attribute text is forbidden for body;
- The attribute type is forbidden for li, ol, ul, but can be used in a, button, input, link, object, param, script, style;
- The attribute value is forbidden for li, but can be used in button, input, option, param;
- The attribute vlink is forbidden for body.
Structural changes: elements a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var, and text can not be subsidiary for blockquote, body, form, noscript. In other words - the elements blockquote, body, form, noscript may only have block elements in subsidiary elements of the first level.
Reasons for the absence of the attribute target= "_blank" for links. First, to explain to the user how and where one shouldn't open a link. Second, if necessary, the same thing can be achieved in a simple way and more advanced way.
What do you get in return?
- Well-structured markup;
- Clear separation of the content and design;
- Quick and easy operation and code support;
- Discipline in writing the code;
- Respect from others. ;)
When to use Transitional? There are two main reasons. First. The transitional markup is good if you're working with other people's code, without the ability to change their code. A good example - majority of CMS's. In most cases it is impossible to change their codes, without getting into the core. But by doing this you won't have the pleasure of updates.
The second reason - the use of iframe. If you are using in your projects iframe, it gives you no choice. Use Transitional.
In order to ease the transition from the transitional to strict, while marking up the document, think about what is the purpose of a particular element, and not about how the document will look.