Layout: the transition to semantic markup is the main goal of HTML

    Initially, the HTML technology (hypertex markup language) was intended to describe the semantic structure of a web document , that is, to determine parts of the text in which parts of the page are different in type and content, such as headings, paragraphs, footnotes, illustrations, hyperlinks, and so on. In academic terms, HTML is designed to semantically mark up a document.

    Let me remind you that semantics is a section of linguistics that studies the relationships and ways of highlighting semantic structures in speech. For example, the definition of proposition members (subject, predicate, addition, definition), the study of relationships and the meaning inherent in them (what is the subject / object of the action, and what clarifies their description, etc.).

    Prior to HTML, the task of semantic markup of documents was solved using:
    • TeX (1978 technology) for mock academic publications
    • SGML (1968 technologies) for a wider range of tasks. SGML is very similar to its descendant XML, with the exception of a number of rules that in some cases significantly complicate the reading of markup, such as the permission not to put angle brackets in tags.

    In other words, if TeX was adapted strictly for the needs of prototyping university reports, scientific papers, and the like, SGML allowed creating information structures similar to Relational Databases, that is, implementing ER-models (entity-relationships).
    ER model example
    (example of an ER-model)
    example of an ER relationship
    (example of an ER-relationship)

    ER-model is a way of defining entities in a database and relations between them. Examples of ER-relations: one to one, one to many, many to many, relations of association (relationship of entities), aggregation (generalization and inclusion of one entity in another) and so on.

    Tim Berners Leah, creating the Web in the late 80s, taking SGML as a basis, simplified the syntax, created a list of predefined tags for web page layout, the rules of use of which were set using DTD (a technology from the SGML family that regulates the use of tags - that is, a list of allowed attributes , nested tags, permission for text content, and so on) and we got HTML 1.0

    Thus, HTML based on SGML was originally intended to describe the structure of the document in the context of the ER relations of its parts, that is, define the structure and content of the document in terms similar to databases.

    Now imagine a situation where you have to edit the database structure in order to move the GUI button a few pixels in any direction. Paradoxically, in sovermennom web is in the order of things - very often to visually move any item (the GUI-button) has to change the HTML-structure (database )!

    The development of this situation was a very intense competition of browsers that began back in the 90s, during which HTML expanded with a large number of tags designed to create exclusively visual effects, and not to highlight semantic units in the structure of a web document. The combination of the markup of the semantic parts of the document and their external design in one place served to ensure thatthe modern Internet turned out to be completely unsuitable for users with disabilities, for whom the visual design of websites creates significant barriers to reading information. Moreover, displaying web pages on devices with non-standard screen sizes (smartphones) instead of switching the stylesheet requires, in addition, processing the entire structure of the web document, which is very inconvenient.

    Fortunately, the new web standards are moving HTML5 towards the proper separation of the structure of the website from the way it is visually styled, but in order to use these methods correctly, the perception of the layout of web pages must be changed. After all, if before the layout designer primarily focused on the sent layout from the designer, now it is important to rely primarily on the information structure of the page, its semantic parts and their relationships. And only after, as a second step, look at how you can attach visual elements and dynamic functionality to an already created web page structure.

    Summarizing - the DOM model of the web page specified by HTML should be perceived as a database with the content and structure of the web document and in no case should it change depending on the change of stylistic elements on the page.

    Also popular now: