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 page, you will see that this change makes no difference to the way the headings display. Although a single whitespace character is displayed as a space inside an element, a sequence of whitespace characters, even if it contains new-line characters, is collapsed down to a single white space character.
HTML does provide a special character sequence, , for adding extra whitespace characters, but new lines should be created using the tags introduced shortly.
Note
The ampersand character, followed by a sequence of characters and terminated by a semicolon, indicates that this is a special character sequence.
There are a number of special character sequences in HTML. Perhaps the most common ones you will encounter are < and > , which are used for the less than (<) and greater than (>) characters respectively. These are required because the < and > characters have special meaning in HTML. In case you were wondering, nbsp stands for “non-breaking space.”
So what did generate the new lines after each heading? These appear because the elements h1 through h6 are block elements. All visual HTML elements have a display type, the most common of which are block and inline. Whenever a block element ends, the next element automatically begins on a new line.
Next, you can continue by adding some paragraphs to the body:
If you refresh the web page, it will look like what you see in Figure 2.2.
Each paragraph appears on a new line, and there is a space between each paragraph.
It is actually possible to omit the ending tag from a p tag. In fact, there are many cases where the ending tag can be omitted because the next tag in the document implies it. I usually find it easier to add the ending tag in these cases, but the specification makes this entirely optional. You will see throughout the examples that I sometimes omit the closing tag and sometimes include it.
What about XHTML?
If you are already familiar with HTML, you may be aware of XHTML, which is an XML-based version of HTML. HTML5 extends and replaces XHTML as well as HTML. In order to serialize an HTML5 page to XML, all tags must be closed, and the document as a whole must be well-formed. In addition, the html tag should be declared as follows:
and the content type of the document should be set to application/xhtml+xml rather than text/html when it is served to the browser.
If you are not already familiar with XHTML, you can ignore it for the duration of this book: It is typically only used if you have a need to process an HTML page with XML parsers and tools.
The text in a paragraph will automatically wrap if it reaches the far right side of the browser. Additionally, if the user resizes their browser, the text will automatically be adjusted: This process is referred to as a browser reflow.
Sometimes the browser will break your paragraphs in an inconvenient place, especially if it contains very large words. In order to give you more control over line breaks, HTML5 has introduced a tag