id="x5_c01_para_0061">If you add this to your template.html file before the ending body tag, and then view the normalized structure in Chrome, you will notice that the browser has rearranged these tags, as you can see in Figure 1.5.
Although the HTML5 specification does have rules for fixing up your mistakes, it is generally best not to make mistakes in the first place because the rules of the HTML5 specification may not be what you intended.
I generally find it best to write tags in lowercase. As it turns out, tag names are entirely case insensitive because they are automatically converted to lowercase in the DOM. The following is therefore valid, but should be avoided for obvious readability reasons:
The final feature I will cover in this lesson is attributes. You have already seen two examples of attributes, on the html tag and on the meta tag. Many other tags also support attributes, and you will examine these throughout the book.
Attributes often consist of a name/value pair. When an attribute has a value, the value can either be included in single or double quotes. The following are equivalent:
A tag can contain more than one attribute, in which case they are simply separated by white space:
Additionally, some attributes do not have a value. These are referred to as Boolean attributes. The presence of the attribute is all that is required. For instance:
In this case, the attribute is called read-only, but the presence of the attribute is enough to indicate that the element is read-only. It is still possible to add a value to a Boolean attribute, but it has no meaning. For instance, the following input field is still read-only:
Attribute names should also be written in lowercase (because this is how they will be represented in the DOM). Generally attribute names will also use hyphens if they contain more than one word.
Try It
In this Try It, you will duplicate the template html page outlined in the lesson. You may choose to skip this portion if you are familiar with HTML, but the simple act of typing code word for word enhances your understanding.
If you get stuck in this example, you can refer back to the example earlier in the lesson, or use the screencast to guide you though the process.
Lesson Requirements
You will need a text editor and a web browser.
Step-by-Step
1. Open your text editor and create a new document.
2. Add the HTML5 doctype to the document.
3. Add an html element (both the opening and closing tags) below the document type.
4. Indicate the language of the document using an attribute on the html tag.
5. Add a head element inside the html element. You will need both an opening and a closing tag.
6. Add a title inside the head element, and give the document a name. Remember that this needs to be a child of the head element.
7. Add a body element inside the html element just below the closing head tag.
8. Add a meta element to the head indicating that the charset is UTF-8.
9. Add any text you like to the body of the document. Any text that you add should be displayed back to you when you open the web page in Chrome.
10. Save the document with a .html extension.
11. Open the document in Chrome and inspect the Document Object Model in the developer tools.
When you open this in Chrome, and then open the development tools to inspect the elements, the markup should look like Figure 1.6.
There is also a complete example in the Lesson 1 folder on the book's website called tryit.html.
Reference
Please select the video for Lesson 1 online at www.wrox.com/go/html5jsjquery24hr . You will also be able to download the code and resources for this lesson from the website.
Lesson 2
Basic HTML
This lesson provides a basic introduction to the most common HTML tags. If you are already familiar with HTML and are reading this book primarily to learn about HTML5, you could choose to skip the next two lessons, although each lesson does include material that is specific to HTML5.
In the previous lesson, you created an HTML template. In this lesson, you will start adding content to the body of this template using some of the most common HTML tags.
Structuring Text
You will begin by examining the ways you can structure text in a web page. HTML originally started life as a means of sharing research papers; thus, text formatting has always been an important part of HTML.
Begin by opening the template.html file created in the previous chapter. Replace the body of the web page, as shown in the following markup:
The body now contains three separate header elements. If you open this in Chrome, it should look like Figure 2.1.
Notice that the h1 element's text is displayed in a larger font than the h2 element. As it happens, this has nothing to do with the HTML specification; this is simply the default style provided by the web browser, just as the font is the default font of the browser. In Lesson 4, you will see how this can be overridden with Cascading Style Sheets (CSS).
You will also notice that each heading is displayed on a new line. This is not because the elements are placed on new lines in the HTML file; in fact, white space is mostly ignored in HTML. In order to prove this, change the h1 tag as follows:
If you reload the web
