Geekly Articles each Day
⬆️ ⬇️

The difference between markup and presentation

After reading the comments on the note Firefox 3: * {display: block} bug , I realized that a significant part of Habr's readers, including those who are seriously engaged in web development, do not quite surely imagine something like this HTML, and why tags are displayed like this not otherwise.







As always, let's start with the story



')

All this has already been written thousands of times, but nonetheless. HTML is based on IBM's GML language, developed by IBM in the late 60s of the last century, intended for a universal document exchange system. In the mid-80s, his successor passed the ISO standardization and was called SGML, and finally, in the early 90s, Berners-Lee developed HTML based on it.



And you can: flies separately, cutlets separately?



Can. And even need. This is exactly what the IBM specialists who develop GML decided and separated the semantic meaning of the document elements (logical structure) from their appearance (presentation). The document logic (the value of its component parts) is an integral part of the document itself, and it was decided to control the appearance through external style files.



The rules for drafting a document (a list of tags and rules for their use) were also made into external files - DTD .



As a result, we get a system of three components:

  1. DTD - Definition of rules for the use of markup elements.

    Documents - Data marked up in accordance with the DTD rules.

    Style files - Defining the appearance of markup elements





    HTML versions 1 and 2 included in their scheme only the first two paragraphs and did not offer the authors of documents the ability to connect external style files, leaving the appearance of the document at the discretion of the browser. The HTML 2.0 specification only gave recommendations on how to display certain elements of a document.



    Salvage wins ...



    With the rapid development of commerce on the Internet in the mid-90s, HTML 2.0 tools were missed. And the entrepreneurial Netscape, the then leader of the browser market, and Mircosoft, who also wanted to grab a piece of cake, started introducing a variety of HTML extensions into their brazers. Actually turning it from a markup language into a design language. Some innovations are reflected in HTML 3.2 in the form of such attributes as background, color and tags like font.



    CSS to the rescue 1



    In 1996, the W3C approved the specification of CSS - style sheets, designed to stop the mess and return HTML to its original purpose - to determine the meaning of the elements of a document, not their appearance. Those. give HTML the same 3rd component that GML had.



    However, nothing passes without a trace. The era of browser wars and HTML 3.2 has left a serious imprint both on the browser engines, forced to support the "extensions" of HTML, and on the minds of webmasters who are used to mixing logic and presentation together.



    How do browsers determine the design of elements?





    The main “instruction” for parsing the HTML document for the browser is the DTD , which contains a list of tags, attributes, their placement rules and other document formatting rules.



    For example, the definition of the style tag says that the tag can contain data of the CDATA type inside it, internationalization attributes (lang, dir) as well as the type, media and title attributes are allowed for it.



    The p and hr tags are described in the same way, except that hr cannot have content, and p can contain string data.

    I note that in the DTD there are no indications that hr should be displayed with a horizontal line, and p to add vertical indents!



    So how does the browser know that p should have indents, and strong should be displayed in bold? Well, what do we have in general is responsible for the appearance? Yes, the 3rd component of the GML model is styles. In the case of HTML, this is CSS.



    If you open the URI: resource: //gre/res/html.css in FireFox, you can see the same styles that it applies by default to HTML documents.



    Here is the paragraph style: 

     p, dl, multicol {
   display: block;
   margin: 1em 0;
 }


    But for the horizontal line: 

     hr {
   display: block;
   height: 2px;
   border: 1px inset;
   margin: 0.5em auto 0.5em auto;
   color: gray;
   -moz-float-edge: margin-box;
   -moz-box-sizing: border-box;
 }

 hr [size = "1"] {
   border-style: solid none none none;
 }


    True, everything is simple and logical?



    Let us return to the behavior described in the Firefox 3: * {display: block} bug , and see what rules the FireFox is guided by when displaying the main blocks of a document: 

     html, div, map, dt, isindex, form {
   display: block;
 }

 body {
   display: block;
   margin: 8px;
 }
 ...
 / * hidden elements * /
 area, base, basefont, head, meta, script, style, title, noembed, param {
    display: none;
 }


    What do we have in the end? As a result, we have the following sequence of rules: 

     area, base, basefont, head, meta, script, style, title, noembed, param {
    display: none;
 }
 ...
 * {
    display: block;
 }


    According to the cascading rules defined by CSS 2.1, the author's rules are higher than the rules of the user agent, respectively, the second style overlaps the first and all elements of the document, including the head and style tags, become blocky and the contents of the style tag that has CDATA type (see above) are output to the browser.



    Apparently, Opera with Safari and Konqueror do the same.



    Ahead of the whole planet ...



    ... as always Internet Explorer. It's hard to say how Microsoft's browser processes documents, but judging by a number of signs, based not on DTD and styles, but on some personal notion about HTML. Apparently, the legacy of HTML 3.2 has an effect.



    Conclusion



    In addition to the “de jure” standards, on the web, as in other areas, there are many “de facto” standards with historical roots. Such standards are perceived by many as given, generating some inertia of thinking. Facing with what is natural, predictable, but violating the usual order, possessing such inertia turn out to be surprised, they declare an unusual error.



    But I would like to remind the proverb: trust, but verify! And it happens that to check, an error is not at all a mistake, but a consequence of ignorance, misunderstanding or the very inertia of thinking.





    Links













    1 Chapter title in Eric Meyer’s CSS CSS Cascading Style Sheets

Source: https://habr.com/ru/post/28529/

More articles:



All Articles