Chapter 1
New Features of HTML5
HTML5 contains quite a number of new tags and approaches to building web pages. The doctype has been simplified. Audio, video, and drawing have become native. Even the way data is handled via local storage has changed how web pages can behave. But this version of HTML offers more than these features. HTML5 takes into account the problems designers and developers have experienced in conforming to standards.
Before delving into the intricacies of HTML5 code, let it be clear that the first new feature is at the top of every page. The doctype is now simply as follows:
Gone are the transitional and strict doctypes. I, for one, will not miss them.
HTML5 Is a Kinder, Gentler HTML
The World Wide Web Consortium (W3C) is the source for web standards (see www.w3.org). HTML is one of the technologies maintained by the W3C. Web developers, subjectively based on their programming chops, have followed the requirements of HTML to a varying degree of compliance. Mistakes with HTML such as the following have crept into many web sites:
Improperly nested tags
Unclosed tags
Mismatched or missing quotation marks (“quotes”) around attributes
Missing tags
Let’s examine some of these errors as they are coded, beginning with Code Listing 1-1.
Code Listing 1-1 Incorrectly nested <p> and <span> tags
The code in Code Listing 1-1 has a mismatched nesting of HTML tags. In particular, the first paragraph starts with the <p> tag, followed by a <span> tag: <p><span></p> </span>. The code construct should end in the reverse of this structure: <p><span> </span></p>.
No matter! In a web browser, nothing appears awry, as shown in Figure 1-1.
Figure 1-1 Incorrectly nested tags do not prevent the browser from finding the correct interpretation.
Code Listing 1-2 shows a paragraph tag (<p>) left unclosed.
Code Listing 1-2 An unclosed <p> tag
The result of this problematic unclosed tag is—business as usual. Figure 1-2 shows the expected browser output.
Figure 1-2 An unclosed tag does not phase the browser.
HTML tags can have attributes, which are additional snippets of settings for the particular tag to make use of in presenting itself. Code Listing 1-3 shows an <img> tag with a height attribute that is missing a closing quote.
Code Listing 1-3 <img> height attribute not properly enclosed in quotes
Even with the missing quote, the browser overlooks this issue and shows the picture at the height indicated by the attribute. Figure 1-3 shows the image at the intended 300-pixel height.
Code Listing 1-4 points out what would appear to be a serious coding error: The body tag (<body>) is not matched with its closing tag, which should appear near the bottom of the code.
Figure 1-3 Missing quotes around an attribute value present no problem.
Code Listing 1-4 A <body> tag that does not close
Web browsers—regardless of the issues you might hear about developers needing to deal with each vendor’s peculiarities—can overcome serious coding errors. Figure 1-4 attests to this. Even with the missing </body> closing tag, no sweat over what is shown.
Figure 1-4 A missing closing body tag should be a major error, but is not.
Web browsers have been forgiving of such errors. That’s lucky for web designers and developers! Yet, trying to force perfection onto those who do web site work, a new standard known as XHTML arose, and a doctype designated as strict came into being. This corrected some problems but created some others. Whereas strict conditioning of HTML became all the rage for a while, validators (web sites that examine other web sites for errors) reported errors and would drive webmasters bananas trying to achieve perfection. The best-known validator is on the W3C web site at http://validator.w3.org/.
Figure 1-5 demonstrates just how batty validation has placed its veil on web design. It shows that a leading web site—Yahoo—fails validation. I’m sure Yahoo knows this, and I can only imagine that its developers don’t care. It hasn’t stopped Yahoo from being a web leader.
Figure 1-5 Yahoo fails validation and keeps on ticking.
As seen in Figure 1-5, Yahoo’s main web page has 158 errors, and uses the strict doctype to boot! No matter—if you visit the Yahoo site, you are guaranteed a rich and rewarding experience, regardless of validation errors.
Yahoo is a bit more of an involved site than most of us work on. If Yahoo, with a team of developers, doesn’t validate, why should you or I? Rather than discuss the philosophical issues, here’s what has become of the fact that web pages have HTML errors: The W3C decided this can’t be a forced issue. A result of this is that HTML5 has been steered away from the strict concept, and instead embraces (well, at least puts up with) such validation errors and warnings.
By the way, Google gets validation errors, too. As shown in Figure 1-6, Google has 35 errors, and is using HTML5 to boot.
Figure 1-6 Google does not validate, but who cares?
Many HTML coders are self-taught. Some HTML coders are comfortable with a certain style of coding that suits them best, even as the rules are broken. The point to all this is that an attitude shift exists in the HTML5 specification, in that HTML coding errors are forgiven, and browsers should make their best attempt to display the web page the developer intended.
TIP
HTML5 specifies that web browsers provide internal mechanisms to handle poorly written HTML code.
HTML5 and CSS
Cascading Style Sheets (CSS) and the specifications that go along with the various versions (currently the shift from CSS2 to CSS3 is underway) don’t particularly have any effect on HTML5. Rather, it is the fact that new HTML tags such as video can be treated with CSS in the same manner as the old tag standbys of body, list, div, and so on.
Figure 1-7 shows a web page with a video tag. The included video is of an octopus at an aquarium. Around the video, the border has been treated with CSS to have a black, 20-pixel border. The CSS is in the head of the page, like this:
Figure 1-7 The new video tag is treated with CSS.
Most HTML coders use CSS as part of their strategy of making web pages, but how much CSS and at what level varies widely.
CSS freed HTML from being the tool of choice to provide the presentation aspects of a web page. In plain language, this means that when examining a web page, if coded to modern accepted practices, the look is handled with CSS.
NOTE
The specification upgrade from CSS2 to CSS3 is ongoing and not universally applicable among all the various browsers. This transformation will take a while to play out.
New HTML5 Tags
Let’s get down to the nitty-gritty. Just what is new in HTML5? First, consider the importance that HTML5 usage remains compatible with HTML4. So, right off the bat is the fact that HTML5 is HTML4 with some new tags. In other words, most of HTML5 is the same as HTML4. Older browsers that do not support new HTML5 tags will have a problem, but looking at it from the other side, newer browsers that handle HTML5 will not have a problem with HTML4.
The new HTML5 tags apply to various parts of the web page and browser usage. Table 1-1 lists many of the new tags and what they do.
Table 1-1 Some New HTML5 Tags
Additionally, HTML5 includes the canvas, video, and audio tags, which much of this book is about.
HTML5 and HTML4 Comparison
So HTML5 has new tags, but what else has changed? Some HTML tags have been deprecated or their syntax has been altered. Many tag attributes have changed as well. Here is a list of some tag updates:
The a element without an href attribute now represents a placeholder for where a link otherwise might have been placed.
The cite element now represents just the title of a content-based work (such as a book, a paper, an essay, a poem, and so on). The HTML4 usage where cite is used to mark up the name of a person is no longer considered the proper use of cite.
The hr element now represents a paragraph-level break, instead of the standard use of creating a horizontal rule, although in appearance it is the same.
The i element now represents text offset from the normal prose. In practice, no doubt it will still be used to italicize text.
The menu element has been updated to be a help in structuring toolbars and context menus.
The small element now represents small print (for side comments and legal print). It is no longer meant to indicate a font size attribute. This holds true with the related size attributes of x-small, xx-small, large, and so on.
The strong element is no longer to be used to simulate a bold text look. Instead, the intent is to indicate importance. Subjectively, this is hardly a difference at all.
The head element no longer allows the object element as child.
Perhaps more relevant are the attribute changes. The following are some of those changes:
The type attribute on script and style tags is no longer required if the scripting language is ECMAScript (JavaScript) and the styling language is CSS, respectively.
The border attribute on img tags is required to have the value 0 when present. Better still, the border should be set with CSS.
The language attribute on script tags can be omitted.
Authors should use the id attribute, rather than the name attribute, on anchor <a> tags.
Bear in mind that the HTML5 overall specification is a work in progress. It is evolving as this book is being written, and can even seem to contradict itself. The source for these comprehensive usage changes is the W3C. For details of these changes and much more, visit www.w3.org/TR/2010/WD-html5-diff-20101019/.
Some attributes are no longer in the picture. In HTML5, the attributes listed in Table 1-2 are not used.
Table 1-2 Attributes That Are Not in HTML5
Keep in mind that the loss of these attributes does not mean you can no longer accomplish what they did. The goal is to move these attributes to being handled with CSS. CSS is a wonderful evolvement in web design. Perhaps it is new and scary to some. My best advice is take the time to learn it and apply it. Consider it necessary (a subjective opinion, of course, but shared by many).
The nested div structure that has been the common web organization approach now gains additional tags to help with layout, as shown in Table 1-1. Code Listing 1-5 is an example of the header, section, article, and aside tags put to use.
Code Listing 1-5 Page layout using new HTML5 tags
Figure 1-8 shows the page generated by this code listing.
NOTE
Nearly 20 years into the Web being a public entity, we still need to deal with browser differences. The layout shown in Figure 1-8 is how the page appears in the Google Chrome browser. Other browsers may or may not display the page in the same way.
Figure 1-8 Layout is handled with new tags, and you can still have your divs!
The Latest in Multimedia the HTML5 Way!
The Web is far and away a visual place to visit. Sure there is text, for without it, only so much can be conveyed. But graphics, movies, and sound are the vehicles to deliver content. A modern web site should have in its realm ways for visitors to have rich and exceptional experiences and interactions with the site. Multimedia usage is imperative for this. If as the old saying goes, “A picture is worth a thousand words,” what is a video worth?
Much of the attention-getting focus is not just that there are visual entities on the page, but also that they are animated. Figure 1-9 shows a rotating image. Of course, you can’t tell that it’s rotating here—you need to see it for yourself.
Figure 1-9 A rotating image
The image in Figure 1-9 is created with the code in Code Listing 1-6.
Code Listing 1-6 Code to create the rotating image
Summary
Sights, sounds, colors! HTML5 is making the Web an exciting place to visit—again. The first iteration of the Web, say circa 1996 or so, got us displayed static content, with some animation. It was good for the times. In the 2000s, web sites evolved to be much more detailed and interactive. That was a big step from the first Web of the last century. Now, HTML5 is set to take the web experience to new heights. And it isn’t just on your computer—HTML5 is revolutionizing how smart devices are interacting with web pages. All (well, for all practical purposes, all) tablets, cell phones, and other carry-out gadgets can browse the Web, and they all support HTML5, JavaScript, and CSS. As such, the rich experiences HTML5 offers can be viewed from just about anywhere. Coming up—how to implement much of these multimedia initiatives.