HTML5, JavaScript, and jQuery 24-Hour Trainer. Cameron Dane
this represents the end of the heading:
Note
HTML defines six categories of header from h1 to h6. The lower the number, the more important the header is.
The entire h1 structure – including the start tag, the end tag, and its textual content – is referred to as an element.
The HTML5 markup language specifies the tags that can be used in an HTML document, how they should be used, and what additional information (called attributes) they can contain.
In the early days of HTML, many of the tags included in the markup language instructed the browser how to present information. For instance, tags were used to dictate font size and color.
The HTML markup language is no longer responsible for dictating the presentation of a document, and in HTML5 most of the remaining presentation tags have been removed. Presentation is now the sole preserve of another technology called Cascading Style Sheets, which will be examined later in this section.
Instead, the HTML5 markup language is responsible for conveying the meaning of the various components of the document and how they interact with other components.
Note
Browsers can still provide their own default styles for tags, however, and this is why an h1 element will appear in large, bold text.
HTML5 greatly enhances the expressiveness of earlier version of HTML, however, and allows sections of the document to be marked as, amongst other things, headers, footers, and asides.
Earlier versions of HTML were based on a technology called SGML, which is a language for expressing markup languages. As of HTML5, the HTML markup language is not based on any other technology. This has removed a number of restrictions from the language; therefore, if you are familiar with HTML, you will notice in the sections that follow that a number of the old rules no longer apply.
The Simplest HTML Page Possible
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.
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.
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.
An HTML Template
In the previous section, you wrote the simplest web page you could write. In this section, you will write a web page following a basic template that is intended to represent the simplest HTML structure you should write.
I will first present the template, and then I will walk you through it line by line. Open a new document in your text editor, and save the following as template.html:
If you open this in Chrome, and then view the DOM in the developer tools, it will look like the example in Figure 1.3.
As you can see, in this case there is far closer alignment between the content you provided in the HTML file and the normalized structure generated by the browser.
Let's now walk through each line in the document and examine its purpose.
The first line in the document is as follows:
This line defines the document type of the page. Because there have been many different HTML standards over the years, the browser uses this line to understand which of these standards the page is using, and then uses the rules applicable for this standard to interpret the content of the page and render it accordingly.
This is the HTML5 document type definition, and comes as a pleasant surprise for developers who may be accustomed to copying and pasting DOCTYPE declarations such as:
The other main surprise about this document type definition is that it does not include a version number: The document type is simply html.
Although the specification is referred to as HTML5, it defines a “living-standard” that will be subject to incremental change as and when browser vendors implement, and agree on, new features. Put another way, there