Web Standards. Mastering HTML5, CSS3 and XML. Leslie F. Sikos, Ph.D.

Transcription

1 Web Standards Mastering HTML5, CSS3 and XML Leslie F. Sikos, Ph.D.

2 Web Standards Mastering HTML5, CSS3, and XML Copyright 2014 by Leslie F. Sikos, Ph.D. This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): ISBN-13 (electronic): Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director: Welmoed Spahr Lead Editor: Ben Renow-Clarke Technical Reviewer: Charles Brown Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan, Jim DeWolf, Jonathan Gennick, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Steve Weiss Coordinating Editor: Christine Ricketts Copy Editor: Linda Seifert Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY Phone SPRINGER, fax (201) , orders-ny@springer-sbm.com, or visit Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please rights@apress.com, or visit Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. ebook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales ebook Licensing web page at Any source code or other supplementary material referenced by the author in this text is available to readers at and on the companion web site of the book at For detailed information about how to locate your book s source code, go to

3 Contents at a Glance About the Author... xix About the Technical Reviewer... xxi Preface... xxiii Part 1: Web Standards... 1 Chapter 1: Introduction to Web Standards...3 Chapter 2: Internationalization...37 Chapter 3: Markup Languages: More Than HTML Chapter 4: Serving and Configuration Chapter 5: Style Sheets Chapter 6: Scripting and Applications Chapter 7: Metadata and the Semantic Web Chapter 8: Web Syndication Chapter 9: Optimized Appearance Chapter 10: Accessibility Part 2: Developing with Standards Chapter 11: Development Tools Chapter 12: Putting It All Together iii

4 Contents at a Glance Chapter 13: Best Practices Chapter 14: Validation Chapter 15: Most Common Errors Index iv

5 Contents About the Author... xix About the Technical Reviewer... xxi Preface... xxiii Part 1: Web Standards...1 Chapter 1: Introduction to Web Standards...3 The Basic Concepts...3 The Role of Standardization...4 The Cost of Nonstandardized Markup... 4 Benefits of Standard-Compliant Markup... 5 Development and Announcement of Standards...6 W3C... 7 WHATWG... 7 ERCIM... 7 IETF... 8 Ecma International... 8 Unicode Consortium... 8 DCMI... 8 IANA... 8 OASIS... 8 ISO... 8 v

6 Contents Standards Promotion and Distribution...9 Groups and Associations... 9 Staying Informed: Events and Courses Resources Types, Stages, and Status of Standards...11 The Variety of Rendering Engines...12 Trident Gecko KHTML WebKit Presto Blink Amaya Testing the Standard Support of Browsers...16 Standard Compliance Tests Comprehensive Tests Standards vs. Quirks Modes, DOCTYPE Switching...18 Problem Statement...19 Limited Standards Support in Machine-Generated Code Major Concerns...21 Bad Practices Lack of Support Unconcern Influential Sites Visual Appeal Over Functionality Well-Formedness Interoperability Eliminated Version Targeting Backward Compatibility Forward Compatibility Functionality vi

7 Contents Device Independence Separating Content from Presentation Usability Reliable Layout Code Optimality Summary...29 References...29 Chapter 2: Internationalization...37 The Importance of Character Encoding...37 Unicode...39 Characters That Should Be Avoided In the Markup Formatting Characters Suitable Also for Markup Special Characters NFC Normalization Is Recommended Unicode Should Be Preferred Declaring Character Encoding for the Markup...45 Encoding Declaration in the HTTP Header In-Document Declarations Declaring Character Encoding for CSS...46 HTTP Header Declarations In-Document Declarations Escape Codes, Special Characters, and Symbols...47 Numeric References Entity References Checking I18N...49 Summary...49 References...49 vii

8 Contents Chapter 3: Markup Languages: More Than HTML SGML Languages...54 HTML XML Languages...54 XHTML Version Overview...55 HTML Versions and Variants XHTML Versions and Variants HTML (X)HTML 5.1, (X)HTML 5.2, and Beyond Markup Syntaxes...63 The HTML Syntax The XHTML Syntax and Restrictions Data Types...70 Markup Elements...72 Block vs. Inline Elements Attributes...79 Global Attributes Event Handlers HTML Document Structure...92 New Semantic Structuring Elements In HTML Document Type Declaration XHTML Document Structure Moving from HTML to XHTML Specific Markup Languages SVG MathML viii

