Layout: the transition to semantic markup is the main goal of HTML
Initially, HTML (hypertex markup language) technology was designed to describe the semantic structure of a web document , that is, to identify parts of the text that contain parts of the page that differ in type and content, such as headings, paragraphs, footnotes, illustrations, hyperlinks, and so on. In academic terms, HTML is designed for semantic markup of a document.
Let me remind you that semantics is a section of linguistics that studies relationships and ways of distinguishing semantic structures in speech. For example, the definition of members of the predlozheniya (subject, predicate, addition, definition), the study of relationships and the meaning embedded in them (what is the subject / object of the action and what specifies their description, etc.).
Before HTML, the problem of semantic markup of documents was solved using:
In other words, if TeX was adapted strictly to 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-relationship).
(example ER-model)
(example of ER-relations)
')
ER-model - a way to determine the entities in the database and the relationship between them. Examples of ER-relations: one to one, one to many, many to many, relations of association (connection of entities), aggregation (generalization and inclusion of one entity into another) and so on.
Tim Berners, creating the Web in the late 80s, taking SGML as a basis, simplified the syntax, created a list of predefined tags for designing a web page, the rules for using which were specified with the help of DTD (technology from the SGML family which regulates the use of tags , nested tags, text content permission, and so on) and we got HTML 1.0
Thus, SGML-based HTML was originally intended to describe the structure of a document in the context of ER-relations of its parts, that is, to define the structure and content of a document in terms similar to databases.
Now imagine a situation where in an application program in order to move a GUI button a few pixels in one direction or another, you have to edit the database structure. Paradoxically, in modern web it is in the order of things - very often in order to visually move an element (GUI button) you have to change the HTML structure (database )!
The development of such a situation was served by a very intense browser competition, which began in the 90s, during which HTML was expanded with a large number of tags designed to create visual effects only, and not to highlight semantic units in the structure of a web document. Combining the markup of semantic parts of the document and their external design in one place served the fact that the modern Internet turned out to be completely unsuitable for users with disabilities, for whom the visual design of websites creates significant obstacles to reading information. Moreover, displaying web pages on devices with non-standard screen sizes (smartphones) instead of switching the style sheet requires in addition to processing the entire structure of a web document, which is very inconvenient.
Fortunately, the new web standards move HTML5 in the direction of cleverly separating the structure of the website from the way it is visually styled, but in order to correctly use such methods it is necessary to change the very perception of the layout of the web pages. After all, if earlier the layout designer was primarily focused on the layout sent by the designer, now it is important to rely first of all on the information structure of the page, its semantic parts and their relations. And only after, as a second step, you can see how visual elements and dynamic functionality can be attached to the already created structure of the web page.
Summarizing, the DOM model of a web page given by HTML should be perceived as a database with the content and structure of a web document and in no case should it change depending on the change of stylistic elements on the page.
Let me remind you that semantics is a section of linguistics that studies relationships and ways of distinguishing semantic structures in speech. For example, the definition of members of the predlozheniya (subject, predicate, addition, definition), the study of relationships and the meaning embedded in them (what is the subject / object of the action and what specifies their description, etc.).
Before HTML, the problem of semantic markup of documents was solved using:
- TeX (1978 technology) for prototyping academic publications
- SGML (1968 technology) 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 noticeably complicate markup reading, such as permission not to put angle brackets in tags.
In other words, if TeX was adapted strictly to 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-relationship).
(example ER-model)
(example of ER-relations)
')
ER-model - a way to determine the entities in the database and the relationship between them. Examples of ER-relations: one to one, one to many, many to many, relations of association (connection of entities), aggregation (generalization and inclusion of one entity into another) and so on.
Tim Berners, creating the Web in the late 80s, taking SGML as a basis, simplified the syntax, created a list of predefined tags for designing a web page, the rules for using which were specified with the help of DTD (technology from the SGML family which regulates the use of tags , nested tags, text content permission, and so on) and we got HTML 1.0
Thus, SGML-based HTML was originally intended to describe the structure of a document in the context of ER-relations of its parts, that is, to define the structure and content of a document in terms similar to databases.
Now imagine a situation where in an application program in order to move a GUI button a few pixels in one direction or another, you have to edit the database structure. Paradoxically, in modern web it is in the order of things - very often in order to visually move an element (GUI button) you have to change the HTML structure (database )!
The development of such a situation was served by a very intense browser competition, which began in the 90s, during which HTML was expanded with a large number of tags designed to create visual effects only, and not to highlight semantic units in the structure of a web document. Combining the markup of semantic parts of the document and their external design in one place served the fact that the modern Internet turned out to be completely unsuitable for users with disabilities, for whom the visual design of websites creates significant obstacles to reading information. Moreover, displaying web pages on devices with non-standard screen sizes (smartphones) instead of switching the style sheet requires in addition to processing the entire structure of a web document, which is very inconvenient.
Fortunately, the new web standards move HTML5 in the direction of cleverly separating the structure of the website from the way it is visually styled, but in order to correctly use such methods it is necessary to change the very perception of the layout of the web pages. After all, if earlier the layout designer was primarily focused on the layout sent by the designer, now it is important to rely first of all on the information structure of the page, its semantic parts and their relations. And only after, as a second step, you can see how visual elements and dynamic functionality can be attached to the already created structure of the web page.
Summarizing, the DOM model of a web page given by HTML should be perceived as a database with the content and structure of a web document and in no case should it change depending on the change of stylistic elements on the page.
Source: https://habr.com/ru/post/183744/
All Articles