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 will never be another version of HTML, but HTML will always continue to evolve.
The next line contains the opening html tag, which encapsulates the remainder of the document:
This tag contains an attribute called lang, which has been given the value en. Attributes provide a mechanism for providing extra meaning to tags. This particular attribute is stating that the language of the document is English.
Note
The ISO standard 639-1 defines the set of two-letter codes that can be used for languages. These can also be paired with a country code, for instance en-US. Country codes are defined in the ISO standard 3166.
As with many aspects of HTML5, although the specification defines the attributes and their expected values, it is up to the browser to decide what to do with this information. The browser may use this information to suggest a translation to a non-English speaker, or it may do absolutely nothing with this information.
The next element in the document is the head element. This is the section of the document where you can provide important metadata about the document, along with links to other files needed by the document. The head section never contains any visual components of the web page. In this particular case, the head contains one important piece of metadata:
This specifies that the character encoding of the document is UTF-8. I will not cover character encodings in this section, but the specification recommends setting this.
There is one other element that is commonly added to the head element: the title element. This is the text that the browser will display in the title bar when the web page is loaded. Therefore, add the following inside the head section:
and then view the page in Chrome; the tab header will appear as follows:
Figure 1.4
Next you come to the body element. This is where all the visual elements of the page will be described. In this particular example, the body consists of a single text string, but it is this area of the document that you will enhance in the chapters ahead to create interesting web pages.
Understanding Elements and Attributes
Even though the examples you have created are very simple, you can already see that elements can be nested inside one another, and as a result, create a tree-like structure.
Every HTML document has a single top-level element, which is always the html element (the document type element is not part of the document as such).
In addition, every element in the document can have zero or more children. The html element has two children: head and body. The head element in turn has a child of its own: the meta element.
Every element in the document (except the html element) has one (and only one) parent. The parent of the head element is the html element. The parent of the meta element is the head element.
As you will see, the structure of pages will become considerably more complex, and the degrees of nesting will increase enormously. No matter how complex the pages become, however, all the elements will follow these simple rules.
You have examined how elements consist of an opening and closing tag; for instance the opening of the head tag is <head> while the closing is an identically named tag preceded by a forward slash </head>.
Some elements do not require any content: The tag and its attributes provide all the information that is required. In this case, the start and the end tag can be combined into the following construct:
The forward slash before the end of the tag indicates that the tag is being closed. This is the direct equivalent of the following:
You should always ensure that all tags are closed in the reverse order they are opened. For example, you should never write markup as follows:
In this case, the strong element is supposed to be the child of the p element, but the p element ends before the strong element.
Note
The strong tag is used to indicate that a piece of text is important. Although this is often confused with the now deprecated bold tag, it is, in fact, still a valid HTML5 tag. This tag is not considered a presentation tag because it indicates that text is important, not how this text should be styled. You may decide that strong elements are colored red rather than with a bold font.
