HTML 5 is just the continuing evolution of content presented on the Internet. It adds some new elements, and obsoletes others, but it isn't a radical change from earlier versions. The W3C lists these differences.
WHATWG and W3C
There are two different standards of HTML 5. Web Hypertext Application Technology Working Group (WHATWG) publishes what is called a "Living Standard" and was created in response to the slow pace of progress by the World Wide Web Consortium (W3C).
New DOCTYPETo distinguish a document as HTML 5, the first thing contained in that document should be:
New Semantic Elements
The following are new elements added to HTML 5 to better organize content with meaning:
article, aside, footer, header, nav, and section. Instead of using meaningless div elements to divide up the document, these elements should be logically used.
New Input Elements
There are many new input element types, email and number.
New Editing Elements
To represent text added later use ins and text that should be removed use del elements.
It is better to separate the presentation of the text from the text itself by using CSS. This helps to make the document smaller, easier to maintain, and easier accessibility.
HTML5 removes presentational markup language with the exception of the b and i which are now intended to represent text that is stylistically different. Of course, as shown above most browsers will render them bold or italic, but it is recommended to use a class, so that CSS can be used to define alternative styles.
Current standard is ECMAScript 5.1 (ES5)
ECMAScript 6 is under development (ES6)Remember to avoid side-effects:
- Objects are assigned by reference.
- Primitives are assigned by value.
- All function arguments are passed by value
- Variables declared with var have a function level scope
- Variables declared with let will have a block level scope in ES6
Vulnerabilities to AvoidCross site scripting (XSS) - Not validating user input. If combined with a database, may be used to SQL injection.
Cross site request forgery (CSRF) - If origin headers are not validated from forms or other user specific tokens embedded in forms, then they may be posted from other sites, often without the user's knowledge.
Clickjacking - pages should check if they are being "framed" with an iFrame by comparing the window object with top.
Do's and Don'ts
- Start with base functionality and use progressive enhancement and graceful degradation
- Use a library like jQuery or Dojo to ease platform and browser differences
- Use well-known design patterns
- To ensure events fire for specific elements to run a script, the script should be attached directly to the element.