9 Contents Combinations, Profiles, and Mixed-Namespace Documents (X)HTML+RDFa XHTML-Print XHTML + MathML + SVG Choosing a Markup Language The Benefits of XHTML 1.x over HTML 4.x The Benefits of HTML5 over HTML 4.x and XHTML HAML: Markup Preprocessing Alternatives to Web Markup Summary References Chapter 4: Serving and Configuration The HTTP Header Internet Media Types (MIME) Common Media Types Serving XHTML Serving XHTML as HTML Serving XHTML as XML URIs, URLs, and URNs Persistent URIs Summary References Chapter 5: Style Sheets Cascading Style Sheets Levels, Profiles, and Modules Grammar and Conventions Implementation Display and Visibility ix

10 Contents Cascading Inheritance Scopes and Structure The Box Model Overview of CSS Properties Initial Property Values Default Styles of Rendering Engines XSL XSLT Style Sheets Combining CSS and XSL CSS Preprocessing Sass LESS Stylus Summary References Chapter 6: Scripting and Applications Client-Server Architectures Scripting and Standards Implementation Client-Side Development Ajax Flex HTML5 APIs Java Applets ECMAScript, JavaScript, and jquery Silverlight Server-Side Development ColdFusion Java x

11 Contents The.NET Framework Perl PHP Python Ruby SSJS Combinations of Client-Side and Server-Side Technologies Database Technologies Alternate Content and Fallback Mechanism for Scripts Summary References Chapter 7: Metadata and the Semantic Web The Semantic Web Structured Data Semantic Annotations The meta Tags Microformats HTML5 Microdata Knowledge Organization Systems: Schemas, Vocabularies, and Ontologies FOAF DOAC Dublin Core Knowledge Representation Standards Resource Description Framework (RDF) Web Ontology Language (OWL) Simple Knowledge Organization System (SKOS) Combining Metadata Combining Vocabularies in RDF Microdata and Microformats xi

12 Contents Dublin Core and vcard in RDF Dublin Core, vcard, and Math-Net DC, IMS, and ODRL Special Applications Image Metadata and XMP Metadata for YouTube Videos Metadata in SEO Summary References Chapter 8: Web Syndication News Feeds Really Simple Syndication Creating an RSS File Required Elements Optional Elements Subelements of the item Element Namespaces Styling RSS Feeds Atom Creating an Atom File Containers Metadata and Content Elements RSS or Atom? Summary References Chapter 9: Optimized Appearance Layout Positioning and Floating Tableless Web Layout xii

13 Contents Typography Misused Characters Web Fonts Embedding External Content Raster Graphics Vector Graphics Flash Audio Video Summary References Chapter 10: Accessibility Defining Web Accessibility WCAG WCAG Migrating from WCAG 1.0 to WCAG U.S. Section Semantic (X)HTML5 Elements and WAI-ARIA JavaScript Accessibility PDF Accessibility Flash Accessibility Accessibility of Mathematical Notations Summary References Part 2: Developing with Standards Chapter 11: Development Tools Feature Requirements Text Editors WYSIWYG Editors xiii

14 Contents xiv Content Management Systems and Bloggers Web Standards Support Specific Editors Semantic Editors and Reasoners MathType Markup Correctors Responsive Web Design Frameworks Foundation Bootstrap Skeleton Less Framework Gumby Browsers as Development Tools Validator and Debugger Plug-ins Testing Web Pages in Text Browsers View the Source Code Summary References Chapter 12: Putting It All Together Choosing the Relevant Standards Switching Between Standards Step-by-Step Development Starting from Scratch Links Images Lists Tables Drop-Down Selection Lists Forms Flash Content RSS News Feeds

15 Contents Making Web Sites Valid Through Redesign Summary References Chapter 13: Best Practices Appropriately Used Elements Content in Logical Order Mobile-Friendly Layout Sizes and Proportions Lengths in Relative Units Combine Units Properly Embedding External Content Properly Embedding YouTube Videos as Valid XHTML or HTML Embedding Google Maps as Valid XHTML or HTML Semantic Web Best Practices WAI-ARIA Best Practices Mobile Web Best Practices Providing Robustness Declaring Fallback Generic Fonts Declarations with Appropriate Specificity Testing Rendering in Multiple Browsers Readability Without Styles Summary References Chapter 14: Validation Concepts Markup Validation Validating XML Validating RDF/XML xv

