Читать книгу HTML5, JavaScript, and jQuery 24-Hour Trainer - Cameron Dane - Страница 12

When learning any technology, it's always a good idea to start out with the simplest implementation possible. In HTML5, the simplest page you can possibly write is as follows:

Open your favorite text editor, enter this text, and save the document as hello.html.

Now, open Chrome, and select Ctrl-O in Windows or – O on a Mac, navigate to the file you have just saved, and select “Open”. This should look like Figure 1.1 when loaded in the web browser.

Figure 1.1

This may not look like a web page; after all, there are no tags in the page except the strange looking tag on the first line of the document.

With the page open in Chrome, now select to open the developer tools:

● Command+Option+I on OS X

● F12 or Ctrl+Shift+I on Windows

This should open the window shown in Figure 1.2 below the web page.

Figure 1.2

This is the web-browser's internal representation of the web page. As you can see, this has normalized the structure of the document, and does provide a set of tags nested inside one another. On the outermost level is the html element, and inside this are two elements: head and body. The content of the body element is the text you wrote in the text editor.

The document has been normalized to conform to the rules of the Document Object Model (DOM). The DOM will turn out to be enormously important throughout this book because much of the power of modern web pages comes from their ability to manipulate the DOM after the page has loaded.

The manner in which a Document Object Model should be constructed from an HTML page has been a contentious issue since HTML first appeared. Historically, different browsers would generate different models for the same HTML, and this made it very difficult to write cross-browser web pages.

In order to counteract cross-browser issues, the World Wide Web Consortium (W3C), which is the standards body behind web standards such as HTML, decided to recommend a set of standards placing the onus on the web page developer. These standards, called HTML Strict and XHTML, forced the web page developer to create a normalized web page, and therefore made it easy for web browsers to render pages consistently.

This approach did not work very well. The real power behind HTML is not the standards bodies, but the browser vendors because they ultimately decide what is a valid web page. They did not want to enforce this strictness on web pages because failing to load web pages would only serve to make their browser look deficient.

As the W3C continued on with their strict standards, a rival group called WHATWG started work on a rival standard that would eventually become HTML5. The members of this group were made up of participants from the main browser vendors, and their goals were far more pragmatic. Rather than creating a whole new set of standards, this group first looked at what browsers were already doing and, where possible, formed standards from this.

W3C eventually abandoned their efforts for strictness and joined WHATWG's efforts, and the two groups each publish a version of the HTML5 standard.

A large part of the HTML5 standard describes how browser vendors should create a normalized DOM from a non-normalized HTML document. This is why Chrome created the DOM that it did in the preceding example, and why Firefox, IE, and Safari would create exactly the same structures.