small medium large xlarge

HTML5 and CSS3 (2nd edition): Level Up with Today's Web Technologies


Cover image for HTML5 and CSS3

HTML5 and CSS3 (2nd edition)

Level Up with Today's Web Technologies


HTML5 and CSS3 are more than just buzzwords – they’re the foundation for today’s web applications. This book gets you up to speed on the HTML5 elements and CSS3 features you can use right now in your current projects, with backwards compatible solutions that ensure that you don’t leave users of older browsers behind. This new edition covers even more new features, including CSS animations, IndexedDB, and client-side validations.

Click Watch Me for a free screencast on Web Workers.

Customer Reviews

In an industry where staying employable means staying current, this book is an
essential read and an efficient reference for web designers and developers. This
book does not belong on your bookshelf. It belongs on your desk.

- Matt Margolis

Manager, application development, Getty Images

The whole book feels like a well-stocked toolbox. It’s accessible, well-presented,
and packed with information. Brian is a confident expert and a masterful educator.

- Tibor Simic

Developer , Inge-mark

I’ve been making websites for more than ten years, and I still learned a few tricks
from reading this book. If you haven’t yet taken advantage of the new features
available in HTML5, now is the time. Brian’s book will explain what you can and
should use, and when.

- Stephen Orr,

Lead developer, Made Media

See All Reviews

About this Title

Pages: 314
Published: 2013-10-23
Release: P1.0 (2013-11-05)
ISBN: 978-1-93778-559-8

HTML5 and CSS3 power today’s web applications, with semantic markup, better forms, native multimedia, animations, and powerful APIs. You’ll get hands-on with all the new features with practical example projects, and find what you need quickly with this book’s modular structure. “Falling Back” sections show you how to create solutions for older browsers, and “The Future” sections at the end of each chapter get you excited about the possibilities when features mature.

This revised second edition walks you through new features such as IndexedDB, CSS Animations, SVG, and more, along with updated fallback solutions. You’ll use HTML5’s new markup to create better structure for your content and better interfaces for your forms. You’ll work with new form controls and validations, and build interfaces that are accessible to assistive technology and mobile devices. You’ll draw with the Canvas and SVG, do simple animations with pure CSS, work with advanced CSS selectors, and make audio and video play natively.

You’ll bring your web apps to the next level as you use Web Storage and IndexedDB to save data on the client and make applications available offline. And you’ll discover how to use web sockets, geolocation, cross-document messaging, and the History API to create even more interactive applications.

Today, you have the flexibility that used to be only available through large JavaScript libraries or proprietary plugins. Get ready for today’s web.

What You Need

You’ll need the latest versions of Google Chrome, Firefox, Opera, and Internet Explorer, along with a text editor with good support for HTML5 and CSS3 syntax. Instructions for testing on older versions of Internet Explorer are included in the book.

Contents & Extracts


  • An Overview of HTML5 and CSS3
    • A Stronger Platform for Web Development
    • The Road to the Future Is Bumpy
  • Part I — Improving User Interfaces
  • New Structural Tags and Attributes
    • Tip 1. Redefining a Blog Using Semantic Markup
    • Tip 2. Showing Progress with the Meter Element
    • Tip 3. Creating Pop-up Windows with Custom Data Attributes excerpt
    • Tip 4. Defining an FAQ with a Description List
  • Creating User-Friendly Web Forms
    • Tip 5. Describing Data with New Input Fields
    • Tip 6. Jumping to the First Field with Autofocus
    • Tip 7. Providing Hints with Placeholder Text
    • Tip 8. Validating User Input Without JavaScript
    • Tip 9. In-Place Editing with contenteditable
  • Styling Content and Interfaces
    • Tip 10. Styling Tables with Pseudoclasses
    • Tip 11. Making Links Printable with :after and content
    • Tip 12. Building Mobile Interfaces with Media Queries
    • Tip 13. Creating Multicolumn Layouts excerpt
  • Making Interfaces More Accessible
    • Tip 14. Providing Navigation Hints with ARIA Roles
    • Tip 15. Creating an Accessible Updatable Region
    • Tip 16. Improving Table Accessibility excerpt
  • Part II — New Sights and Sounds
  • Drawing In The Browser
    • Tip 17. Drawing a Logo on the Canvas
    • Tip 18. Graphing Statistics with RGraph
    • Tip 19. Creating Vector Graphics with SVG
  • Embedding Audio and Video
    • Tip 20. Working with Audio
    • Tip 21. Embedding Video
    • Tip 22. Making Videos Accessible
  • Eye Candy
    • Tip 23. Rounding Rough Edges
    • Tip 24. Working with Shadows, Gradients, and Transformations
    • Tip 25. Working with Fonts
    • Tip 26. Making Things Move with Transitions and Animations
  • Part III — Beyond Markup
  • Saving Data on the Client
    • Tip 27. Saving Preferences with Web Storage
    • Tip 28. Storing Data in a Client-Side Database Using IndexedDB
    • Tip 29. Working Offline
  • Creating Interactive Web Applications
    • Tip 30. Preserving History
    • Tip 31. Talking Across Domains
    • Tip 32. Chatting with Web Sockets
    • Tip 33. Finding Yourself: Geolocation excerpt
    • Tip 34. Getting It All Sorted Out with Drag and Drop
  • Where to Go Next
    • Defining Layouts with the Flexible Box Model
    • Cross Origin Resource Sharing
    • Web Workers
    • Server-Sent Events
    • Filter Effects
    • WebGL
    • Onward!
  • Features Quick Reference
    • New Elements
    • Attributes
    • Forms
    • Form Field Attributes
    • Accessibility
    • Multimedia
    • CSS3
    • Client-Side Storage
    • Additional APIs
  • jQuery Primer
    • Loading jQuery
    • jQuery Basics
    • Methods to Modify Content
    • Creating and Removing Elements
    • Events
    • Document Ready
    • Use jQuery Wisely
  • Encoding Audio and Video For The Web
    • Encoding Audio
    • Encoding Video
  • Resources
    • Bibliography


Brian P. Hogan is an author, editor, teacher, and web developer who’s been building web sites professionally since 1995 as a freelancer and consultant. His recent books include tmux: Productive Mouse-Free Development and Web Development Recipes. When not hacking on Ruby or JavaScript code, he’s writing songs, watching “The Simpsons,” and spending quality time with his wife and daughters.