XHTML Tutorial: The Difference Between Transitional and Strict

In fact, XHTML 1.0 is divided into two types (three if Frameset DOCTYPE is included, which is not discussed in this article), Transitional and Strict DOCTYPEs. And HTML 4.01 also has the same document declaration.
Today, when promoting Web standards, those who advocate Web standards often say that XHTML is stricter than HTML. Of course, in a sense it is, for example, it requires all tags to be closed and all attributes to be quoted. But in fact, XHTML 1.0 is divided into two types (three if Frameset DOCTYPE is included, which is not discussed in this article), Transitional and Strict DOCTYPEs. And HTML 4.01 also has the same document declaration.

The meaning can be seen from the literal name: Transitional DOCTYPEs is only for the transition from the old era to the new era, and Strict DOCTYPEs is the default document declaration, which is applicable to the construction of HTML 4.01 and XHTML 1.0.
Transitional DOCTYPE is generally used because the code contains too many old writing methods, and it is difficult to completely convert to Strict DOCTYPE at once. But Strict DOCTYPE should be your goal. It encourages and sometimes even forces you to separate structure from presentation and write presentation code in CSS. HTML 4 Document Type Definition:

This HTML 4.01 Strict DTD does not include presentation layer attributes and tags. W3C will gradually phase out these attributes and tags. You can use style sheets to implement them. You should use the Strict DTD. To get support for presentation attributes and tags, use the Transitional DTD.

Using Strict DOCTYPE has the added benefit of telling browsers to render the page in their most strict and (to a certain extent) most standards-compliant mode.
Tommy Olsson explains the benefits of using Strict well in Ten questions for Tommy Olsson from the Web Standards Group:

I think that using Strict DTD, whether it is HTML 4.01 Strict or XHTML 1.0 Strict, is far more important than discussing whether to use HTML or XHTML. It represents the quality of the future Internet. It separates structure from presentation, making it very easy to maintain a site.

For those new to web standards and proper, semantic structure, it is important to recognize the difference between Transitional and Strict DOCTYPEs. For a more detailed list, please refer to: XHTML: Differences between Strict & Transitional, Comparison of Strict and Transitional XHTML and XHTML1.0 Element Attributes by DTD.
For those who are ready to move to Strict, there are some differences between the two that are likely to cause developers to make mistakes, which I will talk about next. Tags not supported in Strict DOCTYPEs center font iframe srike u Attributes not supported in Strict DOCTYPEs align (supported by table-related: col, colgroup, tbody, td, tfoot, th, thead, and tr) language background bgcolor border (supported by table) height (supported by img and object) hspace name (supported in HTML 4.01 Strict, not supported by form and img in XHTML 1.0 Strict) noshade nowrap target text, link, vlink, and alink vspace width (supported by img, object, table, col, and colgroup) Differences in content models The content model of an element type describes what kind of instances of that element type can be contained. In this regard, the biggest difference between the two document declarations is that blockquote, body, and form elements can only contain block-level elements, such as: text and images are not allowed to be directly included in the body, they must be included by block-level elements such as p or div input elements cannot be directly the next layer of form elements text within blockquote elements must be included by block-level elements such as p or div Leave all presentation to CSS and adhere to Strict standards In the process of transitioning to Strict DOCTYPEs, it is much more effective to understand what each element does than to know what each element looks like.
Think about structure and semantics first, then worry about performance.

<<: Vue implements the digital thousands separator format globally

>>: CSS navigation bar menu with small triangle implementation code