Whatever skeptics say, progress is still a phenomenon that cannot be stopped. However, while some are outraged by the prolonged move to the lunar dachas, others are literally plunged into panic, for keeping up with the changes is becoming more and more difficult. An example of such “catching up” are representatives of professions related to high technology.
While the majority of web designers, programmers, and layout designers are much more in tune with the spirit of the times than some “woman Nyura” who receives information with a week delay, and even with significant distortions, the real state of things turns out to be somewhat different. It is quite difficult to meet the level of progress in the field of new technologies. Let's look at a simple example: even some 5-10 years ago, the developer of online games on Adobe Flash could achieve tangible success, the numerous "Funny Farmers" are proof of this. However, today this technology is gradually dying off, giving way to more modern, but less studied by the majority of HTML5. By the way, HTML5 is one of the “characters” of our today's story, devoted to the everyday life of HTML layout designers.
Doctype HTML - what is it?
This is a high-tech monument to the victims of technological progress. The dashing 90s, which distinguished themselves not only by the “combat” situation in our country, but also by a real browser war, brought several products to the world that allowed computer users to surf the vast expanses of the world wide web. There’s only one catch - the then popular Netscape Navigator and Internet Explorer looked at the same pages in completely different ways, respectively, and the creators of the sites created completely different pages for these programs.
Standards? In those years, talking about them was pointless - W3C existed in its infancy, and Microsoft, which promoted its IE, was generally famous for preferring to invent its own bicycles that were not compatible with anything. Nevertheless, by the end of that terrible (for web developers) decade, the situation nevertheless returned to normal: a kind of standards appeared that, although not completely, were nevertheless respected by all popular browsers.
However, the situation turned out to be such that the standards of the consortium and browser manufacturers were, to put it mildly, not in all similar. You could have created an absolutely correct page in terms of HTML, CSS and DOM, but your preferred browser stubbornly didn’t show what you expected to see.
Nevertheless, time passed, the developers finally decided to think not only about the competition, but also about the webmasters, and he appeared - Doctype HTML. This is a special tag that tells the browser exactly how to view this or that page.
What is Doctype in HTML for?
Before the appearance of adequate standards, which began to be followed everywhere, many browser developers tried to drag the blanket over themselves, creating their own methods of approach to a particular technology. As a result, the same page looked different in different browsers. However, we already talked about this, but just did not mention that when the manufacturers of web surfing programs came to their senses, another, no less interesting problem arose.
Imagine the situation: you are a typical web developer of the late 90s. It just so happened that most of the time you spend in Internet Explorer 4. Suddenly, Microsoft decides to change his mind and makes his new browser more “correct”, as a result of which it becomes not clear how to write sites now and what to do with those that are already created. Naturally, if you have enough time, you could rewrite your HTML code in such a way that it meets the new standards, but people are lazy creatures.
It is at this point that Doctype HTML is the most appropriate “invention.” Depending on what type of document is indicated at the beginning of the page, the browser will choose the most appropriate rendering mechanism for this case. If there is no Doctype in the HTML code, the browser will go into compatibility mode (usually, but not at all). As a result, the same Internet Explorer 6 (let the archive be good for him) in the absence of the Doctype tag behaves as if you are working in its fourth version.
Types of Doctype
Doctype tag has several varieties that can be divided into certain categories. First, it describes the basic types of markup language: HTML 4.01, HTML 5, XHTML 1.0, or XHTML 1.1. Secondly, each of these languages has its own subsections, indicating a “picky factor,” that is, how HTML code strictly follows W3C standards. True, in the second case there are two exceptions - HTML5 and XHTML 1.1 do not have any subtypes and have only one Doctype HTML form. But more on that later…
Strict Approach: Doctype Strict
If you prefer to create HTML code corresponding to each letter of the validator’s law, then an additional incentive (in addition to your own interest) can be the use of Doctype Strict. If you plan to use more advanced XHTML 1.0, then the line with which each element will begin should look like this:
Choosing a strict Doctype HTML Public template ensures that any deviation from the standard is noticed by the browser, after which the incorrectly used tag will be ignored. In particular, in strict mode, any tag, be it a form, image, or other element, must be located inside block tags. If you decide to do without this, the browser simply will not display this element, and the list of layout errors will be replenished with a couple of entries.
In addition, a number of tags that allow you to format the text, it is also desirable to exclude - strict mode implies the use of CSS.
Human Approach: Doctype Transitional
If the strict method of a strict template does not suit you or if you are simply used to going against the rules, there is always the opportunity to resort to the more humane Doctype HTML Public type. W3C took care of those who do not want to give up their habits and want to work in milder conditions, creating the Transitional template, which represents a transitional model of the approach to validation. This template gives you the opportunity to freely allow yourself some liberties, for example, tags prohibited by the Strict-template, as well as many other layout approaches that have not lost their relevance since the late 90s.
Soft Doctype HTML 4 is declared as follows:
For XHTML, the line again looks slightly different, but the general trend remains:
Today, in spite of the fact that every layout designer strives to comply with the Strict-pattern, it is the transitional Doctype that is the most popular. Nevertheless, this template has one conditional limitation: the validator will “reject” any pages that contain frames. If you need to resort to this layout method, you should pay attention to the following - the last template.
From General to Special: Doctype Frameset
The approach to checking the page for compliance with the Frameset template is generally similar to that of Transitional, however, in addition to the above "liberties", this template gives you the opportunity to use frames. Frameset does not have other differences, so it remains only to list the lines for declarations, for HTML 4.01 and for XHTML 1.0:
On the cutting edge of progress
Naturally, having mentioned the HTML5 standard that is gaining popularity at the beginning of this article, we could not ignore this markup language. It's funny that W3C considers this version of HTML to be the main one, so its Doctype HTML 5 looks rather modest. In other words, this type definition means that the browser needs to work with "pure" HTML, which HTML5 is considered today, while the fourth version, which is common for many, is considered potentially outdated.
Other varieties of Doctype
To date, there are several more varieties of Doctype templates, most of which are related to XHTML. While the second version of this markup language has not been published, becoming part of the aforementioned HTML5, variations of its first version, despite not the highest prevalence, are alive and well.
Is Doctype So Important?
Perhaps some novice HTML “writers” will try to ignore the page type declaration. Well, if they did not take out the important information from the above, we give one simple example. Here is an example page using the Transitional template:
Everything looks exactly as it should have looked according to the designer's idea, however, if we “confuse” Doctype, we get the following:
As you can see, the page has undergone significant changes: the background image has disappeared, the menu has turned into a disfigured list, some
CSS classes are simply ignored, in addition, the second scrollbar has grown in the page.
We hope this example explains in sufficient detail the importance of the above, so we can only remain attentive or, in the ideal case, learn to write code that passes strict-validation. I wish you success!