16 Contents xvi Validating News Feeds Validating CSS Validating I18N Validating Hyperlinks Validating Accessibility Validating Mobile-Friendliness Unified Validators W3C Unicorn Total Validator SortSite Extracting Semantic Content Expressing Validity W3C Icons Representing Technologies Summary References Chapter 15: Most Common Errors Common Serving Errors Common Markup Errors Incorrectly Used Elements Incorrect Structure Misused Tables Nonoptimal Code Length Element and Attribute Errors End Tag Errors Identifiers Common Style Sheet Errors Nonexisting Properties Nonexisting or Incorrectly Used Property Values Ignored Inheritance

17 Contents Color Errors Incorrect Locations Transparent Backgrounds Miscellaneous Errors Common News Feed Errors Common Script Errors Common Accessibility Errors Summary References Index xvii

18

19 About the Author Leslie F. Sikos, Ph.D. is a computer scientist specializing in web standards, Responsive Web Design, Semantic Web, and Web Accessibility. Being a hand coder Web standardista and senior web designer, he is particularly interested in the Open Web Platform and Web Quality Assurance through standards-based web design and web site optimization. Living on the cutting edge of web technologies, he prides himself on creating stunning, well-structured, mobile-friendly web sites with excellent user experience. Dr. Sikos is a member of several professional organizations, including the World Wide Web Consortium (W3C), the Internet Engineering Task Force (IETF), the Internet Society (ISOC), and the Unicode Consortium. He is also an invited editor and reviewer actively contributing to the development of open standards. His research interests include Semantic Web technologies. He can convert unstructured web contents to structured data, especially Linked Open Data and Linking Enterprise Data, and manually add machine-readable metadata annotations to the markup. He is interested in knowledge representation with RDF, OWL, and SKOS, and the implementation of knowledge organization systems such as controlled vocabularies and ontologies. He is also a Web Accessibility expert providing web sites with the desired level of accessibility, including WCAG 1.0 at all priority levels (1, 2, 3), WCAG 2.0 at all conformance levels (A, AA, AAA), and Section 508. Dr. Sikos is the author of 13 books covering a wide range of topics including JavaScript, XHTML, XML, CSS, Flash, digital photography, image processing, video authoring, computer hardware, HTML5, and CSS3. Due to his pedagogical background, he can introduce technical terms and explain complex development issues in plain English. You can read more about his publications on his fully standards-compliant web site at xix

20

21 About the Technical Reviewer Charles Brown is one of the most noted authors, consultants, and trainers in the industry today. His books about Dreamweaver and Fireworks have received critical acclaim and are used worldwide as teaching tools. In addition to his work in the IT industry, Charles is also a noted concert pianist, organist, and guitarist appearing in major concert centers worldwide. He began his musical studies at age 4 and went on to study with famed pianist Vladimir Horowitz. At age 14, he made his debut with Leonard Bernstein and later studied at the famed Juilliard School. Eventually he went to Paris to study with the 20th century legend, Igor Stravinsky. While working with Stravinsky, Charles developed a close friendship with one of the most powerful artistic forces of the 20th century: Pablo Picasso. What he learned about creativity from Picasso he uses today in his writings and training work. Charles is a certified Macromedia/Adobe trainer who is in heavy demand worldwide. He frequently speaks at major conferences such as MAX and NAB. You can see his blog at blog.charlesebrown.net and his web site can be found at CharlesEBrown.net. xxi

22

