BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Sikos, Ph.D. Web Standards RELATED Web Standards: Mastering HTML5, CSS3, and XML gives you a deep understand- ing of how web standards can be applied to improve your website. You will also find solutions to some of the most common website problems. You will learn how to create fully standards-compliant websites and provide search engine-optimized Web documents with faster download times, accurate rendering, lower development costs, and easy maintenance. Web Standards: Mastering HTML5, CSS3, and XML describes how you can make the most of web standards, through technology discussions as well as practical sam- ple code. As a web developer, you’ll have seen problems with inconsistent appearance and behavior of the same site in different browsers. Web standards can and should be used to completely eliminate these problems. With Web Standards, you’ll learn how to: • Hand code valid markup, styles, and news feeds • Provide meaningful semantics and machine-readable metadata • Restrict markup to semantics and provide reliable layout • Achieve full standards compliance Web standardization is not a sacrifice! By using this book, we can create and maintain a better, well-formed Web for everyone. C M S a S s 3 t , e a r i n n US $49.99 d g Shelve in X H M T Web Development/General M L User level: L 5 Intermediate–Advanced , SOURCE CODE ONLINE www.apress.com For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. Contents at a Glance  About the Author.................................................................................................xvii  About the Technical Reviewer...........................................................................xviii  Preface.................................................................................................................xix  Part 1: Web Standards............................................................................................1  Chapter 1: Introduction to Web Standards.............................................................3  Chapter 2: Internationalization.............................................................................39  Chapter 3: Markup Languages: More Than HTML5..............................................55  Chapter 4: Serving and Configuration.................................................................139  Chapter 5: Style Sheets.......................................................................................161  Chapter 6: Scripting and Applications................................................................213  Chapter 7: Metadata and the Semantic Web.......................................................245  Chapter 8: Web Syndication................................................................................307  Chapter 9: Optimized Appearance......................................................................335  Chapter 10: Accessibility....................................................................................367  Part 2: Developing with Standards.....................................................................401  Chapter 11: Development Tools..........................................................................403  Chapter 12: Putting It All Together.....................................................................419  Chapter 13: Best Practices.................................................................................443  Chapter 14: Validation........................................................................................455  Chapter 15: Most Common Errors ......................................................................481  Index...................................................................................................................491 iii PART 1 Web Standards In this part of the book, you will become familiar with the theoretical background behind web standards. You will learn the fundamental concepts of web site standardization, along with the standardization bodies that develop standards and the most influential web sites that announce, promote, and distribute them. You will learn about the importance of web standards and understand the reasons for incorrect implementations, along with techniques to correct or eliminate them. You will learn the web standards by category, from server configuration and internationalization settings to standard-compliant markup, style sheets, object embedding, metadata annotations, and news feeds. After reading these chapters, you will have a solid foundation of web standards and will be able to select the most appropriate standards for your projects. 1 C H A P T E R 1 Introduction to Web Standards Technical standards are widely used in various fields of life—think of the standards of paper size and the standard envelopes that fit them. Web standards, similar to other standards, are normative specifications of technologies and methodologies. In other words, they are well-defined sets of requirements to be satisfied. They are not only ideal from the technical point of view but also represent user needs. However, web standards are often ignored; the World Wide Web consists of billions of documents that do not consider proper restrictions or regulations, causing serious problems. This is because the Web is a “free forum” where everyone can publish even without a technical background. Unfortunately, this approach comes at a price: you will often encounter sites that download slower, have an inadequate appearance, or have poor functionality. Further, in spite of the benefits of standard compliance, not only content authors but also web developers find it difficult to implement web standards. One of the major reasons for that is the lack of widespread distribution. Even the most popular web sites can be very confusing, and in contrast to the common misconception, developers cannot use them as references to learn from. Moreover, many developers ignore standards because they think incorrectly that developing with standards means an additional workload. People have a limited knowledge about web standards, and they generally know neither the reason nor the optimal method for applying them. In this chapter, you will learn about the significance of web standards and the reliable resources you should know in order to make the best use of web standards in your own applications. Web standards are often ignored, causing serious problems that are described in the “Problem Statement” section later in this chapter. This chapter sets out the major benefits of web standards. It will also give you a solid understanding of the diversity and status of standards. After reading the chapter, you will be able to recognize finalized specifications and select the most appropriate ones for any project. The Basic Concepts Web standards are applicable to the World Wide Web (for short, the Web). These formal standards define and describe various aspects of the Web. According to the Web Standards Project, a major standards promoter, “Web standards are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market” [1]. Web standards are often de facto (in practice) standards. Since there is no law that enforces them, web standards are ignored by a large share of web developers. The Recommendations published by the World Wide Web Consortium (W3C), the largest web standardization body in the world, are not exceptions either. However, in November 2010, W3C made a big step forward when it became an ISO/IEC JTC 1 PAS Submitter because any stable core web technologies produced by W3C are also in the scope of ISO. The International Standards Organization (ISO) and the International Electrotechnical 3 CHAPTER 1  INTRODUCTION TO WEB STANDARDS Commission (IEC) can efficiently contribute to the wider, and, if possible, global, adoption of W3C standards by changing the status of de facto standards to de jure (in principle) [2]. Web site standardization refers to the development process of standard web sites or the correction of nonstandard sites to fulfill the requirements to become standard sites. This phrase has been recently associated with the philosophy of web design and programming that includes the application of widely accepted technologies, techniques, and best practices. The list also includes various tricks, as well as CSS and JavaScript hacks used by many developers, most of whom are not aware that these techniques should not be used. The main goals of standardization are functionality, interoperability, and browser and resolution independence in order to ensure user experience, access to content, menu usability, and predictable behavior. The Role of Standardization As you will see, there are several goals in web development, and they cannot be achieved without a standardized approach. How is it possible to use printers on a daily basis without paper-size standards? How could anyone use electric devices without standardized voltage? Why should web developers expect that standards are not essential to quality assurance? The grammar and other rules defined by web standards should be followed when authoring on the Web. Although browsers have strong built-in error-handling features capable of eliminating problems on the user side, web developers should not misuse these features. Overall, designing costs are lower because fewer design decisions need to be made. Routine design should be based on standards. A further advantage is that developers can use their knowledge again when designing. Users switch to other web sites within a few seconds if the content is not provided in an appropriate manner. As a result, poor functionality and usability might have a severe impact on web site traffic and business revenue. Furthermore, various browsers interpret bad or broken markup in different ways. This could be a reason for inconsistencies, bad layout, style problems, and unexpected script behavior. The best way is to fulfill all the requirements of structure, syntax, and other rules described by the appropriate Document Type Definition and W3C Recommendation (see the “W3C” section). Applying up-to-date web technologies is difficult, but it’s vital for providing powerful features that are expected by most users. Web authors should choose the right technologies to compete with other developers. Standard compliance is an essential feature of web site development that guarantees general quality [3]. Using web standards is, therefore, a promising way to improve the overall usability of the Web. The Cost of Nonstandardized Markup All Internet users encounter web sites from time to time that break apart and show elements in evidently wrong places that are partly overlapped with unreadable content. The cause is, in most cases, the nonstandard or browser-specific source code or the lack of standard support of the web browser used to render the pages. The majority of web sites are obsolete from the standardization point of view. Even the largest and most well-known companies publish nonstandard documents constantly. 4 CHAPTER 1  INTRODUCTION TO WEB STANDARDS The major drawbacks of nonstandardized documents are the following: • Inadequate search engine indexing. Crawlers cannot index incorrectly coded documents, which can cause visitor loss.1 • Longer download time. • Longer rendering. • Incorrect rendering (one of the most significant drawbacks). • Easier development. • Low level of accessibility. • Low level of backward compatibility. • Lost traffic, fewer visitors, and fewer sales. Because of the inconveniences and problems listed earlier, web sites that are not standard-compliant have a higher risk of losing functionality, popularity, and productivity. • Additional bandwidth load and hosting cost. Numerous needless characters in the source code increase both file size and complexity. • Difficult updating and maintenance. Benefits of Standard-Compliant Markup Valid, standard-compliant markup has several advantages. Here are the most important ones: • Search engine crawlers can index documents more adequately, and the content is basically search engine optimized. • Compared to those websites that violate standards, standard-compliant websites can be downloaded faster. • Well-structured markup provides faster rendering. • Web documents that apply standards properly are rendered accurately. • More users are accommodated, and they probably stay longer because of correct appearance and layout.2 • Lower development costs (only in case of well-qualified developers and carefully selected software tools). • Standard-compliant markup serves as the basis for website accessibility. • Backward compatibility is ensured as browsers evolve. • Optimal content lengths and file size (no unnecessary characters are listed in the source code), as well as cost-optimal storage (potential for cheaper hosting). 1 However, there are several additional factors that affect search engine indexing. 2 Thanks to correct rendering rather than design. 5 CHAPTER 1  INTRODUCTION TO WEB STANDARDS • Standard-compliant markup is easier to maintain and update than the markup that violates standards. • Standard-compliant source codes become obsolete later, and upgrading is much easier when new standards are introduced. • Compatibility with current and future browsers is guaranteed (at least from a developer’s point of view). • Inspire implementation and force web browsers to support standards progressively. It should be evident that standard-compliant, clean code has many advantages over nonstandard source code. Consequently, it is not only highly recommended but vital to consider standards during web site development. Development and Announcement of Standards Generally, web standards are technical specifications of web technologies released by standardization bodies. Most web standards are published by W3C [4]. Its Recommendations are vital when designing with standards.3 W3C publishes specifications on markup languages, style sheets, metadata, XML technologies, semantic markup, mathematical notation, and graphical formats, just to mention the most important categories. However, there are also other influential standards organizations on the web standardization scene (Table 1-1). Table 1-1. Influential Organizations on Web Standardization Major Specifications and Organization Abbreviation Web Site Standards Dublin Core Metadata DCMI www.dublincore.org Dublin Core Metadata Initiative ECMA International ECMA www.ecma- ECMAScript [5] (formerly ECMA) international.org International Organization ISO www.iso.org Web site engineering and for Standardization other IT standards [6], for example, user interface standards, PNG functional specification Internet Assigned Numbers IANA www.iana.org Domain names, IP address Authority coordination, protocol assignments [7] 3 The term recommendation refers to the lack of legal status. This is one of the reasons why they are applied so rarely. 6 CHAPTER 1  INTRODUCTION TO WEB STANDARDS Major Specifications and Organization Abbreviation Web Site Standards Internet Engineering Task IETF www.ietf.org Internet standard (STD) Force documents [8], Request for Comments (RFC) documents [9], for example, proper use of HTTP, MIME, and URI Unicode Consortium Unicode www.unicode.org Unicode Standard, Unicode Technical Reports (UTRs) [10] Web Hypertext Application WHATWG www.whatwg.org HTML5, Microdata, Web Technology Working Group Applications, Web Forms, Web Workers [11] World Wide Web W3C www.w3.org Recommendations, for Consortium example, (X)HTML, CSS, DOM, XForms, SVG, RDF, GRDDL, OWL W3C Founded and directed by Tim Berners-Lee (“the inventor of the Web”4), the World Wide Web Consortium is the largest international organization for developing standards for the World Wide Web. It has several local offices throughout the world. The members of W3C are mainly universities and research groups that are keen to participate in the development of web standards. W3C works as an open forum. Efforts are made to ease contributions to web standards. In fall 2010, W3C released the Draft Proposal “Making W3C the place for new standards” [12]. Openness could be the key to new, easier contributions from the web community, including independent web developers without W3C membership. It also contributes to the maximization of knowledge reuse [13]. Important standards such as HTML5, CSS, SVG, MathML, various APIs, RDFa, and Microdata are summarized in a suite of technical standards called the Open Web Platform, which is open for contributions from external organizations and the public [14]. W3C is now “an open platform for web standardization” [15]. In fact, many problems web developers face every day have already been solved and published in earlier W3C Recommendations, sometimes several years ago. Some technologies are based on ideas that were originally created elsewhere but later shared with W3C to achieve wider support and popularity. News feeds, for example, are not as new as one might think. They were described many years earlier when they first appeared on the Web and became supported by major browsers, operating systems, and office suites [for example, 16]. Surprisingly, RSS 0.9 was published as early as 1999 [17]! A similar trend holds for markup languages, vector graphics, equations, and other specifications. Mathematical notations are published as GIF image files all over the Internet, although the markup language for this purpose became a Recommendation in 1999 (with updates soon following). 4 Although he is often referred this way, he does not call himself so. 7 CHAPTER 1  INTRODUCTION TO WEB STANDARDS Vector graphics are seldom used on the Web, although W3C started to develop the SVG standard in 1998, and it became a Recommendation in 2001.5 High-resolution bitmap graphics are used instead. But why? They should be replaced by SVG whenever possible, and raster graphics should be applied for publishing photographs only. SVG is supported by Amaya, the free web editor/browser of W3C, and popular graphic suites like Adobe Illustrator and CorelDraw. From 2010, SVG has also been indexed by Google [18]. SVG 1.2 supports animation too. Editing SVG is not more complicated than editing bitmaps, but SVG files are generally smaller in size, can be downloaded faster, and have incomparable quality compared to bitmaps. WHATWG The Web Hypertext Application Technology Working Group (WHATWG) is a professional yet unofficial community founded by individuals in 2004. It was a response to the relatively slow standards development at W3C and its decision to abandon HTML in favor of XHTML and other XML-based standards. The WHATWG has an invitation-only committee, which controls the editors of specifications. Anyone can contribute to the efforts of WHATWG by joining one of its open mailing lists [19]. ERCIM The European Research Consortium for Informatics and Mathematics assembles researchers to work in cooperation on various fields of ICT and applied mathematics including, but not limited to, information system applications, information storage and retrieval, information interfaces and presentation, data encryption, and database management [20]. The scientific approach is ensured by 19 organizations from different countries across Europe. ERCIM has played a major role in the formulation of standards such as SMIL and SVG [21]. IETF The Internet Engineering Task Force (IETF) is a standardization group within the nonprofit organization Internet Society (ISOC) along with the Internet Architecture Board (IAB). IETF focuses mainly on Internet protocols. IETF standards are generally on lower levels than web site developers are interested in; however, even the well-known TCP/IP has been developed by IETF. “The mission of the IETF is make the Internet work better by producing high quality, relevant technical documents that influence the way people design, use, and manage the Internet [22].” Technical documents are listed on the Requests for Comments (RFC) web site [23]. Ecma International Ecma International is a nonprofit standards organization that develops and promotes standards for information and communication systems [24]. One of its most important standards from a web developer’s point of view is the standardized scripting language ECMAScript (which JavaScript is based on; see the section “JavaScript” for more). Unicode Consortium The Unicode Consortium coordinates the development, maintenance, and promotion of Unicode and other internationalization standards [25]. The nonprofit organization defines the behavior and 5 In contrast, Internet Explorer supports SVG natively from 2011 only. 8