Lesson 1 Getting Started with HTML5 ✓ The W3C and WHATWG work together to keep the development of the HTML5 specification moving forward. ✓ HTML5 offers new features for editable content, inserting audio and video, and more. ✓ HTML documents include a DOCTYPE, root element, head, and body. ✓ The HTML document tree sees each element in an HTML document kind of like a node on a family tree. ✓ Different web browsers support and display HTML5 features differently. COPYRIGHTED MATERIAL 004_9781118074756-ch01.indd4_9781118074756-ch01.indd 7 66/21/12/21/12 111:531:53 AAMM 1. What’s the difference between the W3C and WHATWG? Find out on page ...................................................................................... 10 2. What new options does HTML5 offer for fonts and text editing? Get the lowdown on new text features on page ...................................14 3. What appears at the top of every HTML document? Flip to page ............................................................................................... 18 4. How do you insert a web page title in the browser’s title bar? The details are on page ...........................................................................20 5. What’s the difference between block elements and inline elements? If you’re intrigued, check out page ........................................................ 22 004_9781118074756-ch01.indd4_9781118074756-ch01.indd 8 66/21/12/21/12 111:531:53 AAMM n this lesson, you start writing your own web code right away. Well, Ialmost. I walk you through a little history of where HTML5 comes from and why it’s still evolving — essential points to understand before you start creating your own web pages. After that though, you jump right into creating a framework for a web page, using a simple example page called Hello HTML as a reference point. You learn basic concepts about HTML elements, too. After you get started, you discover how easy writing your own HTML can be. Introducing HTML5 HTML5 is stepping up to the many challenges that the modern web user presents. At the time of this writing, HTML5 is not yet standard — the W3C is working on the specification. However, many web browsers are already being updated to conform to the HTML5 specification. Although HTML5 has many new additions and features, it still includes fea- tures from previous versions of HTML. (Otherwise you’d have to rebuild all your existing sites!) The following sections introduce you to what still works and what exciting new features HTML5 has to offer. Understanding the evolution of HTML With HTML5, HTML has come of age. Tim Berners-Lee invented HTML ostensibly for the exchange of scientific and technical documents. Although 1993 is credited as the official invention date, he had, in fact, been tinkering with it since the 1980s. His inspired stroke of genius was to envision an interconnected web of self-descriptive documents connected by hyperlinks, and his energy and dedication made this idea a reality. Because HTML grew rapidly, going through three versions in a short period of time, it became quite unruly and littered with styling tags and attri- butes. Browsers didn’t help, tolerating all kinds of markup and doing their best to interpret illegal documents (that is, documents that didn’t conform to the rules of HTML). To help curb this unruliness, HTML was passed off to the sterner tutelage of XML, producing XHTML. 004_9781118074756-ch01.indd4_9781118074756-ch01.indd 9 66/21/12/21/12 111:531:53 AAMM 10 Lesson 1 In XHMTL, all style tags were deprecated (or phased out), and the newly created Cascading Styling Sheets (CSS) was used instead for styling. This certainly got things under control, and authors gradually moved over to the new paradigm and started creating legal documents. However, the XML definitions were somewhat constricting and, to a certain extent, curtailed development. For this reason, the Web Hypertext Application Technology Working Group (WHATWG) group was founded; it freed HTML from the con- straints of the XML Document Type Definition (DTD) and allowed continuous development of HTML. The World Wide Web Consortium (W3C) soon fell into line with HTML5, and the two groups have worked almost in lockstep, as you discover later in this lesson. Not to push an analogy too far, but HTML is now officially free of its parents and faces a bright and almost limitless future. In HTML5, you find the following changes and innovations: ✓ Style attributes and style tags are obsolete. ✓ Numerous new semantic tags enable designers and developers to fine- tune how web page content is marked up. ✓ Closer integration with scripting lan- guages provides several new events and LINGO has eased the integration of scripts with markup. A semantic tag is a tag whose name describes the type of con- ✓ Improper markup is handled in an tent it contains. So, for example, improved, and standardized, way. heading tags contain headings. ✓ Better control over multimedia helps website visitors viewing media on mobile devices. Introducing W3C and WHATWG W3C and WHATWG have the most influence on what’s happening with web languages. Although these organizations work together, they approach the changes in HTML a bit differently. Throughout this book, I refer to W3C and WHATWG documentation, which — according to the Ian Hickson, the editor of HTML5 — originate from the same source documents. They’re the Rosetta Stone, if you will, for all things web and are the places you go if you want to read the actual working recommen- dations for HTML5 and follow their progress. Interpreting them, however, may be another matter altogether. 004_9781118074756-ch01.indd4_9781118074756-ch01.indd 1010 66/21/12/21/12 111:531:53 AAMM 11 Introducing HTML5 W3C The W3C is the international body that develops the standards driving the web. Tim Berners-Lee, GO ONLINE the guy who invented the original web, is the The W3C’s home on the web is director of the W3C — a pretty logical relation- www.w3c.org. Here you find ship! This group — which comprises designers, all the working drafts and current web browser developers, and executives — specifications for HTML5, CSS3, publishes the recommendations and speci- and their predecessors, as well fications that become the basis for how web as countless discussions around browser developers support standards. changes and new ideas. The W3C’s work on web standards The W3C works on a number of different things is done in years-long cycles of and — most importantly to anyone interested in development, analysis, and ulti- designing a site based on HTML5 — helps drive mately consensus (though often the development of the HTML5 and CSS3 stan- controversial) among its members. dards, along with all the (many!) components that go into them. The W3C is not just about the web as you typically know it through the major browsers, either. Every year, the W3C focuses on different aspects of web technology to address current and future needs. As this book goes to press, the W3C has five major areas of focus: ✓ Web applications: Combining video, graphics, style, fonts, geolocation, 3D, and other technologies (both locally and across networks) to create new forms of entertainment, games, education, governance, social net- working, and so on. ✓ Data and service integrations: As the web grows in size and scope, more and more data is available to use and analyze for countless pur- poses. The W3C explores ways to integrate and share data across applications. ✓ Web of trust: Trust and data security is an ongoing issue across the web. The W3C explores better ways to secure data even (and especially) while finding ways to share it. ✓ Television, mobile, and the web of devices: The web is no longer lim- ited to a browser on a computer. Televisions, game devices, mobile phones, medical equipment, and more all access the web. The W3C tries to make the specification so open that it’s completely device-independent, with a particular focus on bringing the web and TV closer together. ✓ One web for all: Web accessibility is an important goal for the W3C, and it’s working to ensure that the specification permits equal access to the web independent of device, network, bandwidth, language, or disability. 004_9781118074756-ch01.indd4_9781118074756-ch01.indd 1111 66/21/12/21/12 111:531:53 AAMM 12 Lesson 1 WHATWG WHATWG (Web Hypertext Application Technology Working Group) is, as its name GO ONLINE suggests, the group of folks who focus on the WHATWG (www.whatwg.org) specification process. WHATWG is respon- has major categories of effort: sible for the HTML5 specification’s progress HTML, for people who want to along the W3C recommendation track, which read the full spec, usually for is a long and arduous process. developers of browsers, readers, and so on; the Web Dev Edition, WHATWG is founded on open-source com- for humble web developers; Web munity principles: Unlike the W3C, anyone Apps 1.0, for developers who build with an interest in the process can con- apps and APIs; as well as the tribute at no cost. The contributions are various conversation platforms moderated by a core group who research available to people interested in the various ideas, suggestions, and designs following or contributing. and then incorporate the good and work- As a web designer and devel- able ones into the development effort. The oper, Web Dev Edition can tell other major difference from W3C is that you things you want and need to the WHATWG group does not version and know about the most current ele- instead looks at development as a continu- ments, attributes, and properties ous process. At some point, the W3C will in HTML, including changes from stop the ongoing development of HTML5 previous versions, while leaving and version an HTML5 specification as a out the really technical language recommendation, which means that devel- that applies only to actual web opment is done.