23 Preface Since its earliest stage in the 1990s, the Web has been attracting all kinds of content authors. Anybody with minimal know-how could publish web sites from anywhere, anytime. This easy access has allowed millions of web sites to appear on the network of networks without any kind of content review or censorship. However, the freedom to publish without limitations led to low-quality code and poor copywriting on many sites. Online presence is increasingly important in the competitive market, but often people are unware of the costs of web design and hosting. To keep expenses down, many try to launch and maintain a web site on their own, and are reluctant to pay for professional web design services. Such people are usually not familiar with the principles of web design, typography, color theory, or web standards, and do not have graphic design and programming skills either. Those who use a Content Management System to develop web sites often believe that there is no need for qualified professionals anymore in web design. However, while a Graphical User Interface and predefined templates are easy to use, the quality of software-generated code cannot compete with the markup and style sheets written by professional web designers. In fact, web authoring and development tools often generate codes that are not standard-compliant, longer and more complex than optimal, not well-structured, lack semantics, and are inaccessible to people with disabilities. Even if the code is standard-complaint, content authors without solid web design skills update the markup incorrectly, resulting in web sites that will violate web standards. To ensure acceptable download speed, rendering, and functionality for poorly written web sites, browsers are extremely error tolerant and can ignore incorrect code blocks, handle missing end tags, and so on. This error tolerancy doesn t mean that web standards can be ignored! For more than a decade, the inconsistent appearance and behavior across various browsers was a real challenge, and often frustration, for web designers, a problem laypeople never understood. Even standard-compliant sites fell apart or rendered incorrectly under various browsers that did not support a particular markup element or style sheet property. Browser vendors eventually recognized the importance of standards, and gradually improved their products. In the early 2010s, modern browsers reached an acceptable (and constantly improving) level of web standards support, and creating robust web sites became almost exclusively the responsibility of web designers. From the standardization point of view, it is not an exaggeration that most web sites including the largest, frequently updated multi-million dollar portals often apply obsolete technologies and bad practices, and are not optimal. Common web design practices take just a few basic principles into account, such as appearance, buzzwords, and marketing potential, while miss important factors such as document structure, properly implemented standards, user interface, user experience, and accessibility. Web designers often publish incorrect templates based on popular, emerging technologies that are not yet standardized to increase their web site traffic, and others distribute such code blocks on other sites, leading to invalid markup and style sheets. Also, there are people who keep using the same technologies, techniques, and practices for as long as possible even if better technologies and new trends appear. Unfortunately, the proper implementation of web standards is quite often a minor concern only. The growing popularity of mobile browsing has led to a huge demand for mobile-friendly web sites. As a result, supporting smartphones, tablets, and high-resolution monitors became a standard user expectation. How can web designers create web sites that work perfectly on all these devices when they come with different screen size, resolution, aspect ratio, and scrollability? The answer to this question led to a paradigm shift in the web design industry called Responsive Web Design that provides an optimal viewing experience regardless of the browsing device. Responsive Web Design is based on earlier best practices such as progressive enhancement (which was a result of the even earlier approach, graceful degradation). xxiii

24 Preface Practical problems are often solved by the web design community, usually in the form of a new technique or framework. The approaches and software tools that are really efficient become so popular that they are implemented globally and designers start considering them as best practices. However, there is no ultimate solution for web design problems. For example, how can machine-readable annotations be leveraged in modern web services? How can web site appearance and functionality be guaranteed on a variety of platforms? How can the length of the markup and styling rules be minimized while preserving site information, functionality, and behavior? How can correct character rendering be ensured on a multilingual site? Global concerns can often be addressed by the implementation of web standards. Since the development process of technical specifications can be slow, years can pass between the initial idea, the standard release, and the practical applications. Implementing specifications that are not yet standardized is usually a bad practice, but sometimes inevitable, especially when the standard under development is shaped by the feedback from the web design community. Users usually do not know that many web site inconsistencies, unreadable elements, and poor functionality are caused by the low-quality markup and style sheets that do not comply with web standards. Standard compliance provides backward-and forward-compatibility so web sites can be used on the widest ranges of browsers, including older, current, and future versions, and will be easy to update when new standards appear. Web standards contribute to interoperability, platform-, device- and resolution-independence so standards-based web sites are easy to use and provide excellent user experience regardless of the screen size or resolution, operating system, and browser. Correctly structured markup is a fundamental requirement for accessibility and machine-readable, semantic annotations, and also ensures that the information of your site is conveyed even if the style sheets cannot be loaded. This book is a comprehensive collection of state-of-the-art information on both the core web standards and lesser-known standards that deserve more attention. In fact, it is written to be the most complete reference of web standardization resources ever published. The step by-step guides are based on solid theoretical design principles and standardized specifications, and are demonstrated through sample code while focusing on syntax, formal grammar, recommended annotations, and other standardization concerns. This book also introduces you to cuttingedge technologies and best practices that can be implemented in modern web sites to achieve mobile-friendliness, accessibility, machine-readability, and usability through standard compliance. xxiv