Developing advanced Tutorials Using Dojo's AJAX applications, part 2nd: HTML rich in semantics

Related articles: Using Dojo's AJAX applications to develop advanced tutorials, part 1th

HTML is the basis for developing WEB applications. There are already hundreds of billions of pages written in HTML language. The specification of HTML languages is also evolving and updating. HTML language is easy to start with, but how to develop a well-organized, structured, and maintainable HTML document is a topic worth exploring for many web developers. With the popularity of Ajax applications, one of the best practices known as "semantically rich HTML (semantic HTML)" is increasingly admired by web developers. The main idea of this practice is to return HTML to its original form, using HTML to describe the structure of the document, and to strip out the part related to the display from the HTML document and give it to CSS. This article details this best practice, including the evolution history of HTML specifications, recommended HTML elements and attributes, a series of specific best practices, and micro-formats.

The following is a brief introduction to the rich semantics of HTML, covering the history of HTML specification and its relationship to CSS and JavaScript.

A rich semantic HTML introduction

Semantically rich HTML (semantic HTML) refers to a good practice of writing HTML documents. This practice requires that when writing HTML documents, as far as possible, the HTML specification is defined in the document structure of the rich semantic elements, and avoid the use of the elements related to the display, the display of relevant content to the CSS to deal with. By applying this practice, the structure of the HTML document can be separated from the display, so that the two are loosely coupled. The advantage of this loose coupling is that the structure and display can be independently changed and not mix together. When you only need to modify the appearance of the Web application, ideally, the HTML document for the Web application will not need to be modified, just modify the CSS file.

The popularity of AJAX applications has driven this practice from one aspect. Today's WEB 2.0 applications require fast online, and incrementally introduce new features, known as "Forever beta" (perpetual beta). This requirement is relatively high for the architecture of WEB applications. It is possible to quickly add new features or improve existing functionality only if the parts are loosely coupled. The practice of semantically rich HTML has facilitated the loose coupling of Web applications and is increasingly accepted by web developers. In addition, the evolution of the HTML language itself reflects this trend from one side. The following is a brief introduction to the history of the HTML language and a description of the relationship between semantically rich HTML and CSS and Ajax applications.

History of the HTML

HTML language has been evolving since the day of its birth, and its canonical version is also numerous. The development history of HTML can be briefly summarized as follows.

HTML's original draft HTML was first used in CERN, a European nuclear energy research facility, to facilitate the use and sharing of documents by researchers. In the earliest illustration of HTML, which appeared in 1991, HTML contained 22 elements, of which 13 were retained in HTML 4. Since HTML was originally used to describe scientific documents, these 22 elements are basically used to describe the structure of the document. For example <a> used to indicate a hyperlink between documents;<p> represents paragraphs in a document;

As can be seen from the history of the HTML specification listed above, HTML is removed from only the elements that represent the structure of the document, and then the elements that are associated with the presentation are introduced, and then the elements that are present in the next version of the display relate to each other. The development trend of the HTML specification is that the elements associated with the presentation will gradually disappear. HTML documents should describe the document itself, rather than describe how the document is presented to the user. The development of the HTML specification practices this initial goal in a spiraling fashion.

HTML and CSS rich in semantics

In HTML, the introduction of the element associated with the presentation was mainly due to the fact that there was no good way to indicate the style of the elements in the HTML document. For example, a piece of text is displayed in bold or italic font. CSS can only be implemented through HTML elements or attributes before it is widely used. Thus, elements such as <b> and <i> are introduced. As CSS specifications are widely supported in browsers, WEB developers have a better way to identify the styles of elements in an HTML document. For example, the bold display of a piece of text can be implemented using CSS syntax {font-weight:bold}. It is because of the advent of CSS and popular, rich in semantic HTML practice is possible.

Semantic-rich HTML and Ajax applications

Ajax applications are now very popular, and more and more applications use AJAX technology to improve their user experience. Although Ajax is based on the original HTML, JavaScript and CSS technology, but it redefined the three technologies in the WEB application development positioning. The structure of a typical Ajax application is shown in Figure 1.

Figure 1. Typical structure diagrams for Ajax applications

As you can see in Figure 1, Ajax applications are made up of three parts, namely, structure, presentation, and behavior. Structure refers to the basic content structure of an application, described by the HTML, the display refers to the appearance of the application, including color, font size and other styles, described by CSS, behavior refers to the application and user interaction, including the interface of the partial refresh, processing and server-side interaction, etc., described by JavaScript. In these three sections, the HTML-described document structure is the foundation of the entire Ajax application, with CSS applying styles to the document through various selectors, while JavaScript modifies the document structure through DOM operations.

Semantically Rich HTML provides the best way to describe the structure of Ajax applications. In the development of AJAX applications, from a series of rich semantic HTML documents, will lay a good foundation for the development behind. There are many elements and attributes in the HTML specification, while the rich semantics of HTML practices suggest using HTML specifications to represent the document structure and the rich semantics of elements and attributes. These recommended elements and attributes are described in detail below, along with those that are not recommended for display-related elements and attributes, and how to replace them with CSS.