10 Things You Need to Know about Web Design with HTML5 and CSS3 - dummies

10 Things You Need to Know about Web Design with HTML5 and CSS3

By David Karlins, Judith Muhr

HTML5 and CSS3 open the door to designing really exciting, vibrant, and dynamic web pages. In order to take full advantage of HTML5 and get your money’s worth out of CSS3’s radically new design features, here’s a list of some of the most important things you need to know about web design with HTML5 and CSS3.

  1. Every browser supports HTML5, and you should use the HTML5 document type declaration: <!doctype html> at the beginning of every HTML page you create from now on.

  2. The UTF character set supports the widest range of languages and alphabets. Use it in the <head> element of every page you create. The code is: <meta charset=”UTF-8″>.

  3. Most of HTML5’s new semantic elements (like <article> and <header>) do not have any default styling — styles are applied with CSS selectors applied to these elements.

  4. HTML5’s new form tools provide inviting placeholder text, calculate values, validate data, and provide features like pop-up color palettes and calendars.

  5. HTML5 supports native video that does not require a plug-in player. But there is no one single video file format that is supported in all major browsers.

  6. CSS3 generates gradient backgrounds so complex they can replace tiling gradient images traditional used for page or element backgrounds.

  7. CSS3’s RGBA color properties define opacity, but they work differently, and are much more powerful and flexible than traditional CSS opacity settings.

  8. CSS3 effects create drop shadows, rounded corners and irregular polygon layout elements without images or JavaScript.

  9. CSS3 transitions, animations, and @keyframes create animation and interactivity that in many ways approaches that of JavaScript.

  10. You can build mobile web apps with HTML5 that work and feel like native apps but run in browsers using jQuery Mobile without knowing any JavaScript.